{{define "admin_media_form"}}
  <link rel="stylesheet" href="/static/css/media.css?v={{assetVer}}">
  <div class="thm-media">
  <div class="panel">
    <h2>{{if eq .Data.Mode "create"}}新建节目{{else}}编辑节目「{{.Data.Item.Title}}」{{end}}</h2>
    {{if .Data.Error}}<div class="alert">{{.Data.Error}}</div>{{end}}
    <form method="post" action="{{if eq .Data.Mode "create"}}/admin/media/create{{else}}/admin/media/{{.Data.Item.ID}}/update{{end}}">
      <input type="hidden" name="csrf" value="{{.CSRF}}">

      <div class="form-row">
        <label>节目标题</label>
        <input type="text" name="title" required value="{{.Data.Item.Title}}" placeholder="一句话说清这条音视讲什么">
      </div>

      <!-- —— 节目类型：音频 / 视频 / 混合，三选一 —— -->
      <div class="form-row">
        <label>节目类型</label>
        <div class="media-kinds">
          <label class="media-kind-pick">
            <input type="radio" name="kind" value="audio" {{if eq .Data.Item.Kind "audio"}}checked{{end}}>
            <span class="media-kind media-kind-audio">音频</span>
          </label>
          <label class="media-kind-pick">
            <input type="radio" name="kind" value="video" {{if eq .Data.Item.Kind "video"}}checked{{end}}>
            <span class="media-kind media-kind-video">视频</span>
          </label>
          <label class="media-kind-pick">
            <input type="radio" name="kind" value="mixed" {{if eq .Data.Item.Kind "mixed"}}checked{{end}}>
            <span class="media-kind media-kind-mixed">混合</span>
          </label>
        </div>
        <p class="hint">音频只挂音频轨、视频只挂视频轨；混合节目可以同时挂两种轨，前台会分成两段播放。</p>
      </div>

      <div class="form-row">
        <label>节目简介</label>
        <textarea name="summary" rows="3" placeholder="两三句话说清这条节目的看点，会显示在卡片与搜索摘要里">{{.Data.Item.Summary}}</textarea>
      </div>

      <div class="form-row">
        <label>封面图地址</label>
        <input type="text" name="cover" value="{{.Data.Item.Cover}}" placeholder="https://.../cover.jpg，留空则用类型占位图">
      </div>

      <div class="form-row">
        <label>作者 / 主播</label>
        <input type="text" name="author" value="{{.Data.Item.Author}}" placeholder="留空则默认为「匿名」">
      </div>

      <div class="form-row">
        <label>标签</label>
        <input type="text" name="tags" value="{{.Data.Item.Tags}}" placeholder="用逗号分隔，如：播客, 深夜, 访谈">
      </div>

      <!-- —— 播放轨：重名字段成组上送，序号即数组下标 —— -->
      <div class="form-row">
        <label>播放轨</label>
        <p class="hint">每行一条轨道：选类型、填标题、贴直链地址；地址留空的行会被忽略，标题留空则沿用节目标题。</p>
        <div class="media-tracks" id="mediaTracks">
          {{range .Data.Tracks}}
          <div class="media-track-row">
            <select name="track_kind" aria-label="轨道类型">
              <option value="audio" {{if ne .Kind "video"}}selected{{end}}>音频</option>
              <option value="video" {{if eq .Kind "video"}}selected{{end}}>视频</option>
            </select>
            <input type="text" name="track_title" value="{{.Title}}" placeholder="轨道标题">
            <input type="text" name="track_source" value="{{.Source}}" placeholder="直链地址，如 https://.../ep1.mp3">
            <input type="text" name="track_duration" value="{{.Duration}}" placeholder="时长 03:21">
            <button type="button" class="btn btn-ghost btn-sm media-track-del" title="删除这条轨道">删除</button>
          </div>
          {{end}}
        </div>
        <button type="button" class="btn btn-ghost btn-sm" id="mediaTrackAdd" style="margin-top:10px;">＋ 添加播放轨</button>
      </div>

      <div class="form-row check-row">
        <label><input type="checkbox" name="status" value="1" {{if eq .Data.Item.Status 1}}checked{{end}}> 立即发布（前台可见）</label>
      </div>

      <div style="display:flex;gap:10px;align-items:center;">
        <button class="btn btn-primary" type="submit">{{if eq .Data.Mode "create"}}发布节目{{else}}保存修改{{end}}</button>
        <a class="btn btn-ghost" href="/admin/media">返回音视列表</a>
      </div>
    </form>
  </div>
  </div>

  <!-- 播放轨新增模板：点「添加播放轨」时克隆一行，不依赖任何框架 -->
  <template id="mediaTrackTpl">
    <div class="media-track-row">
      <select name="track_kind" aria-label="轨道类型">
        <option value="audio">音频</option>
        <option value="video">视频</option>
      </select>
      <input type="text" name="track_title" placeholder="轨道标题">
      <input type="text" name="track_source" placeholder="直链地址，如 https://.../ep1.mp3">
      <input type="text" name="track_duration" placeholder="时长 03:21">
      <button type="button" class="btn btn-ghost btn-sm media-track-del" title="删除这条轨道">删除</button>
    </div>
  </template>

  <script>
  (function () {
    var box = document.getElementById("mediaTracks");
    var tpl = document.getElementById("mediaTrackTpl");
    var add = document.getElementById("mediaTrackAdd");
    if (!box || !tpl || !add) return;
    add.addEventListener("click", function () {
      box.appendChild(tpl.content.cloneNode(true));
    });
    box.addEventListener("click", function (e) {
      var btn = e.target.closest(".media-track-del");
      if (!btn) return;
      var row = btn.closest(".media-track-row");
      if (row) row.remove();
    });
  })();
  </script>
{{end}}