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

{{/* 三段式布局的第一段：顶部工具条。
     和另外四个页面保持一致，见 docs/admin/05-ui-specification.md §2。 */}}
<div class="toolbar">
  {{/* 文案写全「添加 PDD 商品」：这条工具条上还有「创建采集任务」，
       两个都以「创建」开头的话，第一次用的人分不清哪个是加商品、哪个是发起采集。 */}}
  <button type="button" data-modal-open="create-modal">添加 PDD 商品</button>

  {{/* 「创建采集任务」和「删除」用的是**同一个表单**，靠按钮上的
       formaction 决定提交到哪个地址。这样表格里的勾选框只需要挂一份，
       不用为每个操作各复制一套（复制出来的两套迟早会不同步）。 */}}
  <form id="pdd-form" method="post" action="/pdd/collect" hidden></form>
  <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" form="pdd-form">
  {{/* 把当前筛选一起带过去，操作完还停在原来的筛选上 */}}
  <input type="hidden" name="status" value="{{.StatusFilter}}" form="pdd-form">
  <input type="hidden" name="q" value="{{.Keyword}}" form="pdd-form">

  {{/* 文案是「创建采集任务」不是「采集」：点完只是排了个队，
       真正去手机上采要等客户端来领，可能几秒也可能几分钟 */}}
  <button type="submit" form="pdd-form" formaction="/pdd/collect"
          data-need-checked>创建采集任务</button>

  <form class="inline grow" method="get" action="/pdd">
    <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="q">商品 ID/链接</label>
    {{/* search-narrow 把这个框收到 30%，让「搜索」按钮能紧挨着它。
         用类名而不是改 .toolbar input[type="text"]——那条规则被 5 个页面共用。 */}}
    <input id="q" type="text" name="q" value="{{.Keyword}}"
           class="search-narrow" placeholder="商品 ID 或链接的一部分">
    <button type="submit">搜索</button>
  </form>

  <button type="submit" form="pdd-form" formaction="/pdd/delete" class="danger"
          data-need-checked
          data-confirm-delete="将删除 {n} 条记录。删除后重新创建同一链接可恢复，但采集结果会清空。"
          >删除</button>
</div>

{{/* 第二段：表格。双击一行打开弹窗，见 static/js/app.js */}}
<div class="table-wrap" id="pddProductPage">
<table>
  <thead>
    <tr>
      <th class="col-check"><input type="checkbox" data-check-all></th>
      <th>商品 ID</th>
      <th>标题</th>
      <th>PDD 链接</th>
      <th>采集状态</th>
      {{/* 采到 1 个和采到 20 个差别很大：只采到 1 个通常是没点开规格面板，
           说明这次采集有问题。这一列就是为了让它一眼能看出来 */}}
      <th>规格数</th>
      <th>采集时间</th>
      <th>更新时间</th>
    </tr>
  </thead>
  <tbody>
    {{range .Rows}}
    <tr data-detail-id="{{.ID}}" {{if .IsFailed}}class="row-warn"{{end}}>
      <td class="col-check">
        {{/* 勾选框的值是 goods_id：删除和建采集任务都按它定位。
             form 属性把它挂到工具条里那个表单上 */}}
        <input type="checkbox" value="{{.GoodsID}}" name="ids" form="pdd-form"
               aria-label="选择商品 {{.GoodsID}}">
      </td>
      <td>{{.GoodsID}}</td>
      <td class="truncate" title="{{.Title}}">{{.Title}}</td>
      <td class="truncate">
        <a href="{{.URL}}" target="_blank" rel="noopener noreferrer" title="{{.URL}}">{{.URL}}</a>
      </td>
      {{/* 状态是中文文字，不能只靠颜色区分 */}}
      <td>{{.StatusText}}{{if .CollectMsg}}<br><small class="missing">{{.CollectMsg}}</small>{{end}}</td>
      <td>{{.SkuCountText}}</td>
      <td>{{.CollectedAt}}</td>
      <td>{{.UpdatedAt}}</td>
    </tr>
    {{else}}
    {{/* 空状态要分情况：从没建过 和 筛选没结果，下一步动作完全不同 */}}
    <tr class="empty">
      <td colspan="8">
        {{if .IsFiltered}}
          当前筛选条件下没有商品。<br>
          <small>换个采集状态或清空搜索词再试。<a href="/pdd">查看全部</a></small>
        {{else}}
          还没有 PDD 商品。<br>
          <small>点左上角「创建」，粘贴一个拼多多商品链接就行，其余信息采集后自动回填。</small>
        {{end}}
      </td>
    </tr>
    {{end}}
  </tbody>
</table>
</div>

<p class="hint">
  双击任意一行可以查看和编辑这个商品，包括采回来的规格和价格。
</p>

{{/* ── 创建弹窗 ─────────────────────────────────
     内容是固定的（只有一个输入框），所以直接写在页面里藏着，
     不像编辑弹窗那样要去服务端取。 */}}
<div class="modal-backdrop" id="create-modal" hidden>
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="create-modal-title">
    <div class="modal-head">
      <h2 id="create-modal-title">创建 PDD 商品</h2>
      <button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
    </div>
    <form method="post" action="/pdd/create">
      <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
      <input type="hidden" name="status" value="{{.StatusFilter}}">
      <input type="hidden" name="q" value="{{.Keyword}}">
      <div class="modal-body">
        <div class="field">
          <label for="create-url">PDD 链接</label>
          <input id="create-url" type="text" name="url" required autocomplete="off"
                 placeholder="https://mobile.yangkeduo.com/goods.html?goods_id=737116531267">
        </div>
        <p class="hint">
          只需要链接，标题和规格由客户端采集后自动回填。<br>
          链接里必须带 <code>goods_id=</code>，短链接不行——请在拼多多 App
          的商品页点「分享」→「复制链接」。
        </p>
      </div>
      <div class="modal-foot">
        <button type="button" data-modal-close>取消</button>
        <button type="submit" class="primary">保存</button>
      </div>
    </form>
  </div>
</div>

{{/* ── 编辑弹窗的壳子 ───────────────────────────
     里面的内容双击行时由 /pdd/detail 返回，前端只负责放进来和显示。 */}}
<div class="modal-backdrop" id="detail-modal" data-detail-url="/pdd/detail" hidden>
  <div class="modal" role="dialog" aria-modal="true" data-detail-slot>
    <div class="modal-body">正在加载…</div>
  </div>
</div>

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