{{define "media_detail"}}
  <link rel="stylesheet" href="/static/css/media.css?v={{assetVer}}">
<div class="thm-media">
  <div class="mod-back"><a href="/media">← 返回音视专栏</a></div>

  <article class="media-article">
    <div class="media-article-kicker">
      <span class="media-kind media-kind-{{.Data.Item.Kind}}">{{.Data.Item.KindLabel}}</span>
      {{if eq .Data.Item.Status 1}}<span class="media-badge media-badge-live">已发布</span>{{else}}<span class="media-badge">草稿</span>{{end}}
    </div>
    <h1 class="media-article-title">{{.Data.Item.Title}}</h1>
    <div class="media-article-meta">
      <span>发布 · {{.Data.Item.Author}}</span>
      <span>{{date .Data.Item.CreatedAt}}</span>
      <span>{{.Data.Item.Views}} 次播放</span>
      <span>{{len .Data.Tracks}} 条播放轨</span>
      {{template "fav_button" dict "VD" . "Type" "media" "Key" (printf "%d" .Data.Item.ID) "Title" .Data.Item.Title "URL" (printf "/media/%d" .Data.Item.ID)}}
    </div>
    {{if .Data.Item.Summary}}<p class="media-article-summary">{{.Data.Item.Summary}}</p>{{end}}
    {{if .Data.Item.TagList}}
    <div class="media-tags">
      {{range .Data.Item.TagList}}<span class="media-tag">{{.}}</span>{{end}}
    </div>
    {{end}}
    {{if .Data.Item.Cover}}<div class="media-article-cover"><img src="{{.Data.Item.Cover}}" alt="{{.Data.Item.Title}}"></div>{{end}}
  </article>

  <!-- ===== 音频轨：<audio> 标签即点即听 ===== -->
  {{if .Data.AudioTracks}}
  <section class="media-player-sec">
    <h2 class="media-sec-title">{{ico "play"}} 音频（{{len .Data.AudioTracks}}）</h2>
    <div class="media-player-list">
      {{range .Data.AudioTracks}}
      <div class="media-player">
        <div class="media-player-head">
          <span class="media-player-name">{{.Title}}</span>
          {{if .Duration}}<span class="media-player-dur">{{.Duration}}</span>{{end}}
        </div>
        <audio class="media-audio" controls preload="none" src="{{.Source}}"></audio>
      </div>
      {{end}}
    </div>
  </section>
  {{end}}

  <!-- ===== 视频轨：<video> 标签即点即看 ===== -->
  {{if .Data.VideoTracks}}
  <section class="media-player-sec">
    <h2 class="media-sec-title">{{ico "film"}} 视频（{{len .Data.VideoTracks}}）</h2>
    <div class="media-player-list">
      {{range .Data.VideoTracks}}
      <div class="media-player">
        <div class="media-player-head">
          <span class="media-player-name">{{.Title}}</span>
          {{if .Duration}}<span class="media-player-dur">{{.Duration}}</span>{{end}}
        </div>
        <video class="media-video" controls preload="metadata" src="{{.Source}}"></video>
      </div>
      {{end}}
    </div>
  </section>
  {{end}}

  {{if not .Data.Tracks}}
  <div class="mod-empty" style="padding:26px 20px;">
    <h3>这条节目还没挂播放轨</h3>
    <p>稍后再来，或者先去专栏里听听别的。</p>
  </div>
  {{end}}

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