{% extends "todo/todo_base.html" %}

{% block title %}
	{{ _("Package Tags") }}
{% endblock %}

{% block content %}
<div class="row">
	<div class="col-md-6">
		<form method="GET">
			<label for="q" class="sr-only">{{ _('Search all packages') }}</label>
			<div class="input-group">
				<input class="form-control" id="q" name="q" type="text" placeholder="{{ _('Search all packages') }}">
				<div class="input-group-append">
					<input class="btn btn-primary" type="submit" value="{{ _('Search') }}">
				</div>
			</div>
		</form>
	</div>
	<div class="col-md-6 text-right">
		{% if only_no_tags %}
			<a class="btn btn-primary" href="{{ url_set_query(no_tags=0) }}">
				{{ _("Missing tags only") }}
			</a>
		{% else %}
			<a class="btn btn-secondary" href="{{ url_set_query(no_tags=1) }}">
				{{ _("Missing tags only") }}
			</a>
		{% endif %}
		{% if check_global_perm(current_user, "EDIT_TAGS") %}
			<a class="btn btn-secondary ml-2" href="{{ url_for('admin.tag_list') }}">{{ _("Edit Tags") }}</a>
		{% endif %}
	</div>
</div>

<table class="table mt-5">
	<tr>
		<th>Package</th>
		<th></th>
		<th>Tags</th>
	</tr>
	{% for package in packages %}
		<tr>
			<td>
				<a href="{{ package.getURL("packages.view") }}">
					{{ package.title }}
				</a>

				by {{ package.author.display_name }}
			</td>
			<td class="text-center">
				{% if package.checkPerm(current_user, "EDIT_PACKAGE") %}
					<a class="btn btn-link btn-sm py-0" href="{{ package.getURL("packages.create_edit") }}">
						<i class="fas fa-pen"></i>
					</a>
				{% endif %}
			</td>
			<td class="tags">
				{% for tag in package.tags %}
					<a class="badge badge-primary mr-1"
							href="{{ url_set_query(_add={ 'tag': tag.name }) }}">
						{{ tag.title }}
					</a>
				{% endfor %}
				<!-- <a class="badge badge-secondary add-btn px-2" href="#">
					<i class="fas fa-plus"></i>
				</a> -->
			</td>
		</tr>
	{% endfor %}
</table>

<div class="modal">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">{{ _("Edit tags") }}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<select name="tags" multiple>
					{% for tag in tags %}
						<option value="{{ tag.name }}">{{ tag.title }}</option>
					{% endfor %}
				</select>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Update</button>
			</div>
		</div>
	</div>
</div>
{% endblock %}

{% from "macros/forms.html" import form_scripts %}

{% block scriptextra %}
{{ form_scripts() }}

<script>
	$(".add-btn").click(function() {
		$(this).parent().parent();

		$(".modal select option").removeAttr("selected");
		$(".multichoice_selector").remove();

		$(".modal .modal-body").prepend(`
			<div class="multichoice_selector bulletselector form-control">
				<input type="text" placeholder="Start typing to see suggestions">
				<div class="clearboth"></div>
			</div>
		`);

		$(".modal").modal("show");
		$(".modal input").focus();
		$(".multichoice_selector").each(function() {
			const ele = $(this);
			const sel = ele.parent().find("select");
			sel.hide();

			const options = [];
			sel.find("option").each(function() {
				const text = $(this).text();
				options.push({
					id: $(this).attr("value"),
					value: text,
					toString: function() { return text; },
				});
			});

			ele.selectSelector(options, sel);
		});
	});

</script>
{% endblock %}