{{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>
    </div>
    <div class="media-hero-sign" aria-hidden="true">
      <span class="sig-cn">音视专栏</span>
      <span class="sig-en">AUDIO · VIDEO</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-tabs">
    {{range .Data.Tabs}}
    <a href="/media{{if .Key}}?kind={{.Key}}{{end}}" class="media-tab {{if eq $.Data.Kind .Key}}on{{end}}">
      <span class="media-tab-dot" aria-hidden="true"></span>{{.Name}}<em>{{.Count}}</em>
    </a>
    {{end}}
  </div>

  <!-- ===== 节目卡片流：封面 + 类型徽标 + 点开即播 ===== -->
  <div class="media-list">
    {{range .Data.Items}}
    <article class="media-card" data-kind="{{.Kind}}">
      <a class="media-cover" href="/media/{{.ID}}" aria-label="{{.Title}}">
        {{if .Cover}}<img src="{{.Cover}}" alt="{{.Title}}" loading="lazy">{{else}}<span class="media-cover-ph">{{ico "play"}}</span>{{end}}
        <span class="media-kind media-kind-{{.Kind}}">{{.KindLabel}}</span>
      </a>
      <div class="media-body">
        <h2 class="media-title"><a href="/media/{{.ID}}">{{.Title}}</a></h2>
        <p class="media-summary">{{truncate .Summary 110}}</p>
        {{if .TagList}}
        <div class="media-tags">
          {{range .TagList}}<span class="media-tag">{{.}}</span>{{end}}
        </div>
        {{end}}
        <div class="media-foot">
          <span class="media-author">发布 · {{.Author}}</span>
          <span class="media-views">{{.Views}} 次播放</span>
          <span class="media-time">{{date .CreatedAt}}</span>
          <a class="media-more" href="/media/{{.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}}