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

     `[必须]` 这个弹窗只读，没有保存表单——ShopeeSave 仍是 501，
     不要放一个点了没反应的保存按钮，见工单 #41。 */}}
{{with .D}}
<div class="modal-head">
  <h2>商品 {{.GoodsID}}</h2>
  <button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
</div>

<div class="modal-body">
  <dl class="detail">
    <dt>商品名称</dt><dd>{{.Title}}</dd>
    <dt>蝦皮状态</dt><dd>{{.ShopeeStatus}}</dd>
    <dt>主商品货号</dt><dd>{{.MainSKUCode}}</dd>
    {{/* PDD 链接本工单只读展示，不做保存，见 #41「不做」清单 */}}
    <dt>PDD 链接</dt>
    <dd{{if .PddMissing}} class="missing"{{end}}>{{.PddURL}}</dd>
    <dt>采集状态</dt><dd>{{.StatusText}}</dd>
  </dl>

  <h3>
    规格（{{len .SKUs}} 个{{if gt .PendingCount 0}}，{{.PendingCount}} 个待人工补{{end}}）
  </h3>

  {{if not .SKUs}}
  <p class="missing">这个商品在报表里没有任何 SKU。</p>
  {{else}}
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>规格ID</th>
          <th>颜色</th>
          <th>尺码</th>
          <th>建議</th>
          {{/* 状态列要有文字（✓ / 待补），不能只靠颜色区分，见 #41 */}}
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        {{range .SKUs}}
        <tr{{if .Pending}} class="row-warn"{{end}}>
          <td>{{.SKUID}}</td>
          <td>{{.Color}}</td>
          <td>{{.Size}}</td>
          <td>{{.Advice}}</td>
          <td>{{.StatusText}}</td>
        </tr>
        {{if .Pending}}
        {{/* `[必须]` 待补的行要显示 spec_raw 原文——不显示的话人工不知道
             该填什么，这正是保留原文这个设计的全部意义，见 #41。 */}}
        <tr class="row-warn">
          <td colspan="5"><small>原文：{{.SpecRaw}}</small></td>
        </tr>
        {{end}}
        {{end}}
      </tbody>
    </table>
  </div>
  {{end}}
</div>

<div class="modal-foot">
  <button type="button" data-modal-close>关闭</button>
</div>
{{end}}
{{end}}