{% extends "base.html" %}

{% block title %}
	{% if collection %}
		{{ _("Edit") }} - {{ collection.title }}
	{% else %}
		{{ _("New Collection") }}
	{% endif %}
{% endblock %}

{% block scriptextra %}
	<script src="/static/libs/jquery.min.js?v=2"></script>
	<script src="/static/libs/jquery-ui.min.js?v=2"></script>
	<script src="/static/js/collection_editor.js"></script>
{% endblock %}

{% block content %}
	{% from "macros/forms.html" import render_field, render_submit_field, render_checkbox_field, render_field_prefix_button %}
	<form method="POST" action="" enctype="multipart/form-data">
		{{ render_submit_field(form.submit, class_="btn btn-primary float-end") }}
		<h1>{{ self.title() }}</h1>

		{{ form.hidden_tag() }}

		<div class="row">
			{{ render_field(form.title, class_="col-sm-6") }}
			{% if form.name %}
				{{ render_field_prefix_button(form.name, class_="col-sm-6", pattern="[a-z0-9_]+",
					prefix="/collections/" + collection.author.username + "/",
					hint=_("Users won't be redirected when going to the old URL")) }}
			{% endif %}
		</div>

		{{ render_field(form.short_description) }}
		{{ render_checkbox_field(form.private, class_="my-3") }}
		{% if collection %}
			{{ render_field(form.long_description, fieldclass="form-control markdown") }}
		{% endif %}

		{% if collection %}
			<h2>{{ _("Packages") }}</h2>
			<div class="mb-5">
				<label for="add_package" class="visually-hidden">Add package</label>
				<input id="add_package" type="search" class="form-control d-none" placeholder="Add package">
				<p id="add_package_empty" class="mt-2" style="display: none;">
					<i>{{ _("No results") }}</i>
				</p>
				<div id="add_package_results" class="list-group"></div>
			</div>
			<div id="package_list" class="sortable">
				{% for item in collection.items %}
					{% set package = item.package %}
					<article class="card my-3" data-id="{{ package.get_id() }}">
						<div class="card-body">
							<div class="row">
								<div class="col-auto text-muted pe-2">
									<i class="fas fa-bars"></i>
								</div>
								<div class="col">
									<button class="btn btn-sm btn-danger remove-package float-end"
											type="button" aria-label="{{ _('Remove') }}">
										<i class="fas fa-trash"></i>
									</button>
									<h5>
										<a href="{{ package.get_url('packages.view') }}" target="_blank">
											{{ _("%(title)s by %(author)s", title=package.title, author=package.author.display_name) }}
										</a>
									</h5>
									<p class="text-muted">
										{{ package.short_desc }}
									</p>
									{{ form.package_ids[loop.index - 1]() }}
									{{ form.package_removed[loop.index - 1]() }}
									{{ render_field(form.descriptions[loop.index - 1], hint=_("You can replace the description with your own"), no_class=True) }}
								</div>
							</div>
						</div>
					</article>
				{% endfor %}
			</div>
			{{ form.order() }}
		{% endif %}

		<div class="mt-5">
			{{ render_submit_field(form.submit) }}
		</div>
		<span id="confirm_delete" class="d-none">
			{{ _("Are you sure you want to remove {title}?") }}
		</span>
	</form>
{% endblock %}