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

{{/* ── 第一段：顶部工具条 ────────────────────────────── */}}
<div class="toolbar">
  <form class="inline" method="post" action="/shopee/import" enctype="multipart/form-data">
    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
    <input type="file" name="file" accept=".xlsx" required>
    <button type="submit">导入 Excel</button>
  </form>

  <form class="inline" method="post" action="/shopee/collect">
    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
    <button type="submit" data-need-checked>批量采集</button>
  </form>

  <form class="inline grow" method="get" action="/shopee">
    <label for="q">商品 ID</label>
    <input id="q" type="text" name="goods_id" value="{{.Keyword}}" placeholder="商品 ID">
    <button type="submit">搜索</button>
  </form>

  <form class="inline" method="post" action="/shopee/delete"
        data-confirm-delete>
    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
    <button type="submit" class="danger" data-need-checked>删除</button>
  </form>
</div>

{{/* ── 第二段：带勾选的表格 ──────────────────────────── */}}
<div class="table-wrap">
<table>
  <thead>
    <tr>
      <th class="col-check"><input type="checkbox" data-check-all></th>
      <th>商品 ID</th>
      <th>商品名称</th>
      <th>颜色</th>
      <th>尺码</th>
      <th>建议</th>
      <th>PDD 链接</th>
      <th>采集状态</th>
      <th>更新时间</th>
    </tr>
  </thead>
  <tbody>
    {{range .Rows}}
    {{/* TODO(骨架): 行渲染。解析失败的行整行标黄（class="row-warn"），
         PDD 链接为空的显示"未填写"并标红。双击行打开编辑弹窗。 */}}
    {{else}}
    <tr class="empty">
      <td colspan="9">
        还没有数据，点左上角「导入 Excel」开始。<br>
        <small>样本文件不在仓库里，需向项目负责人索取，放到 raw_data/ 下。</small>
      </td>
    </tr>
    {{end}}
  </tbody>
</table>
</div>

{{/* TODO(骨架): 编辑弹窗 templates/shopee/edit_modal.html
     这是从蝦皮商品出发录入 PDD 链接、发起采集的入口。
     采集按钮**在本页只出现在这个弹窗里**——不要放到表格每一行，
     一个商品有 N 个 SKU 行，放行上就是 N 个按钮干同一件事，
     还会建出 N 个重复任务。

     PDD 商品页（templates/pdd/）也能录入链接和发起采集，两处并存；
     本页这个还是骨架（点了返回 501）。合并与否由
     「蝦皮↔PDD 关联入口」工单决定，不要在本页单独改。 */}}

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