{% load static %}
{% load i18n %}
{% load l10n %}
{% load humanize %}
{% load admin_url %}
{% load mastodon %}
{% load oauth_token %}
{% load truncate %}
{% load strip_scheme %}
{% load thumb %}

<!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 item.category.label %} - {{ item.title }}">
  <meta property="og:type" content="{{ item.category }}">
  <meta property="og:url" content="{{ request.build_absolute_uri }}">
  <meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ item.cover.url }}">
  <meta property="og:site_name" content="{{ site_name }}">
  <meta property="og:description" content="{{ item.brief }}">
  {% block opengraph %}
  {% endblock %}
  <title>{{ site_name }} - {% trans item.category.label %} | {{ item.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="entity-detail">

                <a href="{{ item.cover.url }}" class="entity-detail__img-origin" target="_blank" title="{% trans '查看原图' %}">
                  <img src="{{ item.cover|thumb:'normal' }}" class="entity-detail__img" alt="{{ item.title }}">
                </a>

                <div class="entity-detail__info">
                  {% if item.is_deleted %}
                  [DELETED]
                  {% endif %}
                  {% if item.merged_to_item %}
                  [MERGED <a href="{{ item.merged_to_item.url }}">{{ item.merged_to_item.title }}</a>]
                  {% endif %}
                  {% block title %}
                  <h5 class="entity-detail__title">
                    {{ item.title }}

                    {% for res in item.external_resources.all %}
                    <a href="{{ res.url }}">
                      <span class="source-label source-label__{{ res.site_name }}">{{ res.site_name.label }}</span>
                    </a>
                    {% endfor %}
                  </h5>
                  {% endblock %}

                  {% block details %}
                  <div class="entity-detail__fields">
                    <div class="entity-detail__rating">
                      {% if item.rating %}
                      <span class="entity-detail__rating-star rating-star" data-rating-score="{{ item.rating | floatformat:0 }}"></span>
                      <span class="entity-detail__rating-score"> {{ item.rating | floatformat:1 }} </span>
                      <small>({{ item.rating_count }}人评分)</small>
                      {% else %}
                      <span> {% trans '评分：评分人数不足' %}</span>
                      {% endif %}
                    </div>
		                <div>此类数据尚未支持</div>
                    <div>uuid: {{item.uuid}}</div>
                    <div>class: {{item.class_name}}</div>
                    <div>category: {{item.category}}</div>
                  </div>
                  {% endblock %}

                  <div class="tag-collection">
                    {% for tag in item.tags %}
                    <span class="tag-collection__tag">
                      <a href="{% url 'catalog:search' %}?tag={{ tag }}">{{ tag }}</a>
                    </span>
                    {% endfor %}
                  </div>
                </div>
              </div>
              <div class="dividing-line"></div>
              {% if item.brief %}
              <div class="entity-desc" id="description">
                <h5 class="entity-desc__title">{% trans '简介' %}</h5>

                <p class="entity-desc__content">{{ item.brief | linebreaksbr }}</p>
                <div class="entity-desc__unfold-button entity-desc__unfold-button--hidden">
                  <a href="javascript:void(0);">展开全部</a>
                </div>
              </div>
              {% endif %}

              {% if item.contents %}
              <div class="entity-desc" id="contents">
                <h5 class="entity-desc__title">{% trans '目录' %}</h5>
                <p class="entity-desc__content">{{ item.contents | linebreaksbr }}</p>
                <div class="entity-desc__unfold-button entity-desc__unfold-button--hidden">
                  <a href="javascript:void(0);">展开全部</a>
                </div>
              </div>
              {% endif %}

              {% if item.track_list %}
              <div class="entity-desc" id="description">
                <h5 class="entity-desc__title">{% trans '曲目' %}</h5>
                <p class="entity-desc__content">{{ item.track_list | linebreaksbr }}</p>
                <div class="entity-desc__unfold-button entity-desc__unfold-button--hidden">
                  <a href="javascript:void(0);">展开全部</a>
                </div>
              </div>
              {% endif %}

              <div class="entity-marks">
                <h5 class="entity-marks__title">{% trans '标记' %}</h5>
                {% if mark_list %}
                <a href="{% url 'catalog:mark_list' item.url_path item.uuid %}" class="entity-marks__more-link">{% trans '全部标记' %}</a>
                <a href="{% url 'catalog:mark_list' item.url_path item.uuid 'following' %}" class="entity-marks__more-link">关注的人的标记</a>
                {% endif %}

                <ul class="entity-marks__mark-list">
                {% for others_mark in mark_list %}
                <li class="entity-marks__mark">
                    <a href="{% url 'journal:user_profile' others_mark.owner.mastodon_username %}" class="entity-marks__owner-link">{{ others_mark.owner.username }}</a>

                    <span>{{ others_mark.shelf_label }}</span>

                    {% if others_mark.rating %}
                    <span class="entity-marks__rating-star rating-star" data-rating-score="{{ others_mark.rating }}"></span>
                    {% endif %}

                    {% if others_mark.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 %}

                    {% if others_mark.shelfmember.metadata.shared_link %}
                    <a href="{{ others_mark.shelfmember.metadata.shared_link }}" target="_blank"><span class="entity-marks__mark-time">{{ others_mark.created_time | date }}</span></a>
                    {% else %}
                    <span class="entity-marks__mark-time">{{ others_mark.created_time | date }}</span>
                    {% endif %}

                    {% if others_mark.text %}
                    <p class="entity-marks__mark-content">{{ others_mark.comment_html|safe }}</p>
                    {% endif %}
                </li>
                {% empty %}

                <div> {% trans '暂无标记' %} </div>

                {% endfor %}
                </ul>
              </div>
              <div class="entity-reviews">
                <h5 class="entity-reviews__title">{% trans '评论' %}</h5>
                {% if review_list %}
                <a href="{% url 'catalog:review_list' item.url_path item.uuid %}" class="entity-reviews__more-link">{% trans '全部评论' %}</a>
                {% endif %}
                {% if review_list %}
                <ul class="entity-reviews__review-list">
                  {% for others_review in review_list %}
                  <li class="entity-reviews__review">
                    <a href="{% url 'journal:user_profile' others_review.owner.mastodon_username %}" class="entity-reviews__owner-link">{{ others_review.owner.username }}</a>
                    {% if others_review.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 %}
                    <span class="entity-reviews__review-time">{{ others_review.edited_time }}</span>
                    <span class="entity-reviews__review-title"> <a href="{% url 'journal:review_retrieve' others_review.uuid %}">{{ others_review.title }}</a></span>
                    <span>{{ others_review.get_plain_content | truncate:100 }}</span>
                  </li>
                  {% endfor %}
                </ul>
                {% else %}
                <div>{% trans '暂无评论' %}</div>
                {% endif %}
              </div>
            </div>
          </div>

          <div class="grid__aside" id="aside">
            {% block sidebar_review %}
            {% if user.is_authenticated %}
            <div class="aside-section-wrapper">
              {% if mark.shelf_type %}
              <div class="mark-panel">
                <span class="mark-panel__status">{% trans '我' %}{% trans mark.shelf_label %}</span>
                {% if mark.rating %}
                <span class="mark-panel__rating-star rating-star" data-rating-score="{{ mark.rating | floatformat:'0' }}"></span>
                {% endif %}
                {% if mark.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 %}
                <span class="mark-panel__actions">
                  <a href="#" hx-get="{% url 'journal:mark' item.uuid %}" class="edit" hx-target="body" hx-swap="beforeend">{% trans '修改' %}</a>
                  <form id="mark_delete" action="{% url 'journal:mark' item.uuid %}" method="post">
                    {% csrf_token %}
                    <input type="hidden" name="delete" value="1">
                    <a href="javascript:$('#mark_delete').submit()" class="delete">{% trans '删除' %}</a>
                  </form>
                </span>
                <div class="mark-panel__clear"></div>

                <div class="mark-panel__time">
                 <!--  <div>
                    {% for log in mark.logs %}
                    {{ log.timestamp|date }} {{ log.action_label }}<br>
                    {% endfor %}
                  </div> -->
                {% if mark.metadata.shared_link %}
                <a href="{{ mark.metadata.shared_link }}">{{ mark.created_time|date }}</a>
                {% else %}
                {{ mark.created_time|date }}
                {% endif %}
                </div>

                {% if mark.text %}
                <p class="mark-panel__text">{{ mark.comment_html|safe }}</p>
                {% endif %}
                <div class="tag-collection">

                  {% for tag in mark.tags %}
                  <span class="tag-collection__tag"><a href="{% url 'journal:user_tag_member_list' user.mastodon_username tag %}">{{ tag }}</a></span>
                  {% endfor %}

                </div>
              </div>
              {% else %}
              <div class="action-panel" id="addMarkPanel">
                <div class="action-panel__label">{% trans '标记' %}{% trans item.demonstrative %}</div>
                <div class="action-panel__button-group">
                  {% for k, v in shelf_types %}
                  <button class="action-panel__button" data-status="{{ k }}" hx-get="{% url 'journal:mark' item.uuid %}?shelf_type={{ k }}" class="edit" hx-target="body" hx-swap="beforeend">{% trans v %}</button>
                  {% endfor %}
                </div>
              </div>
              {% endif %}
            </div>

            <div class="aside-section-wrapper">
              <div class="review-panel action-panel">
                {% if review %}
                <span class="review-panel__label">{% trans '我的评论' %}</span>
                {% if review.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 %}
                <span class="review-panel__actions">
                  <a href="{% url 'journal:review_edit' item.uuid review.uuid %}">{% trans '编辑' %}</a>
                  <a href="{% url 'journal:review_delete' review.uuid %}?return_url={{ item.url }}">{% trans '删除' %}</a>
                </span>

                <div class="review-panel__time">{{ review.edited_time }}</div>

                <a href="{% url 'journal:review_retrieve' review.uuid %}" class="review-panel__review-title">
                  {{ review.title }}
                </a>
                {% else %}
                <div class="action-panel__button-group action-panel__button-group--center">
                  <a href="{% url 'journal:review_create' item.uuid %}">
                    <button class="action-panel__button">{% trans '撰写评论' %}</button>
                  </a>
                </div>
                {% endif %}
              </div>
            </div>
            {% else %}
            <div class="aside-section-wrapper">
              <div class="mark-panel">
                <span>{% trans '登录后可管理标记和评论' %}</span>
              </div>
            </div>
            {% endif %}
            {% endblock %}

            {% block sidebar %}
            {% endblock %}

            {% block sidebar_collection %}
            <div class="aside-section-wrapper">
              <div class="action-panel">
                <div class="action-panel__label">{% trans '相关收藏单' %}</div>
                <div >
                  {% if collection_list %}
                  {% for c in collection_list %}
                  <p>
                    <a href="{{ c.url }}">{{ c.title }}</a>
                  </p>
                  {% endfor %}
                  {% endif %}
                  {% if request.user.is_authenticated %}
                  <div class="action-panel__button-group action-panel__button-group--center">
                    <button class="action-panel__button add-to-list" hx-get="{% url 'journal:add_to_collection' item.uuid %}" hx-target="body" hx-swap="beforeend">{% trans '添加到收藏单' %}</button>
                  </div>
                  {% endif %}
                </div>
              </div>
            </div>
            {% endblock %}
          </div>
        </div>
      </section>
    </div>
    {% include "partial/_footer.html" %}
  </div>
  <div class="player">
  </div>
</body>
</html>
