+{% extends "base.html" %}
+
+{% block title %}
+ Tags
+{% endblock %}
+
+{% block content %}
+
+<style>
+ table {
+ width:auto;
+ }
+ td {
+ white-space:nowrap;
+ }
+ table td:last-child {
+ width: 100%;
+ }
+</style>
+
+<table class="table">
+ <tr>
+ <th>Package</th>
+ <th>Tags</th>
+ </tr>
+ {% for package in packages %}
+ <tr>
+ <td>
+ <a href="{{ package.getDetailsURL() }}">
+ {{ package.title }}
+ </a>
+
+ by {{ package.author.display_name }}
+ </td>
+ <td class="tags">
+ {% for tag in package.tags %}
+ <span class="badge badge-primary mr-1">{{ tag.title }}</span>
+ {% 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">×</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() {
+ const row = $(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() {
+ var ele = $(this);
+ var sel = ele.parent().find("select");
+ sel.hide();
+
+ var options = [];
+ sel.find("option").each(function() {
+ var text = $(this).text();
+ options.push({
+ id: $(this).attr("value"),
+ value: text,
+ toString: function() { return text; },
+ });
+ });
+
+ ele.selectSelector(options, sel);
+ });
+ });
+
+</script>
+{% endblock %}