{{define "syb/detail_modal"}}
{{with .D}}
<div class="modal-head">
  <h2>处理订单 {{.OrderNo}}</h2>
  <button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
</div>

<div class="modal-body form-stack">
  <p><span class="status-pill">{{.StageText}}</span></p>
  <p class="hint">{{.StageHelp}}</p>
  <dl class="detail">
    <dt>明细 ID</dt><dd>{{.SybID}}</dd>
    <dt>商品</dt><dd>{{.Title}}</dd>
    <dt>顺运宝规格</dt><dd>{{.ProductSpec}}</dd>
    <dt>数量</dt><dd>{{.Quantity}}</dd>
    <dt>蝦皮商品 ID</dt><dd>{{.ShopeeGoodsID}}</dd>
    <dt>蝦皮规格 ID</dt><dd>{{if .ShopeeSKUID}}{{.ShopeeSKUID}}{{else}}—{{end}}</dd>
  </dl>

  {{if not .ShopeeExists}}
  <p class="missing">蝦皮数据中找不到商品 {{.ShopeeGoodsID}}。请先导入该商品，或核对顺运宝商品链接提取出的 ID。</p>
  <p><a class="button-link" href="/shopee?goods_id={{.ShopeeGoodsID}}">到蝦皮数据查看</a></p>
  {{else if and (not .ShopeeSKUID) (not .Candidates)}}
  <p class="missing">这个蝦皮商品没有可选 SKU。请先在蝦皮数据中补充规格。</p>
  <p><a class="button-link" href="/shopee?goods_id={{.ShopeeGoodsID}}">到蝦皮数据补充</a></p>
  {{else if not .ShopeeSKUID}}
  <form method="post" action="/syb/select-sku" class="form-stack">
    <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
    <input type="hidden" name="syb_id" value="{{.SybID}}">
    <input type="hidden" name="order_no" value="{{$.Keyword}}">
    <input type="hidden" name="stage" value="{{$.StageFilter}}">
    <input type="hidden" name="page" value="{{$.CurrentPage}}">
    <div class="field">
      <label for="syb-shopee-sku">蝦皮规格</label>
      <select id="syb-shopee-sku" name="shopee_sku_id" required autofocus>
        <option value="">请选择</option>
        {{range .Candidates}}
        <option value="{{.SKUID}}" {{if .Selected}}selected{{end}}>{{.SpecRaw}}（{{.Color}} / {{.Size}}，ID {{.SKUID}}）</option>
        {{end}}
      </select>
      <small>系统只会自动采用唯一精确候选；这里的选择仍会由服务端校验是否属于当前商品。</small>
    </div>
    <div>
      <button type="submit" class="primary">确认蝦皮规格</button>
    </div>
  </form>
  {{else}}
  <h3>关联采购商品</h3>
  <form method="post" action="/syb/associate-pdd" class="form-stack">
    <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
    <input type="hidden" name="syb_id" value="{{.SybID}}">
    <input type="hidden" name="order_no" value="{{$.Keyword}}">
    <input type="hidden" name="stage" value="{{$.StageFilter}}">
    <input type="hidden" name="page" value="{{$.CurrentPage}}">
    <div class="field">
      <label for="syb-pdd-url">PDD 商品链接</label>
      <input id="syb-pdd-url" type="url" name="pdd_url" value="{{.PddURL}}" required placeholder="https://mobile.yangkeduo.com/goods.html?goods_id=...">
      <small>{{if .PddGoodsID}}当前 PDD 商品 ID：{{.PddGoodsID}}{{else}}保存后会从完整链接解析商品 ID，并建立 PDD 商品档案。{{end}}</small>
    </div>
    {{if .PddGoodsID}}
    <label class="check-line"><input type="checkbox" name="confirm_replace" value="1">如果新链接是其他商品，我确认更换当前关联</label>
    {{end}}
    <div><button type="submit" class="primary">保存 PDD 关联</button></div>
  </form>

  {{if .PddGoodsID}}
  <form method="post" action="/syb/collect-pdd" class="inline">
    <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
    <input type="hidden" name="syb_id" value="{{.SybID}}">
    <input type="hidden" name="order_no" value="{{$.Keyword}}">
    <input type="hidden" name="stage" value="{{$.StageFilter}}">
    <input type="hidden" name="page" value="{{$.CurrentPage}}">
    {{if .CanCollect}}
    <button type="submit">{{if eq .CollectStatus "failed"}}重新创建采集任务{{else}}创建采集任务{{end}}</button>
    {{else}}
    <span class="hint">{{if eq .CollectStatus "collecting"}}采集任务正在执行，请稍后刷新。{{else}}PDD 数据已采集，下一步匹配采购规格。{{end}}</span>
    {{end}}
  </form>
  {{end}}
  {{end}}
</div>

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