{% load static %}
{% load i18n %}
{% load l10n %}
{% load humanize %}
{% load mastodon %}
{% load thumb %}
{% load collection %}
{% load user_actions %}
<!DOCTYPE html>
<html lang="zh" class="content-page">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:title"
          content="{{ collection.title }} - {% trans 'Collection' %} - {{ site_name }}">
    <meta property="og:description" content="{{ collection.description }}">
    <meta property="og:type" content="article">
    <meta property="og:article:author"
          content="{{ collection.owner.display_name }}">
    <meta property="og:url" content="{{ request.build_absolute_uri }}">
    <meta property="og:image" content="{{ collection.cover|thumb:'normal' }}">
    <meta property="og:site_name" content="{{ site_name }}">
    <meta name="fediverse:creator"
          content="@{{ collection.owner.full_handle }}">
    <title>{{ site_name }} - {% trans 'Collection' %} - {{ collection.title }}</title>
    {% include "common_libs.html" %}
  </head>
  <body>
    {% include "_header.html" %}
    <main>
      <div class="grid__main">
        <section>
          <hgroup>
            <h3>
              <div class="action">
                {% if request.user.is_authenticated %}
                  <span>{% include '_feature_stats.html' with featured=featured_since %}</span>
                  <span>
                    <a href="#"
                       hx-get="{% url 'journal:collection_share' collection.uuid %}"
                       hx-target="body"
                       hx-swap="beforeend"
                       title="{% trans "Share" %}"><i class="fa-solid fa-share-nodes"></i></a>
                  </span>
                {% endif %}
                {% if collection.latest_post %}
                  {% include "action_like_post.html" with post=collection.latest_post %}
                  {% include "action_boost_post.html" with post=collection.latest_post %}
                {% endif %}
              </div>
              {{ collection.title }}
              {% if collection.visibility > 0 %}<small><i class="fa-solid fa-lock"></i></small>{% endif %}
            </h3>
          </hgroup>
          <div class="owner-info">
            <div class="owner">
              <span class="avatar">
                <img src="{{ collection.owner.avatar }}"
                     alt="{{ collection.owner.display_name }}">
              </span>
            </div>
            <div class="info">
              <p>
                <a href="{{ collection.owner.url }}">{{ collection.owner.display_name }}</a>
                <span class="handler">@{{ collection.owner.handle }}</span>
              </p>
              <p>
                {% for cat, count in collection.get_summary.items %}
                  {% if count %}
                    <span>{% prural_items count cat %}</span>&nbsp;&nbsp;
                  {% endif %}
                {% endfor %}
              </p>
              {% if featured_since %}
                <p>
                  <progress value="{{ stats.percentage }}"
                            max="100"
                            title="{{ stats.percentage }}%" />
                </p>
              {% endif %}
              <div class="markdown-content">{{ collection.html_content | safe }}</div>
            </div>
            <div class="more">
              <div style="text-align: center;">
                <img src="{{ collection.cover|thumb:'normal' }}" alt="">
              </div>
            </div>
          </div>
        </section>
        {% comment %}
          {% if featured_since %}
          <section style="min-width:10vw;">
            <div class="donut" style="background: conic-gradient(#7CBDFE 0deg {{ stats.complete_deg }}deg, #B4D2A5 {{ stats.complete_deg }}deg {{ stats.complete_deg|add:stats.progress_deg }}deg, #ccc {{ stats.complete_deg|add:stats.progress_deg }}deg 1deg );"><div class="hole"><div class="text">
              {% if stats.progress %}
              {{ stats.progress }} in progress<br>
              {% endif %}
              {% if stats.complete %}
              {{ stats.complete }} completed
              {% elif not stats.progress %}
              not started
              {% endif %}
            </div></div></div>
            <div style="margin:8px; color:lightgray" class="muted">
              Started {{ featured_since|date }}
              <a class="muted" href="#" title="stop" onclick="if (confirm('Stop this target?')) $('#stop-featured').submit();"><i class="fa-solid fa-ban"></i></a>
              <form action="{% url 'journal:collection_remove_featured' collection.uuid %}" method="post" id="stop-featured">
                {% csrf_token %}
              </form>
            </div>
          </section>
          {% endif %}
        {% endcomment %}
        <section>
          <div class="entity-list"
               hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}"
               hx-trigger="load">
            <i class="fa-solid fa-compact-disc fa-spin loading"></i>
          </div>
        </section>
        <section>
          {% if request.user.is_authenticated %}
            <span class="action">
              <span>
                <a hx-get="{% url 'journal:piece_replies' collection.uuid %}"
                   hx-swap="outerHTML"
                   hx-trigger="click once"
                   hx-target="#replies_{{ collection.latest_post.pk }}">
                  {{ collection.latest_post.stats.replies | default:'' }}
                  {% trans "Reply" %}
                </a>
              </span>
              {% if request.user.identity == collection.owner %}
                <span>
                  <a href="{% url 'journal:collection_edit' collection.uuid %}">{% trans 'Edit' %}</a>
                </span>
                <span>
                  <a href="{% url 'journal:collection_delete' collection.uuid %}">{% trans 'Delete' %}</a>
                </span>
              {% elif editable %}
                <a href="{% url 'journal:collection_edit' collection.uuid %}">{% trans 'Collaborative editing' %}</a>
              {% endif %}
            </span>
          {% endif %}
          <span class="action inline">
            {% if collection.latest_post %}
              {% include "action_open_post.html" with post=collection.latest_post %}
            {% endif %}
            <span><a>{% trans "Created date" %}: {{ collection.created_time|date }}</a></span>
          </span>
        </section>
        <section id="replies_{{ collection.latest_post.pk }}">
        </section>
      </div>
      {% include "_sidebar.html" with identity=collection.owner show_profile=1 %}
    </main>
    {% include "_footer.html" %}
  </body>
</html>
