{{define "theater_media_index"}}
<div class="theater-page">
  <!-- 剧场 Hero：放映机 + 霓虹院线招牌 -->
  <header class="theater-hero">
    <div class="theater-hero-bg" aria-hidden="true">
      <span class="theater-curtain curtain-l" aria-hidden="true"></span>
      <span class="theater-curtain curtain-r" aria-hidden="true"></span>
      <span class="theater-projector" aria-hidden="true"><i class="tp-beam"></i><i class="tp-lens"></i><i class="tp-reel"></i></span>
      <span class="theater-dust" aria-hidden="true"></span>
    </div>
    <p class="theater-eyebrow">{{ico "film"}} ZX THEATER · 剧场院线</p>
    <h1 class="theater-title">灯光暗下，<span class="theater-neon">放映开始</span></h1>
    <p class="theater-sub">音轨戴耳机边走边听，视轨坐稳了点开就看，两条轨装进同一条。</p>
    <div class="theater-board">
      <span class="theater-board-tag">今日排片</span>
      {{range .Data.Tabs}}
      <a class="theater-board-btn {{if eq $.Data.Kind .Key}}on{{end}}" href="/media{{if .Key}}?kind={{.Key}}{{end}}">{{.Name}}<em>{{.Count}}</em></a>
      {{end}}
    </div>
  </header>

  <!-- 院线排片 -->
  <div class="theater-list">
    {{range $i, $it := .Data.Items}}
    <article class="theater-card {{if eq $i 0}}is-lead{{end}}" data-kind="{{$it.Kind}}">
      <a class="theater-cover" href="/media/{{$it.ID}}" aria-label="{{$it.Title}}">
        {{if $it.Cover}}<img src="{{$it.Cover}}" alt="{{$it.Title}}" loading="lazy"><span class="theater-play" aria-hidden="true">{{ico "play"}}</span>{{else}}<span class="theater-cover-char" aria-hidden="true">{{initial $it.Title}}</span>{{end}}
        <span class="theater-kind theater-kind-{{$it.Kind}}">{{$it.KindLabel}}</span>
      </a>
      <div class="theater-body">
        {{if eq $i 0}}<span class="theater-lead-tag">本周主打</span>{{end}}
        <h2 class="theater-title-sm"><a href="/media/{{$it.ID}}">{{$it.Title}}</a></h2>
        <p class="theater-summary">{{truncate $it.Summary 110}}</p>
        {{if $it.TagList}}
        <div class="theater-tags">
          {{range $it.TagList}}<span class="theater-tag">{{.}}</span>{{end}}
        </div>
        {{end}}
        <div class="theater-foot">
          <span class="theater-author">发布 · {{$it.Author}}</span>
          <span class="theater-views">{{$it.Views}} 次播放</span>
          <span class="theater-time">{{date $it.CreatedAt}}</span>
          <a class="theater-more" href="/media/{{$it.ID}}">入场观影 →</a>
        </div>
      </div>
    </article>
    {{else}}
    <div class="mod-empty">
      <h3>这一场还空着</h3>
      <p>换个类型看看，或者等第一条音视上架。</p>
    </div>
    {{end}}
  </div>

  {{template "pagination" .}}
  {{template "module_meta" .}}

  <div class="media-pro">
    <a href="/pro">了解 Pro 授权</a>
  </div>
</div>
{{end}}