{% extends "base-nosidebar.html" %}
{% load static digua_watchlist %}

{% block headtitle %}{{ media_item.seo_title }}{% endblock headtitle %}
{% block headermeta %}
<meta name="description" content="{{ media_item.seo_description }}">
<meta name="keywords" content="{{ media_item.seo_keywords|join:', ' }}">
<link rel="canonical" href="{{ canonical_url }}">
<meta property="og:title" content="{{ media_item.seo_title }}">
<meta property="og:type" content="video.other">
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:description" content="{{ media_item.seo_description }}">
<meta property="og:video" content="{{ media_item.embed_url }}">
<meta property="og:video:secure_url" content="{{ media_item.embed_url }}">
<meta property="og:video:type" content="text/html">
{% if media_item.thumbnail_url %}<meta property="og:image" content="{{ media_item.thumbnail_url }}">{% endif %}
{% if media_item.content_rating == 'explicit' %}<meta name="rating" content="adult">{% endif %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ media_item.seo_title }}">
<meta name="twitter:description" content="{{ media_item.seo_description }}">
{% if media_item.thumbnail_url %}<meta name="twitter:image" content="{{ media_item.thumbnail_url }}">{% endif %}
<script type="application/ld+json">{{ json_ld|safe }}</script>
{% endblock headermeta %}
{% block topimports %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'archive_index/archive.css' %}?v=6">
{% endblock topimports %}

{% block beforecontent %}
{% include "components/header.html" %}
<div id="app-sidebar" hidden aria-hidden="true"></div>
{% endblock beforecontent %}

