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

<div class="toolbar inner-code-toolbar" data-inner-code-page>
  <form class="inline" method="post" action="/inner-codes/import" enctype="multipart/form-data"
        data-upload-form>
    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
    <input type="hidden" name="page_size" value="{{.CurrentPageSize}}">
    <button type="button" data-inner-code-file-open>选择 Excel</button>
    <input id="inner-code-file" type="file" name="file" accept=".xlsx" required data-file-input hidden>
    <span class="file-field" data-file-name>未选择文件</span>
    <button type="submit" data-upload-submit>导入</button>
  </form>

  <form id="inner-code-filter" class="inline grow inner-code-filter-form" method="get" action="/inner-codes">
    <input type="hidden" name="page_size" value="{{.CurrentPageSize}}">
    <label for="inner-code-status">状态</label>
    <select id="inner-code-status" name="status">
      {{range .StatusOptions}}<option value="{{.Value}}" {{if eq .Value $.StatusFilter}}selected{{end}}>{{.Text}}</option>{{end}}
    </select>
    <label for="inner-code-date">业务日期</label>
    <input id="inner-code-date" type="date" name="date" value="{{.BusinessDate}}" data-inner-code-date>
    <label class="visually-hidden" for="inner-code-keyword">搜索订单号、档口、规格或入库码</label>
    <input id="inner-code-keyword" class="inner-code-search" type="text" name="q" value="{{.Keyword}}"
           placeholder="订单号 / 档口 / 规格 / 入库码">
    <a class="button-link" href="/inner-codes?date={{.BusinessDate}}&page_size={{.CurrentPageSize}}">清除</a>
    <button type="submit">搜索</button>
  </form>

  <form id="inner-code-match-form" method="post" action="/inner-codes/match" hidden>
    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
    <input type="hidden" name="date" value="{{.BusinessDate}}" data-inner-code-date-field>
    <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>
  <button type="submit" class="primary" form="inner-code-match-form"
          data-need-checked="inner-code-match" disabled>匹配已选 <span data-inner-code-match-count>0</span> 条</button>

  <form id="inner-code-apply-form" method="post" action="/inner-codes/apply" hidden>
    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
    <input type="hidden" name="date" value="{{.BusinessDate}}" data-inner-code-date-field>
    <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>
  <button type="button" data-modal-open="inner-code-apply-modal" data-need-checked="inner-code-apply"
          data-inner-code-apply-open disabled>回写已选 <span data-inner-code-selected-count>0</span> 条</button>

  <form id="inner-code-delete-form" method="post" action="/inner-codes/delete" hidden
        data-confirm-delete="将删除 {n} 条档口入库码记录。删除不会撤销顺运宝已写入的快递单号，也不会取消正在回写的请求；重新导入相同数据可以恢复。"
        data-confirm-delete-action="inner-code-delete">
    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
    <input type="hidden" name="date" value="{{.BusinessDate}}" data-inner-code-date-field>
    <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>
  <button type="submit" class="danger" form="inner-code-delete-form"
          data-need-checked="inner-code-delete" disabled>删除已选 <span data-inner-code-delete-count>0</span> 条</button>
</div>

{{if .FeedbackSuccess}}
<div class="notice inner-code-toast" role="status" aria-live="polite"
     data-auto-dismiss-toast data-transient-feedback data-transient-query="feedback message">
  {{.FeedbackMessage}}
</div>
{{end}}

{{if .FeedbackError}}
<div class="modal-backdrop" id="inner-code-feedback-error-modal" data-auto-open-modal
     data-transient-feedback data-transient-query="feedback message" hidden>
  <section class="modal modal-narrow" role="alertdialog" aria-modal="true"
           aria-labelledby="inner-code-feedback-error-title"
           aria-describedby="inner-code-feedback-error-message">
    <div class="modal-head">
      <h2 id="inner-code-feedback-error-title">档口入库码操作未完成</h2>
      <button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
    </div>
    <div class="modal-body">
      <p class="missing" id="inner-code-feedback-error-message">{{.FeedbackMessage}}</p>
      <p class="hint">系统不会因本弹窗自动重复匹配或回写。请按提示处理后重新选择记录。</p>
    </div>
    <div class="modal-foot">
      <button type="button" data-modal-close autofocus>关闭</button>
    </div>
  </section>
