{{define "task/list"}}
{{template "header" .}}

{{/* 三段式布局的第一段：顶部工具条。
     采集和采购放在同一页，最常被问的是"有没有卡住的任务"，
     所以类型/状态筛选放在关键词搜索前面，见 #19。 */}}
<div class="toolbar">
  <form class="inline" method="get" action="/tasks">
    <label for="type">类型</label>
    <select id="type" name="type">
      {{range .TypeOptions}}
      <option value="{{.Value}}" {{if eq .Value $.TypeFilter}}selected{{end}}>{{.Text}}</option>
      {{end}}
    </select>
    <label for="status">状态</label>
    <select id="status" name="status">
      {{range .StatusOptions}}
      <option value="{{.Value}}" {{if eq .Value $.StatusFilter}}selected{{end}}>{{.Text}}</option>
      {{end}}
    </select>
  </form>

  <form class="inline grow" method="get" action="/tasks">
    <input type="hidden" name="type" value="{{.TypeFilter}}">
    <input type="hidden" name="status" value="{{.StatusFilter}}">
    <label for="q">关键词</label>
    {{/* search-narrow 把搜索框收到 30%，让「搜索」按钮紧挨着它。
         用类名而不是改 .toolbar input[type="text"]——那条被五个页面共用。 */}}
    <input id="q" type="text" name="q" value="{{.Keyword}}"
           class="search-narrow" placeholder="任务编号 / 订单号 / 商品 ID">
    <button type="submit">搜索</button>
  </form>

  <form id="task-form" method="post" action="/tasks/delete" hidden></form>
  <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" form="task-form">
  {{/* 把当前筛选一起带过去，删除完还停在原来的筛选上 */}}
  <input type="hidden" name="type" value="{{.TypeFilter}}" form="task-form">
  <input type="hidden" name="status" value="{{.StatusFilter}}" form="task-form">
  <input type="hidden" name="q" value="{{.Keyword}}" form="task-form">
  <input type="hidden" name="page" value="{{.CurrentPage}}" form="task-form">

  <button type="submit" form="task-form" formaction="/tasks/delete" class="danger"
          data-need-checked
          data-confirm-delete="将删除 {n} 条记录，不可恢复。"
          >删除</button>
</div>

{{/* 第二段：表格。双击一行打开只读详情弹窗，见 static/js/app.js */}}
<div class="table-wrap">
<table>
  <thead>
    <tr>
      <th class="col-check"><input type="checkbox" data-check-all></th>
      <th>任务编号</th>
      <th>类型</th>
      <th>执行模式</th>
      <th>目标</th>
      <th>状态</th>
      <th>客户端</th>
      <th>更新时间</th>
    </tr>
  </thead>
  <tbody>
    {{range .Rows}}
    <tr data-detail-id="{{.TaskID}}" {{if .IsWarn}}class="row-warn"{{end}}>
      <td class="col-check">
        <input type="checkbox" value="{{.TaskID}}" name="ids" form="task-form"
               aria-label="选择任务 {{.TaskID}}">
      </td>
      <td>{{.TaskID}}</td>
      {{/* 类型是中文文字，不能只靠颜色区分 */}}
      <td>{{.TypeText}}</td>
      <td>{{.ExecutionModeText}}</td>
      <td class="truncate" title="{{.Target}}">{{.Target}}</td>
      <td>{{.StatusText}}</td>
      <td>{{.ClientText}}</td>
      <td>{{.UpdatedAt}}</td>
    </tr>
    {{else}}
    {{/* 空状态要分情况：从没建过任务 和 筛选没结果，下一步动作完全不同 */}}
    <tr class="empty">
      <td colspan="8">
        {{if .IsFiltered}}
          当前筛选条件下没有任务。<br>
          <small>换个类型、状态或关键词再试。<a href="/tasks">查看全部</a></small>
        {{else}}
          还没有任务。<br>
          <small>到「PDD 商品」勾选商品点「创建采集任务」，
          或到「顺运宝数据」勾选货运单点「创建采购任务」。</small>
        {{end}}
      </td>
    </tr>
    {{end}}
  </tbody>
</table>
</div>

<p class="hint">
  双击任意一行可以查看这个任务的完整信息，包括分配客户端、领取/完成时间和错误详情。
</p>

{{/* ── 详情弹窗的壳子 ───────────────────────────
     里面的内容双击行时由 /tasks/detail 返回，前端只负责放进来和显示。
     机制复用 #18 的 setupRowDetail，不新造一套。 */}}
<div class="modal-backdrop" id="detail-modal" data-detail-url="/tasks/detail" hidden>
  <div class="modal" role="dialog" aria-modal="true" data-detail-slot>
    <div class="modal-body">正在加载…</div>
  </div>
</div>

{{template "footer" .}}
{{end}}