{{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">
      <svg class="media-scene" viewBox="0 0 1200 180" preserveAspectRatio="none">
        <g class="media-scene-wave">
          <rect x="612" y="126" width="8" height="52" rx="4"/>
          <rect x="636" y="90" width="8" height="88" rx="4"/>
          <rect x="660" y="114" width="8" height="64" rx="4"/>
          <rect x="684" y="58" width="8" height="120" rx="4"/>
          <rect x="708" y="98" width="8" height="80" rx="4"/>
          <rect x="732" y="38" width="8" height="140" rx="4"/>
          <rect x="756" y="78" width="8" height="100" rx="4"/>
          <rect x="780" y="112" width="8" height="66" rx="4"/>
          <rect x="804" y="68" width="8" height="110" rx="4"/>
          <rect x="828" y="104" width="8" height="74" rx="4"/>
          <rect x="852" y="82" width="8" height="96" rx="4"/>
          <rect x="876" y="120" width="8" height="58" rx="4"/>
        </g>
        <g class="media-scene-film">
          <rect x="920" y="126" width="240" height="44" rx="8"/>
        </g>
        <g class="media-scene-perf">
          <rect x="934" y="132" width="16" height="8" rx="2"/>
          <rect x="966" y="132" width="16" height="8" rx="2"/>
          <rect x="998" y="132" width="16" height="8" rx="2"/>
          <rect x="1030" y="132" width="16" height="8" rx="2"/>
          <rect x="1062" y="132" width="16" height="8" rx="2"/>
          <rect x="1094" y="132" width="16" height="8" rx="2"/>
          <rect x="1126" y="132" width="16" height="8" rx="2"/>
          <rect x="934" y="156" width="16" height="8" rx="2"/>
          <rect x="966" y="156" width="16" height="8" rx="2"/>
          <rect x="998" y="156" width="16" height="8" rx="2"/>
          <rect x="1030" y="156" width="16" height="8" rx="2"/>
          <rect x="1062" y="156" width="16" height="8" rx="2"/>
          <rect x="1094" y="156" width="16" height="8" rx="2"/>
          <rect x="1126" y="156" width="16" height="8" rx="2"/>
        </g>
        <g class="media-scene-play">
          <path d="M556,76 L620,110 L556,144 Z"/>
        </g>
      </svg>
    </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>
    <h1 class="media-hero-title">耳朵与眼睛，都别闲着</h1>
    <div class="media-rundown">
      <div class="rd-track rd-audio">
        <span class="rd-tc">00:00</span>
        <span class="rd-key">音轨</span>
        <span class="rd-desc">戴上耳机，边走边听</span>
      </div>
      <div class="rd-track rd-video">
        <span class="rd-tc">00:00</span>
        <span class="rd-key">视轨</span>
        <span class="rd-desc">坐稳了，点开就看</span>
      </div>
      <div class="rd-track rd-mixed">
        <span class="rd-tc">SYNC</span>
        <span class="rd-key">混合</span>
        <span class="rd-desc">两条轨装进同一条，想听想看随手切</span>
      </div>
    </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-char" aria-hidden="true">{{initial $it.Title}}</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}}