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

{% block headtitle %}{{ page_heading|default:"站外作品馆" }} · {{ PORTAL_NAME }}{% endblock headtitle %}
{% block headermeta %}
<meta name="description" content="{{ page_description }}">
<meta property="og:title" content="{{ page_heading|default:'站外作品馆' }} · {{ PORTAL_NAME }}">
<meta property="og:description" content="{{ page_description }}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ canonical_url|default:FRONTEND_HOST|escape }}">
<link rel="canonical" href="{{ canonical_url|default:FRONTEND_HOST|escape }}">
{% endblock headermeta %}
{% block topimports %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'archive_index/archive.css' %}?v=5">
{% 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">
  <header class="archive-intro">
    <div>
      <span class="archive-eyebrow">AI CINEMA ARCHIVE</span>
      <h1>{{ page_heading|default:"站外作品馆" }}</h1>
      <p>{{ page_description }}</p>
    </div>
    <a class="archive-submit-link" href="{% url 'digua_portal:submit_guide' %}">我要投稿</a>
  </header>

  <form class="archive-filter" method="get" role="search">
    <div class="archive-categories" aria-label="作品分类">
      <a class="{% if not active_category %}is-active{% endif %}" href="{% url 'archive_index:list' %}">全部</a>
      {% for value, label in categories %}
      <a class="{% if active_category == value %}is-active{% endif %}" href="{% url 'archive_index:category' value %}">{{ label }}</a>
      {% endfor %}
    </div>
    <div class="archive-search">
      <label class="sr-only" for="archive-query">搜索片名、作者或模型</label>
      <input id="archive-query" name="q" type="search" value="{{ search }}" maxlength="100" placeholder="搜片名、作者或模型">
      {% if active_category %}<input name="category" type="hidden" value="{{ active_category }}">{% endif %}
      <button type="submit">搜索</button>
    </div>
  </form>

  {% if page_obj.object_list %}
  <section class="archive-grid" aria-label="站外作品列表">
    {% for item in page_obj %}
    <article class="archive-card">
      <a class="archive-cover" href="{{ item.get_absolute_url }}" aria-label="观看《{{ item.title }}》">
        {% if item.cover_url %}<img src="{{ item.cover_url }}" alt="《{{ item.title }}》封面" loading="lazy" referrerpolicy="no-referrer">{% else %}<span>AI<br>CINEMA</span>{% endif %}
      </a>
      <div class="archive-card-body">
        <div class="archive-card-meta"><span>{{ item.get_category_display }}</span><span>♥ {{ item.like_count }}</span></div>
        <h2><a href="{{ item.get_absolute_url }}">{{ item.title }}</a></h2>
        <p class="archive-creator">
          <span>原作者 · {{ item.creator_name }}</span>
          {% if item.platform == 'bilibili' %}
          <span class="archive-platform archive-platform--bilibili" aria-label="来源：Bilibili">Bilibili</span>
          {% else %}
          <a class="archive-platform archive-platform--{{ item.platform }}" href="{{ item.source_url }}" target="_blank" rel="noopener noreferrer nofollow" aria-label="在{{ item.get_platform_display }}查看原片">{{ item.get_platform_display }}</a>
          {% endif %}
        </p>
        {% if item.image_model or item.video_model %}<div class="archive-models">
          {% if item.image_model %}<span>{{ item.image_model }}</span>{% endif %}
          {% if item.video_model %}<span>{{ item.video_model }}</span>{% endif %}
        </div>{% endif %}
      </div>
    </article>
    {% endfor %}
  </section>
  {% else %}
  <section class="archive-empty">
    <strong>还没有符合条件的已审核作品</strong>
    <p>管理员收录并审核通过后，作品才会在这里公开。</p>
  </section>
  {% endif %}

  {% if page_obj.paginator.num_pages > 1 %}
  <nav class="archive-pagination" aria-label="分页">
    {% if page_obj.has_previous %}<a href="?page={{ page_obj.previous_page_number }}{% if active_category %}&amp;category={{ active_category }}{% endif %}{% if search %}&amp;q={{ search|urlencode }}{% endif %}">上一页</a>{% endif %}
    <span>第 {{ page_obj.number }} / {{ page_obj.paginator.num_pages }} 页</span>
    {% if page_obj.has_next %}<a href="?page={{ page_obj.next_page_number }}{% if active_category %}&amp;category={{ active_category }}{% endif %}{% if search %}&amp;q={{ search|urlencode }}{% endif %}">下一页</a>{% endif %}
  </nav>
  {% endif %}
</main>
{% endblock innercontent %}