{% block innercontent %}
<main class="archive-shell archive-detail archive-detail--community">
  <nav class="archive-breadcrumb" aria-label="面包屑"><a href="/">全部影片</a><span>/</span><span>{{ media_item.title }}</span></nav>

  <section class="archive-community-watch">
    <div class="archive-player">
      <iframe src="{{ media_item.embed_url }}" title="播放《{{ media_item.title }}》"
        allow="autoplay; encrypted-media; picture-in-picture"
        sandbox="allow-scripts allow-same-origin allow-presentation"
        referrerpolicy="no-referrer"
        loading="eager" allowfullscreen></iframe>
    </div>
    {% if media_item.platform == 'youtube' %}
    <p class="archive-quality-tip" role="note">
      <span class="material-icons" aria-hidden="true">high_quality</span>
      <span><strong>画面模糊？</strong>点击播放器右下角“齿轮 → 画质 → 1080p”。可用档位以播放器当次显示为准，无需离开本站。</span>
    </p>
    {% endif %}

    <div class="archive-community-title">
      <div>
        <span class="archive-eyebrow"><a href="{% url 'archive_index:category' media_item.category %}">{{ media_item.get_category_display }}</a>{% if media_item.platform != 'bilibili' %} · {{ media_item.get_platform_display }}{% endif %}</span>
        <h1>{{ media_item.title }}</h1>
      </div>
      <div class="archive-community-actions">
        {% external_watchlisted user media_item as saved_for_later %}
        {% if user.is_authenticated %}
        <form action="{% url 'digua_portal:toggle_archive_watchlist' media_item.slug %}" method="post" class="archive-like-form">
          {% csrf_token %}<input type="hidden" name="next" value="{{ request.path }}">
          <button class="archive-like{% if saved_for_later %} is-liked{% endif %}" type="submit" aria-pressed="{% if saved_for_later %}true{% else %}false{% endif %}">
            <span class="material-icons" aria-hidden="true">schedule</span><b>{% if saved_for_later %}移出稍后看{% else %}加入稍后看{% endif %}</b>
          </button>
        </form>
        {% else %}
        <a class="archive-comment-jump" href="{% url 'account_login' %}?next={{ request.path|urlencode }}"><span class="material-icons" aria-hidden="true">schedule</span><b>登录后稍后看</b></a>
        {% endif %}
        <a class="archive-comment-jump" href="#discussion"><span class="material-icons" aria-hidden="true">chat_bubble_outline</span><b>评论</b>{% if comments %}<em>{{ comments|length }}</em>{% endif %}</a>
        <form action="{% url 'archive_index:toggle_like' media_item.slug %}" method="post" class="archive-like-form" data-like-form>
          {% csrf_token %}
          <button class="archive-like{% if liked %} is-liked{% endif %}" type="submit" aria-pressed="{% if liked %}true{% else %}false{% endif %}">
            <span class="material-icons" aria-hidden="true">bookmark_border</span><b>{% if liked %}已收藏{% else %}收藏{% endif %}</b><em data-like-count{% if not media_item.like_count %} hidden{% endif %}>{{ media_item.like_count }}</em>
          </button>
        </form>
      </div>
    </div>

    <div class="archive-creator-strip">
      <div class="archive-creator-strip__identity">
        <span class="archive-platform archive-platform--{{ media_item.platform }}">{{ media_item.get_platform_display }}</span>
        <div><small>原作者</small><strong>{{ media_item.creator_name }}</strong></div>
      </div>
      {% if media_item.duration %}<p>{{ media_item.duration }}</p>{% endif %}
      {% if media_item.platform != 'bilibili' %}<div class="archive-creator-strip__links">
        <a href="{{ media_item.creator_url }}" target="_blank" rel="noopener noreferrer nofollow">关注作者</a>
        <a href="{{ media_item.source_url }}" target="_blank" rel="noopener noreferrer nofollow">查看原片 ↗</a>
      </div>{% endif %}
    </div>

    {% if media_item.summary %}<p class="archive-summary archive-community-summary">{{ media_item.summary|linebreaksbr }}</p>{% endif %}
  </section>

  <section class="archive-discussion archive-discussion--priority" id="discussion" aria-labelledby="discussion-heading">
    <header><span class="archive-eyebrow">COMMUNITY</span><h2 id="discussion-heading">评论</h2></header>
    {% if user.is_authenticated %}
    <form class="archive-comment-form" action="{% url 'archive_index:add_comment' media_item.slug %}" method="post">
      {% csrf_token %}
      {{ comment_form.body }}
      <div><small>友善交流，评论审核通过后公开。</small><button type="submit">发表评论</button></div>
    </form>
    {% else %}
    <p class="archive-login-note"><a href="{% url 'account_login' %}?next={{ request.path|urlencode }}%23discussion">登录</a>后发表评论。</p>
    {% endif %}
    <div class="archive-comments">
      {% for comment in comments %}
      <article><div><strong>{{ comment.user.name|default:comment.user.username }}</strong><time datetime="{{ comment.created_at|date:'c' }}">{{ comment.created_at|date:"Y-m-d H:i" }}</time></div><p>{{ comment.body|linebreaksbr }}</p></article>
      {% empty %}<p class="archive-no-comments">还没有评论，来说说你的观后感。</p>{% endfor %}
    </div>
  </section>

  {% if media_item.image_model or media_item.video_model or media_item.audio_model or media_item.prompt_notes or media_item.production_notes %}
  <section class="archive-workflow archive-workflow--compact" aria-labelledby="workflow-heading">
    <header><span class="archive-eyebrow">创作幕后</span><h2 id="workflow-heading">制作资料</h2></header>
    {% if media_item.model_slugs %}<div class="archive-workflow-tools" aria-label="作品使用的 AI 工具">{% for slug, name in media_item.model_slugs %}<a href="{% url 'archive_index:model' slug %}">{{ name }}</a>{% endfor %}</div>{% endif %}
    {% if media_item.prompt_notes or media_item.production_notes %}<div class="archive-notes-grid">
      {% if media_item.prompt_notes %}<article><h3>提示词思路</h3><div>{{ media_item.prompt_notes|linebreaksbr }}</div></article>{% endif %}
      {% if media_item.production_notes %}<article><h3>制作解析</h3><div>{{ media_item.production_notes|linebreaksbr }}</div></article>{% endif %}
    </div>{% endif %}
  </section>
  {% endif %}

  {% include "archive_index/related_tags.html" %}
</main>
{% endblock innercontent %}

{% block bottomimports %}
{{ block.super }}
<script src="{% static 'archive_index/archive.js' %}?v=3" defer></script>
{% endblock bottomimports %}