{{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}}
    <tr{{if .ParseFailed}} class="row-warn"{{end}} title="SKU {{.SKUID}}">
      <td class="col-check"><input type="checkbox" name="ids" value="{{.GoodsID}}"></td>
      <td>{{.GoodsID}}</td>
      <td title="{{.Title}}">{{.Title}}{{if .IsManual}} <small>（人工新增）</small>{{end}}</td>
      <td>{{.Color}}</td>
      <td>{{.Size}}</td>
      <td>{{.Advice}}</td>
      <td{{if .PddMissing}} class="missing"{{end}}>{{.PddURL}}</td>
      <td>{{.StatusText}}</td>
      <td>{{.UpdatedAt}}</td>
    </tr>
    {{else}}
    <tr class="empty">
      <td colspan="9">
        {{if .IsFiltered}}
        没有匹配的数据，换个商品 ID 试试。
        {{else}}
        还没有数据，点左上角「导入 Excel」开始。<br>
        <small>样本文件不在仓库里，需向项目负责人索取，放到 raw_data/ 下。</small>
        {{end}}
      </td>
    </tr>
    {{end}}
  </tbody>
</table>
</div>

{{/* ── 导入失败行：全部列出来，不折叠、不只显示条数 ──── */}}
{{if .Failures}}
<div class="table-wrap">
  <p>本次导入有 {{len .Failures}} 行解析失败，规格原文已按原样保存，需人工补颜色/尺码/建议：</p>
  <table>
    <thead>
      <tr>
        <th>行号</th>
        <th>规格原文</th>
        <th>原因</th>
      </tr>
    </thead>
    <tbody>
      {{range .Failures}}
      <tr>
        <td>{{.Row}}</td>
        <td>{{.Raw}}</td>
        <td>{{.Reason}}</td>
      </tr>
      {{end}}
    </tbody>
  </table>
</div>
{{end}}

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

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

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