{{define "content"}}
<div class="wrap">
  <div class="page-head">
    <div>
      <h1>专题管理</h1>
      <div class="sub">把某段时间、某个区域里的足迹打包成一个可对外展示的页面（地点 + 世界迷雾）</div>
    </div>
    <div class="row">
      <a class="btn" href="/admin">← 返回后台</a>
      <a class="btn" href="/topics" target="_blank">查看前台</a>
    </div>
  </div>

  {{if .Flash}}<div class="alert ok">{{.Flash}}</div>{{end}}
  {{if .Err}}<div class="alert err">{{.Err}}</div>{{end}}

  <div class="card">
    <h2>{{if .IsNew}}新建专题{{else}}编辑专题 #{{.Form.ID}}{{end}}</h2>
    <div class="card-sub">时间范围可精确到分钟；不圈显示区就是「时间范围内的地点画到哪算哪」。</div>
    <form method="post" action="/admin/topics/save" id="topic-form">
      {{if not .IsNew}}<input type="hidden" name="id" value="{{.Form.ID}}">{{end}}
      <div class="row">
        <label class="f" style="flex:2 1 240px"><span>标题<b class="req">*</b></span><input type="text" name="title" value="{{.Form.Title}}" placeholder="如：2026 大理之行"></label>
        <label class="f" style="flex:2 1 240px"><span>副标题</span><input type="text" name="subtitle" value="{{.Form.Subtitle}}" placeholder="如：环洱海骑行四天"></label>
      </div>
      <label class="f"><span>说明</span><textarea name="description" rows="3" placeholder="可选：这段行程的来龙去脉">{{.Form.Description}}</textarea></label>
      <div class="row">
        <label class="f" style="flex:1 1 200px"><span>开始时间<b class="req">*</b></span><input type="datetime-local" name="start_at" value="{{.Form.StartDate}}"></label>
        <label class="f" style="flex:1 1 200px"><span>结束时间<b class="req">*</b></span><input type="datetime-local" name="end_at" value="{{.Form.EndDate}}"></label>
        <label class="f" style="flex:1 1 120px"><span>排序</span><input type="number" name="sort_order" value="{{.Form.SortOrder}}" placeholder="小的在前"></label>
      </div>
      <div class="card-sub" style="margin:0 0 8px">显示区（可选）：在图上圈一组圆，落在<strong>任一</strong>圆内的足迹才算这个专题的内容；
        不圈就是「时间范围内的地点画到哪算哪」。圈了之后，迷雾也只显示在这些圆的并集里。</div>
      {{/* areas 的初值直接渲染在这里：脚本没加载上时提交的仍是原值，不会把已有显示区静默清空。
           crs 由编辑器按底图坐标系填（天地图那类是 WGS-84），后端再换算成 GCJ-02。 */}}
      <input type="hidden" name="areas" value="{{.Form.AreasJSON}}">
      <input type="hidden" name="crs" value="">
      <div class="area-tools">
        <label class="f" style="flex:0 1 150px;margin:0"><span>新圆半径（公里）</span>
          {{/* step 必须是 any：它是相对 min 递增的，min=0.05 + step=0.5 的合法值只有
               0.05/0.55/1.05…，用户填 3 或 3.5 会被浏览器判非法并弹原生提示。 */}}
          <input type="number" id="area-new-km" min="0.05" max="2000" step="any" value="3"></label>
        <span class="muted area-span" id="area-new-span"></span>
        <button class="btn" type="button" id="area-clear">清除全部</button>
        <span class="muted" id="area-hint"></span>
      </div>
      <div id="area-map"></div>
      <div id="area-list"></div>
      <div class="muted" style="font-size:var(--fs-sm);margin-bottom:10px">
        迷雾是一份累积快照、没有时间维度，所以只按上面的显示区收口，不按时间范围收口。
      </div>
      <div class="row" style="align-items:center;margin-bottom:10px">
        <label class="check" style="margin:0"><input type="checkbox" name="show_fog" {{if .Form.ShowFog}}checked{{end}}> 展示世界迷雾</label>
        <label class="check" style="margin:0"><input type="checkbox" name="enabled" {{if .Form.Enabled}}checked{{end}}> 对外展示（取消勾选则访客看不到）</label>
      </div>
      <button class="btn primary" type="submit">{{if .IsNew}}创建专题{{else}}保存修改{{end}}</button>
      {{if not .IsNew}}<a class="btn" href="/admin/topics">取消编辑</a>{{end}}
    </form>
  </div>

  <div class="card">
    <h2>专题列表</h2>
    <div class="card-sub">共 {{len .Topics}} 个；「对访客」一列是展示开关，关掉的专题只有你自己能预览</div>
    {{if .Topics}}
    <div class="tw">
      <table class="tb tb-stack">
        <thead><tr><th>标题</th><th>时间范围</th><th class="num">地点</th><th class="num">到访</th><th>区域</th><th>对访客</th><th></th></tr></thead>
        <tbody>
        {{range .Topics}}
          <tr>
            <td><a href="/topics/{{.ID}}" target="_blank">{{.Title}}</a>{{if .Subtitle}} <span class="muted">· {{.Subtitle}}</span>{{end}}</td>
            <td class="muted mono" data-label="时间范围">{{.RangeLabel}}</td>
            <td class="num" data-label="地点">{{num .PlaceCount}}</td>
            <td class="num" data-label="到访">{{num .VisitCount}}</td>
            <td class="muted" data-label="区域">{{if .HasArea}}{{printf "%.1f" .RadiusKm}} km 内{{else}}不限{{end}}</td>
            <td data-label="对访客">
              <form method="post" action="/admin/topics/toggle" style="display:inline">
                <input type="hidden" name="id" value="{{.ID}}">
                <button class="btn sm {{if .Enabled}}primary{{end}}" type="submit">{{if .Enabled}}展示中{{else}}已隐藏{{end}}</button>
              </form>
            </td>
            <td data-label="操作" class="ops">
              <a class="btn sm" href="/admin/topics?edit={{.ID}}">编辑</a>
              <form method="post" action="/admin/topics/delete" style="display:inline"
                    onsubmit="return confirm('删除专题「{{.Title}}」？地点数据不受影响。')">
                <input type="hidden" name="id" value="{{.ID}}">
                <button class="btn sm danger" type="submit">删除</button>
              </form>
            </td>
          </tr>
        {{end}}
        </tbody>
      </table>
    </div>
    {{else}}
    <div class="empty">还没有专题，用上面的表单建一个吧</div>
    {{end}}
  </div>
</div>

<script src="/static/js/topic-areas.js?v={{.AssetV}}"></script>
<script>
(function () {
  function whenReady(cb) {
    if (document.readyState === 'complete') { setTimeout(cb, 0); return; }
    window.addEventListener('load', cb);
  }
  // 显示区编辑器：地图与 Leaflet 由 layout 在本块之后引入，所以 init 内部会等 load。
  // home 是生效数据集的地点包围盒（没有数据时是 null，编辑器自带兜底视野）。
  if (window.rondTopicAreas) {
    window.rondTopicAreas.init({
      mapId: 'area-map', formId: 'topic-form', listId: 'area-list',
      hintId: 'area-hint', radiusId: 'area-new-km', clearId: 'area-clear',
      spanId: 'area-new-span',
      home: {{if .MapHomeJSON}}{{.MapHomeJSON}}{{else}}null{{end}}
    });
  }
  whenReady(function () {
    try {
      // 统一入口：一次覆盖 datetime-local 与 date（中文文案在 attachPicker 里设）
      window.rondDatetime.attachAll();
    } catch (e) { console.error('日期控件初始化失败', e); }
  });
})();
</script>
{{end}}