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

{{/* ── 第一段：顶部工具条 ────────────────────────────── */}}
<div class="toolbar">
  {{if .CurrentUser.IsAdmin}}<a class="button" href="/integrations/catalog">导入记录</a>{{end}}
  <form class="inline grow" method="get" action="/shopee">
    {{/* 状态筛选是刚需（找待补规格 / 找没填链接的），不是锦上添花，
         见 docs/admin/05-ui-specification.md §4.1、工单 #43。
         放在关键词前面：操作员大多是"看某一类"而不是"查某个 ID"。 */}}
    <label for="status">状态</label>
    <select id="status" name="status">
      {{range .StatusOptions}}
      <option value="{{.Value}}" {{if eq .Value $.StatusFilter}}selected{{end}}>{{.Text}}</option>
      {{end}}
    </select>
    <label for="shop">店铺</label>
    <select id="shop" name="shop">
      {{range .ShopOptions}}
      <option value="{{.Value}}" {{if eq .Value $.ShopFilter}}selected{{end}}>{{.Text}}</option>
      {{end}}
    </select>
    <label for="image">图片</label>
    <select id="image" name="image">
      {{range .ImageOptions}}
      <option value="{{.Value}}" {{if eq .Value $.ImageFilter}}selected{{end}}>{{.Text}}</option>
      {{end}}
    </select>
    <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}}">
    <input type="hidden" name="list_goods_id" value="{{.Keyword}}">
    <input type="hidden" name="status" value="{{.StatusFilter}}">
    <input type="hidden" name="shop" value="{{.ShopFilter}}">
    <input type="hidden" name="image" value="{{.ImageFilter}}">
    <input type="hidden" name="page" value="{{.CurrentPage}}">
    <button type="submit" class="danger" data-need-checked>删除</button>
  </form>
</div>

{{/* ── 第二段：带勾选的表格 ──────────────────────────── */}}
{{/* 一个商品一行（不是一个 SKU 一行），见工单 #41。
     双击行打开详情弹窗，见 static/js/app.js。 */}}
<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>尺码</th>
      {{/* SKU 数是这个商品报表里实际出现过的规格条数。
           `[必须]` 必须单独显示——颜色数 × 尺码数经常大于它（蝦皮报表只含
           有销售成绩的 SKU），只看前两列会让人误以为要匹配的规格更多，见 #41。 */}}
      <th>SKU</th>
      {{/* `[必须]` 待补 > 0 说明该商品有 SKU 解析失败，整行标黄（.row-warn）。
           聚合成商品级之后，"部分失败"的行光看数字是正常的，
           不加这一列坏数据就会被悄悄吃掉，见 #41。 */}}
      <th>待补</th>
      <th>来源</th>
      <th>PDD 链接</th>
      <th>采集状态</th>
      <th>更新时间</th>
    </tr>
  </thead>
  <tbody>
    {{range .Rows}}
    <tr data-detail-id="{{.GoodsID}}"{{if gt .PendingCount 0}} class="row-warn"{{end}}>
      <td class="col-check"><input type="checkbox" name="ids" value="{{.GoodsID}}"></td>
      <td>{{.GoodsID}}</td>
      <td>{{if .ImageURL}}<button type="button" class="thumb-action" data-image-preview-url="{{.ImageURL}}" data-image-preview-title="{{.Title}}" title="查看蝦皮主图"><img src="{{.ImageURL}}" alt="{{.Title}} 缩略图" class="thumb" width="32" height="32" loading="lazy" referrerpolicy="no-referrer" data-image-thumb><span class="thumb-fallback" hidden data-image-thumb-fallback>加载失败</span></button>{{else}}<span class="thumb-placeholder">无图</span>{{end}}</td>
      {{/* 商品名称列收窄，用独立的 .col-title 类设 max-width（具体数值见 app.css），
           不用 flex——表格单元格和工具条的 .search-narrow 那套不一样，见 #41。
           title 属性让悬停能看完整标题，收窄之后必须留着。 */}}
      <td class="truncate col-title" title="{{.Title}}">{{.Title}}</td>
      <td class="truncate col-shop" title="{{.ShopName}}">{{if .ShopName}}{{.ShopName}}{{else}}—{{end}}</td>
      <td>{{.ColorCount}}</td>
      <td>{{.SizeCount}}</td>
      <td>{{.SKUCount}}</td>
      <td>{{.PendingCount}}</td>
      <td>{{.SourceText}}</td>
      <td{{if .PddMissing}} class="missing"{{end}}>{{.PddURL}}</td>
      <td>{{.StatusText}}</td>
      <td>{{.UpdatedAt}}</td>
    </tr>
    {{else}}
    <tr class="empty">
      <td colspan="13">
        {{if .IsFiltered}}
        当前筛选条件下没有商品。请调整状态、店铺、图片或商品 ID。<br>
        <small><a href="/shopee">清除筛选条件</a></small>
        {{else}}
        还没有数据。蝦皮与 PDD 对应数据由第三方脚本通过商品目录接口导入。<br>
        {{if $.CurrentUser.IsAdmin}}<small>可点击左上角「导入记录」查看脚本提交结果。</small>{{end}}
        {{end}}
      </td>
    </tr>
    {{end}}
  </tbody>
</table>
</div>

<div class="modal-backdrop" id="image-preview-modal" hidden><div class="modal image-preview-modal" role="dialog" aria-modal="true" aria-labelledby="image-preview-title"><div class="modal-head"><h2 id="image-preview-title" data-image-preview-title>蝦皮商品主图</h2><button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button></div><div class="modal-body image-preview-body"><p class="hint image-preview-status" data-image-preview-status role="status">正在加载原图…</p><img data-image-preview-image alt="" hidden></div><div class="modal-foot"><a class="button-link" data-image-preview-link href="#" target="_blank" rel="noopener noreferrer">新窗口打开原图</a><button type="button" data-modal-close>关闭</button></div></div></div>

<p class="hint">
  双击任意一行可以查看这个商品的完整规格表。
</p>


{{/* ── 详情弹窗的壳子 ───────────────────────────
     里面的内容双击行时由 /shopee/detail 返回，前端只负责放进来和显示，
     复用 #18 的机制（data-detail-url / data-detail-slot / data-detail-id），
     app.js 不需要改，见工单 #41。

     弹窗同时提供当前 PDD 关联和单商品采集入口。 */}}
<div class="modal-backdrop" id="detail-modal" data-detail-url="{{.DetailURL}}" hidden>
  <div class="modal" role="dialog" aria-modal="true" data-detail-slot>
    <div class="modal-body">正在加载…</div>
  </div>
</div>

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