{{define "pdd/edit_modal"}}
{{/* 双击一行时弹出的内容。
     这是一个**片段**，不是整页——外面的弹窗壳子在 pdd/list.html 里。

     规格表由服务端渲染是有意的：维度顺序、价格格式、price_cent 为 null
     的处理都是业务规则，放到前端去拼就没人维护得住了。 */}}
{{with .D}}
<div class="modal-head">
  <h2>PDD 商品 {{.GoodsID}}</h2>
  <button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
</div>

{{/* 「重新采集」自己一个表单，只提交这一个商品。
     HTML 不允许表单套表单，所以它写在保存表单外面，
     按钮靠 form="pdd-recollect-form" 挂过来。 */}}
<form id="pdd-recollect-form" method="post" action="/pdd/recollect" hidden>
  <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
  <input type="hidden" name="goods_id" value="{{.GoodsID}}">
  <input type="hidden" name="status" value="{{$.StatusFilter}}">
  <input type="hidden" name="q" value="{{$.Keyword}}">
  <input type="hidden" name="page" value="{{$.CurrentPage}}">
  <input type="hidden" name="page_size" value="{{$.CurrentPageSize}}">
</form>

<form method="post" action="/pdd/save">
  <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
  <input type="hidden" name="id" value="{{.ID}}">
  <input type="hidden" name="status" value="{{$.StatusFilter}}">
  <input type="hidden" name="q" value="{{$.Keyword}}">
  <input type="hidden" name="page" value="{{$.CurrentPage}}">
  <input type="hidden" name="page_size" value="{{$.CurrentPageSize}}">

  <div class="modal-body">
    <div class="field">
      <label for="recollect-client">重新采集的执行客户端</label>
      <select id="recollect-client" name="client_id" form="pdd-recollect-form">
        <option value="">不指定（任意客户端可领取）</option>
        {{range $.AssignableClients}}
        <option value="{{.ClientID}}">{{.Name}}（{{.ClientID}}，{{.Status}}）</option>
        {{end}}
      </select>
      <p class="hint">通常保持默认即可。重新采集期间会保留当前详情，成功后再用新结果覆盖。</p>
    </div>
    <dl class="detail">
      <dt>商品 ID</dt><dd>{{.GoodsID}}<small>（只读，由链接解析得出，不能改）</small></dd>

      <dt><label for="detail-url">PDD 链接</label></dt>
      <dd><input id="detail-url" type="text" name="url" value="{{.URL}}"
                 autocomplete="off" class="wide"></dd>

      <dt>标题</dt><dd>{{.Title}}<small>（只读，采集后自动回填）</small></dd>
      <dt>店铺</dt><dd>{{.ShopName}}<small>（只读，采集后自动回填）</small></dd>
      <dt>采集状态</dt><dd>{{.StatusText}}</dd>
      <dt>失败原因</dt><dd>{{.CollectMsg}}</dd>
      <dt>采集时间</dt><dd>{{.CollectedAt}}</dd>
      {{if .ArtifactRef}}
      {{/* 诊断产物只报位置、不上传文件：告诉操作员去哪台机器的哪个目录捞截图 */}}
      <dt>诊断产物</dt><dd><code>{{.ArtifactRef}}</code></dd>
      {{end}}
    </dl>

    <h3>规格{{if .Collected}}（{{len .SKUs}} 个）{{end}}</h3>

    {{if .SkusError}}
    <p class="missing">{{.SkusError}}</p>
    {{else if not .Collected}}
    <p class="hint">
      尚未采集。关掉这个弹窗，勾选这一行再点「创建采集任务」，
      等客户端领走执行完，规格和价格就会出现在这里。
    </p>
    {{else if not .SKUs}}
    <p class="missing">
      采集完成但一个规格都没有。这通常说明商品已下架，或者采集时没点开规格面板——
      建议重新采集一次。
    </p>
    {{else}}
    {{if .ShowPriceSource}}
    <p class="hint">
      价格按颜色采样，同一颜色下各尺码显示同一价格。<br>
      标 ✓ 的是实测价，其余为推断值。
    </p>
    {{end}}
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            {{/* 列顺序按采集结果里的 dimensions 定，不是 Go map 的随机顺序 */}}
            {{range .DimensionNames}}<th>{{.}}</th>{{end}}
            <th>价格</th>
            {{if $.D.ShowPriceSource}}<th>价格来源</th>{{end}}
            <th>有货</th>
          </tr>
        </thead>
        <tbody>
          {{range .SKUs}}
          <tr>
            {{range .Options}}<td>{{.}}</td>{{end}}
            {{/* 价格底层存的是整数分。采不到价格显示「未采到」，
                 绝不显示 ¥0.00——那会让人以为是白菜价 */}}
            <td>{{.PriceText}}</td>
            {{if $.D.ShowPriceSource}}<td>{{.PriceSource}}</td>{{end}}
            <td>{{.Available}}</td>
          </tr>
          {{end}}
        </tbody>
      </table>
    </div>
    {{end}}
  </div>

  <div class="modal-foot">
    <button type="submit" form="pdd-recollect-form">重新采集</button>
    <span class="grow"></span>
    <button type="button" data-modal-close>取消</button>
    <button type="submit" class="primary">保存</button>
  </div>
</form>
{{end}}
{{end}}