{{define "media_index"}}
  <link rel="stylesheet" href="/static/css/media.css?v={{assetVer}}">
<div class="thm-media">
  <!-- ===== 台头 hero：晴空音视台，一条随时开播的播出带 ===== -->
  <header class="media-hero">
    <div class="media-hero-bg" aria-hidden="true">
      <span class="media-hero-wave"></span>
      <span class="media-hero-wave w2"></span>
      <span class="media-hero-wave w3"></span>
      <span class="media-hero-wave w4"></span>
      <span class="media-hero-wave w5"></span>
    </div>
    <div class="media-broadcast" aria-hidden="true">
      <span class="media-onair"><i></i>ON AIR</span>
      <span class="media-dial"></span>
      <span class="media-station">
        <span class="sig-cn">晴空音视台</span>
        <span class="sig-en">ZS · AV CH</span>
      </span>
    </div>
    <span class="media-kicker">{{ico "play"}} 音视 · 一条节目，听看皆可</span>
    <h1 class="media-hero-title">耳朵与眼睛，<br>都别闲着</h1>
    <p class="media-hero-sub">
      音频适合<strong>边走边听</strong>，视频适合<strong>坐下来看</strong>；而混合节目把两种轨道装进同一条里。
      想听就点播放，想看就切画面——不必先想清楚自己是哪种人。
    </p>
    <div class="media-hero-feet">
      <span>{{ico "play"}} 音频轨 · 即点即听</span>
      <span>{{ico "film"}} 视频轨 · 即点即看</span>
      <span>{{ico "check"}} 共 {{.Data.Total}} 条节目</span>
    </div>
  </header>

  <!-- ===== 频道切换：分段控件（全部 / 音频 / 视频 / 混合） ===== -->
  <div class="media-seg-wrap">
    <div class="media-seg">
      {{range .Data.Tabs}}
      <a href="/media{{if .Key}}?kind={{.Key}}{{end}}" class="media-seg-btn {{if eq $.Data.Kind .Key}}on{{end}}">
        <span class="media-seg-dot" aria-hidden="true"></span>{{.Name}}<em>{{.Count}}</em>
      </a>
      {{end}}
    </div>
    <span class="media-seg-hint">频道</span>
  </div>

  <!-- ===== 节目单：首条作「头牌」横排，其余卡片流 ===== -->
  <div class="media-list">
    {{range $i, $it := .Data.Items}}
    <article class="media-card {{if eq $i 0}}is-lead{{end}}" data-kind="{{$it.Kind}}">
      <a class="media-cover" href="/media/{{$it.ID}}" aria-label="{{$it.Title}}">
        {{if $it.Cover}}<img src="{{$it.Cover}}" alt="{{$it.Title}}" loading="lazy"><span class="media-play" aria-hidden="true">{{ico "play"}}</span>{{else}}<span class="media-cover-ph">{{ico "play"}}</span>{{end}}
        <span class="media-kind media-kind-{{$it.Kind}}">{{$it.KindLabel}}</span>
      </a>
      <div class="media-body">
        {{if eq $i 0}}<span class="media-lead-tag">本期头牌</span>{{end}}
        <h2 class="media-title"><a href="/media/{{$it.ID}}">{{$it.Title}}</a></h2>
        <p class="media-summary">{{truncate $it.Summary 110}}</p>
        {{if $it.TagList}}
        <div class="media-tags">
          {{range $it.TagList}}<span class="media-tag">{{.}}</span>{{end}}
        </div>
        {{end}}
        <div class="media-foot">
          <span class="media-author">发布 · {{$it.Author}}</span>
          <span class="media-views">{{$it.Views}} 次播放</span>
          <span class="media-time">{{date $it.CreatedAt}}</span>
          <a class="media-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" .}}

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