{{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 个重复任务。 */}}

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