{% load static %}
{% load i18n %}
{% load l10n %}
{% load humanize %}
{% load mastodon %}
{% load strip_scheme %}
{% load thumb %}
{% load user_actions %}
{% load duration %}
<!DOCTYPE html>
<html lang="zh" class="item-page">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:title"
          content="{% trans item.category.label %} - {{ item.display_title }}">
    <meta property="og:type" content="{{ item.category }}">
    <meta property="og:url" content="{{ item.absolute_url }}">
    {% if item.has_cover %}<meta property="og:image" content="{{ item.cover_image_url }}">{% endif %}
    <meta property="og:site_name" content="{{ site_name }}">
    <meta property="og:description" content="{{ item.brief_description }}">
    {% if item.is_deleted or item.merged_to_item %}<meta name="robots" content="noindex">{% endif %}
    <title>{{ site_name }} - {% trans item.category.label %} | {{ item.display_title }}</title>
    {% include "common_libs.html" %}
    {% block head %}{% endblock %}
  </head>
  <body>
    {% include "_header.html" %}
    <main>
      <div id="item-title" class="middle">
        {% if item.is_deleted %}[DELETED]{% endif %}
        {% if item.merged_to_item %}
          [MERGED TO <a href="{{ item.merged_to_item.url }}">{{ item.merged_to_item.display_title }}</a>]
        {% endif %}
        <h1>
          {{ item.display_title }}
          <small>
            {% if item.year %}({{ item.year }}){% endif %}
          </small>
        </h1>
        <span class="site-list">
          {% for res in item.external_resources.all %}
            <a href="{{ res.url }}" class="{{ res.site_name }}">{{ res.site_label }}</a>
          {% endfor %}
        </span>
      </div>
      <div id="item-cover" class="left">
        <img src="{{ item.cover_image_url|default:item.cover.url|relative_uri }}"
             alt="{{ item.display_title }}">
      </div>
      {% if request.user.is_authenticated and not mark.shelf_type %}
        <div id="item-primary-action" class="right mark">
          <div class="item-action item-mark-buttons">
            {% for k, v in shelf_statuses %}
              {% if v and k != 'dropped' %}
                <button class="primary"
                        data-status="{{ k }}"
                        hx-get="{% url 'journal:mark' item.uuid %}?shelf_type={{ k }}"
                        hx-target="body"
                        hx-swap="beforeend">{% trans v %}</button>
              {% endif %}
            {% endfor %}
          </div>
          <div class="tv-tip" style="display:none;">
            {% trans 'select one of the seasons to comment' %}
            {% if item.class_name == 'tvshow' %}
              {% with item.all_seasons as seasons %}
                {% if seasons %}
                  <div _="init hide .item-mark-buttons then hide .item-mark-icon then show .tv-tip end">
                    {% for s in seasons %}
                      <span class="season-number">
                        <a href="{{ s.url }}">{{ s.season_number|default:"#" }}</a>
                      </span>
                    {% endfor %}
                  </div>
                {% endif %}
              {% endwith %}
            {% endif %}
          </div>
        </div>
      {% endif %}
      {% if request.user.is_authenticated and mark.shelf_type %}
        <div id="item-primary-mark" class="right mark">
          <div class="item-action">
            <button class="outline edit"
                    hx-get="{% url 'journal:mark' item.uuid %}"
                    hx-target="body"
                    hx-swap="beforeend">
              <strong>{% trans mark.status_label %}</strong>
              <br>
              {% if mark.rating_grade %}
                {{ mark.rating_grade | rating_star }}
                <br>
              {% endif %}
              <small>{{ mark.created_time | date }}</small>
              <!-- <span style="white-space: nowrap;">
          <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i><i class="fa-regular fa-star"></i>
        </span> -->
            </button>
          </div>
          <div class="small-only" style="margin-top:2vh;">
            <a href="#item-sidebar">{% trans 'mark, comment and collect' %}</a>
          </div>
        </div>
      {% endif %}
      <div id="item-sidebar" class="right">
        {% if request.user.is_authenticated %}
          {% include "_item_user_pieces.html" %}
        {% else %}
          <section>
            <p class="empty">
              <span><a href="{% url 'users:login' %}?next={{ request.path }}">
                {% trans 'Login or register to review or add this item to your collection.' %}
              </a></span>
            </p>
          </section>
        {% endif %}
        {% block sidebar %}{% endblock %}
        {% if collection_list %}
          <section>
            <h5>{% trans 'Related Collections' %}</h5>
            <div>
              {% for c in collection_list %}
                <p>
                  <a href="{{ c.url }}">{{ c.title }}</a>
                  {% if c.visibility > 0 %}<i class="fa-solid fa-lock"></i>{% endif %}
                </p>
              {% endfor %}
            </div>
          </section>
        {% endif %}
      </div>
      <div id="item-metadata" class="left">
        <section>
          {% block details %}
            <div>{% trans 'Unsupported item type.' %}</div>
            <div>UUID: {{ item.uuid }}</div>
            <div>Class: {{ item.class_name }}</div>
            <div>Category: {{ item.category }}</div>
          {% endblock %}
          {% if request.user.is_authenticated %}
            <div class="item-edit">
              <span class="action inline">
                <a href="{% url 'catalog:edit' item.url_path item.uuid %}"
                   title="{% trans 'Edit this item' %}"><i class="fa-regular fa-pen-to-square"></i></a>
              </span>
              {% if item.last_editor and item.last_editor.preference.show_last_edit %}
                <span>
                  {% trans 'Last edited' %}:
                  <a href="{{ item.last_editor.url }}">{{ item.last_editor.display_name | default:"" }}</a>
                </span>
              {% endif %}
            </div>
          {% endif %}
          <div class="rating solo-hidden {% if not item.rating %}unavailable{% endif %}">
            <div class="display">
              <div>
                <hgroup>
                  <h3>
                    {{ item.rating | floatformat:1 }} <small>/ 10</small>
                  </h3>
                  <p>{{ item.rating_count }} {% trans 'ratings' %}</p>
                </hgroup>
              </div>
              <div data-placement="top">
                <ul class="chart">
                  <li data-tooltip="{{ item.rating_dist.0 }}%" data-placement="left">
                    <span style="height:{{ item.rating_dist.0 }}%"></span>
                  </li>
                  <li data-tooltip="{{ item.rating_dist.1 }}%" data-placement="left">
                    <span style="height:{{ item.rating_dist.1 }}%"></span>
                  </li>
                  <li data-tooltip="{{ item.rating_dist.2 }}%" data-placement="left">
                    <span style="height:{{ item.rating_dist.2 }}%"></span>
                  </li>
                  <li data-tooltip="{{ item.rating_dist.3 }}%" data-placement="left">
                    <span style="height:{{ item.rating_dist.3 }}%"></span>
                  </li>
                  <li data-tooltip="{{ item.rating_dist.4 }}%" data-placement="left">
                    <span style="height:{{ item.rating_dist.4 }}%"></span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="undisplay">
              <span>{% trans 'No enough ratings' %}</span>
            </div>
          </div>
          <div class="tag-list solo-hidden">
            {% for tag in item.tags %}
              <span>
                <a href="{% url 'catalog:search' %}?tag={{ tag }}">{{ tag }}</a>
              </span>
            {% endfor %}
          </div>
        </section>
        {% block left_sidebar %}{% endblock %}
      </div>
      <div id="item-title-more" class="middle">
        <hgroup>
          {% if item.display_subtitle %}<p>{{ item.display_subtitle }}</p>{% endif %}
          {% if item.orig_title and item.orig_title != item.display_title %}
            <p>
              {{ item.orig_title }}
              <small>
                {% if item.season_number %}Season {{ item.season_number }}{% endif %}
              </small>
            </p>
          {% endif %}
          {% if item.parent_item %}
            {% trans 'part of' %} {{ item.parent_item.type.label }}: <span><a href="{{ item.parent_item.url }}"></span>{{ item.parent_item.display_title }}</a>
          {% endif %}
          {% if item.author or item.translator %}
            <p>
              <i>
                {% include '_people.html' with people=item.author _role='author' max=2 %}
              </i>
              &nbsp;&nbsp;
              <i>
                {% include '_people.html' with people=item.translator role='translator' max=2 %}
              </i>
            </p>
          {% endif %}
        </hgroup>
      </div>
      <style type="text/css"></style>
      <div id="item-detail" class="middle">
        <section id="item-content">
          <h5>{% trans 'overview' %}</h5>
          <div class="tldr-box">
            <input type="checkbox" id="content-expanded">
            {% if item.display_description %}
              <p>{{ item.display_description | linebreaksbr }}</p>
            {% elif item.parent_item.display_description %}
              <p>{{ item.parent_item.display_description | linebreaksbr }}</p>
            {% else %}
              <p class="empty">{% trans 'nothing so far.' %}</p>
            {% endif %}
            <label for="content-expanded" role="button" class="outline secondary">{% trans "show more" %}</label>
          </div>
          <script type="text/javascript">
          const ps = document.querySelectorAll('.tldr-box p');
          const observer = new ResizeObserver(entries => {
            for (let entry of entries) {
              entry.target.classList[entry.target.scrollHeight > entry.contentRect.height ? 'add' : 'remove']('truncated');
            }
          });

          ps.forEach(p => {
            observer.observe(p);
          });
          </script>
          {% block content %}
          {% endblock %}
        </section>
        <section class="solo-hidden">
          <div>
            <h5>
              {% trans 'comments' %}
              <small>
                {% if request.user.is_authenticated %}
                  | <a href="{% url 'catalog:mark_list' item.url_path item.uuid %}">{% trans 'marks' %}</a>
                  | <a href="{% url 'catalog:mark_list' item.url_path item.uuid 'following' %}">{% trans 'marks from who you follow' %}</a>
                {% endif %}
              </small>
            </h5>
            <div id="comments">
              <div hx-swap="outerHTML"
                   hx-get="{% if request.GET.focus and item.class_name == "tvseason" %}{% url 'catalog:comments_by_episode' item.url_path item.uuid %}?episode_uuid={{ request.GET.focus }}{% else %}{% url 'catalog:comments' item.url_path item.uuid %}{% endif %}"
                   hx-trigger="intersect once">
                <i class="fa-solid fa-compact-disc fa-spin loading"></i>
              </div>
            </div>
          </div>
        </section>
        <section class="solo-hidden">
          <h5>{% trans 'reviews' %}</h5>
          <div>
            <div hx-get="{% url 'catalog:reviews' item.url_path item.uuid %}"
                 hx-trigger="intersect once"
                 hx-swap="outerHTML">
              <i class="fa-solid fa-compact-disc fa-spin loading"></i>
            </div>
          </div>
        </section>
      </div>
      <div id="item-more" class="middle">
        <!-- test more content -->
      </div>
      <div style="clear: both;display: table;"></div>
    </main>
    {% include "_footer.html" %}
  </body>
</html>
