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

{% block headermeta %}
<link rel="canonical" href="{{ FRONTEND_HOST }}{{ home_canonical_path }}">
{% if page_obj.has_previous %}<link rel="prev" href="{{ FRONTEND_HOST }}/?{% if active_category %}category={{ active_category }}&amp;{% endif %}sort={{ active_sort }}&amp;page={{ page_obj.previous_page_number }}">{% endif %}
{% if page_obj.has_next %}<link rel="next" href="{{ FRONTEND_HOST }}/?{% if active_category %}category={{ active_category }}&amp;{% endif %}sort={{ active_sort }}&amp;page={{ page_obj.next_page_number }}">{% endif %}
<meta name="description" content="造影岛是AI电影、AI短剧与AI影像创作者社区，通过官方播放器发现已审核作品、原作者、连载与真实制作资料。">
<meta property="og:title" content="造影岛｜AI电影、AI短剧与AI影像创作者社区">
<meta property="og:url" content="{{ FRONTEND_HOST }}">
<meta property="og:type" content="website">
<meta property="og:description" content="发现已审核的AI电影与短剧，保留原作者和原片入口。">
<meta name="twitter:card" content="summary_large_image">
<script type="application/ld+json">
{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"{{ FRONTEND_HOST }}/#website","name":"造影岛","alternateName":"Zaoyingdao","description":"AI电影、AI短剧与AI影像创作者社区","url":"{{ FRONTEND_HOST }}","publisher":{"@id":"{{ FRONTEND_HOST }}/#organization"},"potentialAction":{"@type":"SearchAction","target":"{{ FRONTEND_HOST }}/archive/?q={search_query_string}","query-input":"required name=search_query_string"}},{"@type":"Organization","@id":"{{ FRONTEND_HOST }}/#organization","name":"造影岛","alternateName":"Zaoyingdao","url":"{{ FRONTEND_HOST }}"}]}
</script>
{% endblock headermeta %}

{% block headtitle %}造影岛｜AI电影、AI短剧与AI影像创作者社区{% endblock headtitle %}

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

{% block content %}
<main class="zaoying-catalog" aria-label="造影岛影片首页">
  <h1 class="sr-only">造影岛 AI电影与短剧</h1>

  <nav class="zaoying-catalog__genres" aria-label="影片分类">
    <a class="{% if not active_category %}is-active{% endif %}" href="/?sort={{ active_sort }}">综合</a>
    {% for value, label in categories %}
    <a class="{% if active_category == value %}is-active{% endif %}" href="/?category={{ value }}&amp;sort={{ active_sort }}">{{ label }}</a>
    {% endfor %}
    <a class="{% if active_category == 'native' %}is-active{% endif %}" href="/?category=native&amp;sort={{ active_sort }}">社区投稿</a>
  </nav>

  <div class="zaoying-catalog__sort" aria-label="影片排序">
    <a class="{% if active_sort == 'latest' %}is-active{% endif %}" href="/?{% if active_category %}category={{ active_category }}&amp;{% endif %}sort=latest">推荐</a>
    <a class="{% if active_sort == 'popular' %}is-active{% endif %}" href="/?{% if active_category %}category={{ active_category }}&amp;{% endif %}sort=popular">最多播放</a>
    <a class="zaoying-catalog__search" href="/archive/" aria-label="搜索影片"><span class="material-icons" aria-hidden="true">search</span>搜索</a>
  </div>

  {% if home_items %}
  <section id="film-grid" class="zaoying-film-grid" aria-label="影片列表" tabindex="-1">
    {% for item in home_items %}
    <article class="zaoying-film-card">
      <a class="zaoying-film-card__cover" href="{{ item.url }}" aria-label="观看《{{ item.title }}》">
        {% if item.cover_url %}<img src="{{ item.cover_url }}" alt="" loading="{% if forloop.counter <= 10 %}eager{% else %}lazy{% endif %}" referrerpolicy="no-referrer">{% else %}<span>AI</span>{% endif %}
      </a>
      <h2><a href="{{ item.url }}">{{ item.title }}</a></h2>
    </article>
    {% endfor %}
  </section>
  {% if page_obj.paginator.num_pages > 1 %}
  <nav class="zaoying-pagination" aria-label="影片分页">
    {% if page_obj.has_previous %}
    <a class="zaoying-pagination__step" rel="prev" href="/?{% if active_category %}category={{ active_category }}&amp;{% endif %}sort={{ active_sort }}&amp;page={{ page_obj.previous_page_number }}#film-grid">上一页</a>
    {% endif %}
    <span class="zaoying-pagination__pages">
      {% for page_number in page_obj.paginator.page_range %}
        {% if page_number == page_obj.number %}
        <span class="is-current" aria-current="page">{{ page_number }}</span>
        {% else %}
        <a href="/?{% if active_category %}category={{ active_category }}&amp;{% endif %}sort={{ active_sort }}&amp;page={{ page_number }}#film-grid" aria-label="第 {{ page_number }} 页">{{ page_number }}</a>
        {% endif %}
      {% endfor %}
    </span>
    {% if page_obj.has_next %}
    <a class="zaoying-pagination__step" rel="next" href="/?{% if active_category %}category={{ active_category }}&amp;{% endif %}sort={{ active_sort }}&amp;page={{ page_obj.next_page_number }}#film-grid">下一页</a>
    {% endif %}
  </nav>
  {% endif %}
  {% else %}
  <section class="zaoying-catalog__empty">
    <strong>这一栏还没有影片</strong>
    <a href="/archive/">浏览全部作品</a>
  </section>
  {% endif %}
</main>
{% endblock %}