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

<div class="toolbar">
  <form class="inline" method="post" action="/syb/sync">
    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
    <button type="submit">同步</button>
  </form>

  <form class="inline" method="post" action="/syb/create-task">
    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
    <button type="submit" data-need-checked>创建采购任务</button>
  </form>

  <form class="inline grow" method="get" action="/syb">
    <label for="q">订单号</label>
    <input id="q" type="text" name="order_no" value="{{.Keyword}}" placeholder="订单号">
    <button type="submit">搜索</button>
  </form>

  <form class="inline" method="post" action="/syb/delete" data-confirm-delete>
    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
    <button type="submit" class="danger" data-need-checked>删除</button>
  </form>
</div>

<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>蝦皮商品 ID</th>
      <th>规格 SKU</th>
      <th>数量</th>
      <th>价格</th>
      <th>图片</th>
      <th>匹配状态</th>
      <th>更新时间</th>
    </tr>
  </thead>
  <tbody>
    {{range .Rows}}
    {{/* TODO(骨架): 行渲染。价格是台币，显示成 NT$xx.xx，
         要和人民币一眼分得清。图片显示小缩略图，存的是 URL。
         双击行打开匹配弹窗。 */}}
    {{else}}
    <tr class="empty">
      <td colspan="11">
        还没有货运单。<br>
        <small>顺运宝同步方式尚未确定，当前可先手工录入用于联调。</small>
      </td>
    </tr>
    {{end}}
  </tbody>
</table>
</div>

{{/* TODO(骨架): 匹配弹窗 templates/syb/match_modal.html
     左边蝦皮规格，右边该商品 pdd_data 里的 PDD 规格下拉。
     三条硬规则：
       1. 右侧下拉选项来自 pdd_data.dimensions，不要写死"颜色/尺码"两个维度；
       2. 打开时先查 sku_mappings，有记录就自动带出并提示"已自动带出"；
       3. 该商品还没采集时，直接提示"请先到蝦皮数据模块采集"并给跳转链接，
          不要显示一个空下拉让人困惑。 */}}

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