{% 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>
            <div id="collection_items"
                 hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}?edit=1"
                 hx-trigger="load"></div>
          </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>
