{% load static %}
{% load i18n %}
{% load l10n %}
{% load humanize %}
{% load admin_url %}
{% load mastodon %}
{% load oauth_token %}
{% load truncate %}
{% load thumb %}
{% load collection %}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta property="og:title" content="{{ site_name }} {% trans '收藏单' %} - {{ collection.title }}">
  <meta property="og:description" content="{{ collection.description }}">
  <meta property="og:type" content="article">
  <meta property="og:article:author" content="{{ collection.owner.username }}">
  <meta property="og:url" content="{{ request.build_absolute_uri }}">
  <meta property="og:image" content="{{ collection.cover|thumb:'normal' }}">

  <title>{{ site_name }} {% trans '收藏单' %} - {{ collection.title }}</title>

  {% include "common_libs.html" with jquery=0 %}
</head>

<body>
  <div id="page-wrapper">
    <div id="content-wrapper">
      {% include "partial/_navbar.html" %}

      <section id="content">
        <div class="grid">
          <div class="grid__main" id="main">
            <div class="main-section-wrapper">
              <div class="review-head">
                <h5 class="review-head__title">
                  {{ collection.title }}
                </h5>
                {% if collection.visibility > 0 %}
                <span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                  <path
                  d="M17,8.48h-.73V6.27a6.27,6.27,0,1,0-12.53,0V8.48H3a.67.67,0,0,0-.67.67V19.33A.67.67,0,0,0,3,20H17a.67.67,0,0,0,.67-.67V9.15A.67.67,0,0,0,17,8.48ZM6.42,6.27h0a3.57,3.57,0,0,1,7.14,0h0V8.48H6.42Z" />
                </svg></span>
                {% endif %}
                <div class="review-head__body">
                  <div class="review-head__info">

                    <a href="{% url 'journal:user_profile' collection.owner.mastodon_username %}" class="review-head__owner-link">{{ collection.owner.mastodon_username }}</a>


                    <span class="review-head__time">{{ collection.edited_time }}</span>

                  </div>
                  <div class="review-head__actions">
                    {% if request.user == collection.owner %}
                    <a class="review-head__action-link" href="{% url 'journal:collection_edit' collection.uuid %}">{% trans '编辑' %}</a>
                    <a class="review-head__action-link" href="{% url 'journal:collection_delete' collection.uuid %}">{% trans '删除' %}</a>
                    {% elif editable %}
                    <span class="review-head__time">可协作整理</span>
                    {% endif %}
                  </div>
                </div>
                <!-- <div class="dividing-line"></div> --> <!-- <div class="entity-card__img-wrapper" style="text-align: center;"> <img src="{{ collection.cover|thumb:'normal' }}" alt="" class="entity-card__img"> </div> -->
                <div class="markdown-content">
                  {{ collection.html | safe }}
                </div>
              </div>
              <div class="entity-list" hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}" hx-trigger="load">
              </div>
            </div>
          </div>
          <div class="grid__aside" id="aside">
            <div class="aside-section-wrapper">
              <div class="entity-card">
                <div class="entity-card__img-wrapper">
                  <a href="{{ collection.url }}">
                    <img src="{{ collection.cover|thumb:'normal' }}" alt="" class="entity-card__img">
                  </a>
                </div>
                <div class="entity-card__info-wrapper">
                  <h5 class="entity-card__title">
                    <a href="{{ collection.url }}">
                      {{ collection.title }}
                    </a>
                  </h5>
                  <p>
                    {% for cat, count in collection.get_summary.items %}
                    {% if count %}
                    {{count}}{{cat|prural_items}}
                    {% endif %}
                    {% endfor %}
                  </p>
                  {% if follower_count %}
                  <p> {{ follower_count }}人关注 </p>
                  {% endif %}
                </div>
              </div>
            </div>

            {% if is_featured %}
            <div class="aside-section-wrapper">
              <div class="action-panel">
                <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 }} 进行中<br>
                  {% endif %}
                  {% if stats.complete %}
                  {{ stats.complete }} 已完成
                  {% elif not stats.progress %}
                  尚未开始
                  {% endif %}
                </div></div></div>
              </div>

              <div class="action-panel" style="margin-bottom: 0;">
                <div class="action-panel__button-group action-panel__button-group--center">
                  <form action="{% url 'journal:collection_remove_featured' collection.uuid %}" method="post">
                    {% csrf_token %}
                    <button class="action-panel__button" title="点击取消目标设置">{% trans '当前进度' %} {{ stats.percentage }}%</button>
                  </form>
                </div>
              </div>
            </div>
            {% endif %}

            {% if available_as_featured %}
            <div class="aside-section-wrapper">
              <div class="action-panel">
                <div class="action-panel__button-group action-panel__button-group--center">
                  <form action="{% url 'journal:collection_add_featured' collection.uuid %}" method="post">
                    {% csrf_token %}
                    <button class="action-panel__button">{% trans '设为目标' %}</button>
                  </form>
                </div>
              </div>
            </div>
            {% endif %}

            {% if not is_featured and request.user.is_authenticated and request.user != collection.owner %}
            <div class="aside-section-wrapper">
              <div class="action-panel">
                <div class="action-panel__button-group action-panel__button-group--center">
                  {% if following %}
                  <form action="{% url 'journal:unlike' collection.uuid %}?back=1" method="post">
                    {% csrf_token %}
                    <button class="action-panel__button">{% trans '取消关注' %}</button>
                  </form>
                  {% else %}
                  <form action="{% url 'journal:like' collection.uuid %}?back=1" method="post">
                    {% csrf_token %}
                    <button class="action-panel__button">{% trans '关注' %}</button>
                  </form>
                  {% endif %}
                </div>
              </div>
            </div>
            {% endif %}

            {% if request.user.is_authenticated %}
            <div class="aside-section-wrapper">
              <div class="action-panel">
                <div class="action-panel__button-group action-panel__button-group--center">
                  <form>
                    <button class="action-panel__button add-to-list" hx-get="{% url 'journal:collection_share' collection.uuid %}" hx-target="body" hx-swap="beforeend">{% trans '分享到联邦网络' %}</button>
                  </form>
                </div>
              </div>
            </div>
            {% endif %}

          </div>
        </div>
      </section>
    </div>
    {% include "partial/_footer.html" %}
  </div>


  <script>
    $(".markdownx textarea").hide();
  </script>
  <script>
    document.body.addEventListener('htmx:configRequest', (event) => {
      event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
    })
  </script>
</body>


</html>