</div>
{{end}}

<div class="table-wrap inner-code-table-wrap" role="region" aria-label="档口入库码记录列表" tabindex="0">
<table class="inner-code-table">
  <thead>
    <tr>
      <th class="col-check"><input type="checkbox" data-check-all aria-label="全选当前页记录"></th>
      <th>业务日期</th>
      <th>订单号</th>
      <th>档口及货号</th>
      <th>Excel 颜色尺码</th>
      <th>顺运宝规格</th>
      <th>档口入库码</th>
      <th>远端原值</th>
      <th>状态</th>
      <th>结果 / 原因</th>
      <th>更新时间</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    {{range .Rows}}
    <tr {{if or (eq .Status "failed") (eq .Status "needs_check")}}class="row-warn"{{end}}>
      <td class="col-check">
        <input type="checkbox" value="{{.ID}}" data-inner-code-id="{{.ID}}"
               data-select-action="inner-code-delete {{if .CanMatch}}inner-code-match{{end}}{{if .CanApply}} inner-code-apply{{end}}"
               data-inner-code-old-value="{{if .HasRemoteOldCode}}1{{else}}0{{end}}"
               aria-label="选择订单 {{.OrderNumber}}">
      </td>
      <td>{{.BusinessDate}}</td>
      <td>{{.OrderNumber}}</td>
      <td class="truncate" title="{{.Stall}}">{{.Stall}}</td>
      <td class="truncate" title="{{.SpecRaw}}">{{.SpecRaw}}</td>
      <td class="truncate" title="{{.SybSpec}}">{{.SybSpec}}</td>
      <td>{{.InnerCode}}</td>
      <td>{{.RemoteInnerCode}}</td>
      <td><span class="status-pill {{.StatusClass}}">{{.StatusText}}</span></td>
      <td class="inner-code-message"><span class="truncate" title="{{.ResultMessage}}">{{.ResultMessage}}</span></td>
      <td>{{.UpdatedAt}}</td>
      <td>
        {{if .CanRecheck}}
        <form method="post" action="/inner-codes/recheck">
          <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
          <input type="hidden" name="id" value="{{.ID}}">
          <input type="hidden" name="date" value="{{$.BusinessDate}}">
          <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}}">
          <button type="submit" class="link-button">重新核对</button>
        </form>
        {{else}}—{{end}}
      </td>
    </tr>
    {{else}}
    <tr class="empty"><td colspan="12">
      {{if .IsFiltered}}
      当前筛选条件下没有记录。<br><small>请清除状态或关键词后再试。</small>
      {{else if .HasAny}}
      当前业务日期没有记录。<br><small>请选择其他日期，或导入这个日期的 Excel。</small>
      {{else}}
      还没有档口入库码记录。<br><small>选择业务日期并导入线下 Excel 后开始匹配。</small>
      {{end}}
    </td></tr>
    {{end}}
  </tbody>
</table>
</div>

<div class="modal-backdrop" id="inner-code-apply-modal" hidden>
  <section class="modal modal-narrow" role="dialog" aria-modal="true" aria-labelledby="inner-code-apply-title">
    <div class="modal-head">
      <h2 id="inner-code-apply-title">确认回写档口入库码</h2>
      <button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
    </div>
    <div class="modal-body">
      <p class="confirm-box">将回写 <strong data-inner-code-confirm-count>0</strong> 条记录，其中
        <strong data-inner-code-replace-count>0</strong> 条有旧快递单号，需要先删除旧值再写入。</p>
      <ul>
        <li>每条写入前会重新读取顺运宝详情并核验商品。</li>
        <li>写入后会再次读取；只有远端值一致才标记“已回写”。</li>
        <li class="missing">超时或结果不确定时只标记“需核对”，不会自动重复写入。</li>
      </ul>
    </div>
    <div class="modal-foot">
      <button type="button" data-modal-close>取消</button>
      <button type="submit" class="primary" form="inner-code-apply-form">确认回写</button>
    </div>
  </section>
</div>

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