{% load static %}
{% load i18n %}
{% load mastodon %}
{% load thumb %}
{% load user_actions %}
{% load duration %}
<!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 name="CCBot" content="nofollow">
    <meta property="og:title"
          content="{{ site_name }} {% trans 'Review' %} - {{ review.title }} ({{ review.item.display_title }})">
    <meta property="og:type" content="article">
    <meta property="og:article:author"
          content="{{ review.owner.display_name }}">
    <meta property="og:url" content="{{ request.build_absolute_uri }}">
    <meta property="og:image" content="{{ review.item.cover|thumb:'normal' }}">
    <meta property="og:site_name" content="{{ site_name }}">
    <meta name="fediverse:creator" content="@{{ review.owner.full_handle }}">
    {% if not identity.anonymous_viewable %}<meta name="robots" content="noindex">{% endif %}
    <title>{{ site_name }} {% trans 'Review' %} - {{ review.title }}</title>
    {% include "common_libs.html" %}
  </head>
  <body>
    {% include "_header.html" %}
    <main>
      <div>
        <article>
          <header>
            <hgroup>
              <h3>
                <div class="action">
                  {% if review.latest_post %}
                    {% include "action_like_post.html" with post=review.latest_post %}
                    {% include "action_boost_post.html" with post=review.latest_post %}
                  {% endif %}
                </div>
                {{ review.title }}
              </h3>
            </hgroup>
            <div class="owner-info">
              <div class="owner">
                <span class="avatar">
                  <img src="{{ review.owner.avatar }}" alt="{{ review.owner.display_name }}">
                </span>
              </div>
              <div class="info">
                <a href="{{ review.owner.url }}">{{ review.owner.display_name }}</a>
                <span class="handler">@{{ review.owner.handle }}</span>
                <br>
                <a href="{{ review.item.url }}">{{ review.item.display_title }}</a> - {% trans 'Review' %}
                {% if review.rating_grade %}{{ review.rating_grade | rating_star }}{% endif %}
              </div>
            </div>
          </header>
          <div class="markdown-content">
            {% if request.user.is_authenticated or review.owner.anonymous_viewable %}
              {{ review.html_content | safe }}
            {% else %}
              <p class="empty">
                <span>{% trans "The author has set it to be viewable only by logged-in users." %}</span>
              </p>
            {% endif %}
          </div>
          <footer>
            {% if request.user.is_authenticated %}
              <span class="action">
                <span>
                  <a hx-get="{% url 'journal:piece_replies' review.uuid %}"
                     hx-swap="outerHTML"
                     hx-trigger="click once"
                     hx-target="#replies_{{ review.latest_post.pk }}">
                    {{ review.latest_post.stats.replies | default:'' }}
                    {% trans "Reply" %}
                  </a>
                </span>
                {% if request.user.identity == review.owner %}
                  <span>
                    <a href="{% url 'journal:review_edit' review.item.uuid review.uuid %}">{% trans 'Edit' %}</a>
                  </span>
                  <span>
                    <a href="{% url 'journal:review_delete' review.uuid %}">{% trans 'Delete' %}</a>
                  </span>
                {% endif %}
              </span>
            {% endif %}
            <span class="action inline">
              {% if review.latest_post %}
                {% include "action_open_post.html" with post=review.latest_post %}
              {% endif %}
              <span><a>{{ review.created_time|date }}</a></span>
            </span>
          </footer>
        </article>
        <style>
          main>div>.replies {
            padding-top: 2em
          }
        </style>
        <section id="replies_{{ review.latest_post.pk }}">
        </section>
      </div>
      <aside>
        {% include "_sidebar_item.html" with item=review.item %}
      </aside>
    </main>
    <script>
    $(".spoiler").on('click', function(){
      $(this).toggleClass('revealed');
    })
    </script>
    {% include "_footer.html" %}
  </body>
</html>
