{% load static %}
{% load i18n %}
{% load mastodon %}
<!DOCTYPE html>
<html lang="zh" class="content-page">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ site_name }} - {% trans "Collection" %} - {{ title }} - {% trans "Edit" %}</title>
    {% include "common_libs.html" %}
    <script src="{{ cdn_url }}/npm/html5sortable@0.13.3/dist/html5sortable.min.js"></script>
    <style type="text/css">
      #id_collaborative li, #id_visibility li {display: inline-block !important;}
      .grid__main details {
        margin: 2rem 0;
      }
    </style>
  </head>
  <body>
    {% include "_header.html" %}
    <main>
      <div class="grid__main">
        <h4>
          {% if collection %}
            {% trans "Edit" %} <a href="{{ collection.url }}">{{ collection.title }}</a>
          {% else %}
            {% trans "Create a new collection" %}
          {% endif %}
        </h4>
        <hr>
        <details {% if not collection %}open{% endif %}>
          <summary>{% trans "Title and Description" %}</summary>
          <form class="entity-form markdown-content"
                method="post"
                enctype="multipart/form-data">
            {% csrf_token %}
            {{ form }}
            <input class="button" type="submit" value="{% trans 'Save' %}">
          </form>
          {{ form.media }}
        </details>
        {% if collection %}
          <hr>
          <details open>
            <summary>{% trans "Items" %}</summary>
            <section>
              <div id="collection_items"
                   class="sortable"
                   hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}?edit=1"
                   hx-trigger="load"></div>
            </section>
            <form class="entity-form"
                  hx-target="#collection_items"
                  hx-swap="beforeend"
                  hx-post="{% url 'journal:collection_append_item' collection.uuid %}"
                  method="post">
              {% csrf_token %}
              <input type="url"
                     name="url"
                     placeholder="{{ request.scheme }}://{{ request.get_host }}/item/abcd123"
                     style="min-width:24rem"
                     required>
              <input type="text"
                     name="note"
                     placeholder="{% trans 'note' %}"
                     style="min-width:24rem">
              <input class="button"
                     type="submit"
                     value="{% trans 'Add an item to this collection' %}">
            </form>
            <script>
              function update_member_order() {
                var member_ids = [];
                $('.sortable>.item-card').each(function () {
                  member_ids.push($(this).data('member-id'));
                });
                $('#member_ids').val(member_ids.join(','));
                return true;
              }
            </script>
            <form class="entity-form"
                  hx-target="#collection_items"
                  hx-post="{% url 'journal:collection_update_member_order' collection.uuid %}"
                  onsubmit="return update_member_order()"
                  hx-swap="beforeend"
                  method="post">
              {% csrf_token %}
              <input type="hidden" name="member_ids" id="member_ids" required>
              <input type="submit"
                     class="secondary"
                     value="{% trans "Drag and drop to change the order order and click here to save" %}">
            </form>
          </details>
        {% endif %}
      </div>
      {% include "_sidebar.html" with show_profile=1 fold_profile=1 identity=collection.owner|default:request.user.identity %}
    </main>
    {% include "_footer.html" %}
  </body>
</html>
