{% extends "_base.html" %}
{% block extra_head %}
  <link rel="stylesheet" href="{{ root_path }}assets/shorts_video.css">
{% endblock %}
{% block content %}
<section class="shorts-page">
  <div class="shorts-head container">
    <div class="page-head">
      <h1 class="page-title">{{ heading }}</h1>
      <p class="muted">スクロールで次の動画へ（サンプル動画のみ / ミュート自動再生）</p>

      {% if sort_tabs %}
        <div class="sort-tabs" role="navigation" aria-label="並び替え">
          {% for t in sort_tabs %}
            <a class="sort-tab{% if sort_id == t.id %} is-active{% endif %}" href="{{ root_path }}{{ t.href }}">{{ t.label }}</a>
          {% endfor %}
        </div>
      {% endif %}
    </div>
  </div>

  <div class="shorts-feed" id="shortsFeed" aria-label="ショート動画フィード">
    {% for w in works %}
      {% if w.sample_movie %}
        {% set buy_url = w.official_url or (root_path ~ "works/" ~ w.id ~ "/") %}
        <article
          class="short-item"
          data-id="{{ w.id }}"
          data-tags='{{ (w.tags or []) | tojson | e }}'
          data-actresses='{{ (w.actresses or []) | tojson | e }}'
          data-maker='{{ (w.maker or "") | tojson | e }}'
          data-series='{{ (w.series or "") | tojson | e }}'
          data-label='{{ (w.label or "") | tojson | e }}'
          data-release='{{ (w.release_date or "") | tojson | e }}'
        >
          <div class="short-media">
            <iframe
              class="short-iframe"
              src="about:blank"
              data-src="{{ w.sample_movie | e }}"
              loading="lazy"
              allow="autoplay; fullscreen; picture-in-picture"
              allowfullscreen
              referrerpolicy="no-referrer-when-downgrade"
              title="{{ w.title | e }}"
            ></iframe>
            <div class="short-tap-hint">タップで再生/停止</div>
          </div>

          <div class="short-overlay">
            <div class="short-title">{{ w.title }}</div>
            <div class="short-actions">
              <a class="btn btn-primary btn-buy" href="{{ buy_url }}" target="_blank" rel="noopener">購入</a>
              <a class="btn btn-ghost" href="{{ root_path }}works/{{ w.id }}/">詳細</a>
              {# お気に入り/拡大は JS で追加 #}
            </div>
          </div>
        </article>
      {% endif %}
    {% endfor %}
  </div>
</section>
{% endblock %}
{% block extra_scripts %}
  <script src="{{ root_path }}assets/shorts_video.js" defer></script>
{% endblock %}