{{define "shopee/color_mappings"}}
{{template "header" .}}

<form id="color-mapping-form" method="post" action="/shopee/color-mappings/save"
      data-color-mapping-form data-unavailable="{{if .V.UnavailableReason}}1{{end}}">
  <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
  <input type="hidden" name="goods_id" value="{{.V.ShopeeGoodsID}}">
  <input type="hidden" name="context_version" value="{{.V.ContextVersion}}">
  <input type="hidden" name="return_to" value="{{.ReturnTo}}">
</form>

<div class="toolbar color-mapping-toolbar">
  <a class="button-link" href="{{.ReturnTo}}">返回蝦皮数据</a>
  <h1>商品颜色匹配</h1>
  <label for="color-mapping-filter">显示</label>
  <select id="color-mapping-filter" data-color-mapping-filter>
    <option value="all">全部颜色</option>
    <option value="pending">待匹配</option>
    <option value="invalid">映射已失效</option>
    <option value="mapped">已匹配</option>
  </select>
  <span class="color-mapping-change-count" data-color-mapping-change-count role="status">尚未修改</span>
  <button type="submit" class="primary" form="color-mapping-form" data-color-mapping-save disabled>保存修改</button>
</div>

{{if .Message}}<p class="feedback success" role="status"><strong>保存成功</strong>{{.Message}}</p>{{end}}
{{if .Alert}}<p class="feedback error" role="alert" tabindex="-1" data-color-mapping-alert><strong>未保存</strong>{{.Alert}} 你的选择仍保留在页面中。</p>{{end}}

<section class="color-mapping-summary" aria-label="当前商品摘要">
  <div class="color-mapping-summary-card">
    <span>蝦皮商品</span>
    <strong title="{{.V.ShopeeTitle}}">{{.V.ShopeeTitle}}</strong>
    <small>商品 ID：{{.V.ShopeeGoodsID}}</small>
  </div>
  <div class="color-mapping-summary-card">
    <span>PDD 商品</span>
    <strong title="{{.V.PddTitle}}">{{if .V.PddGoodsID}}{{if .V.PddTitle}}{{.V.PddTitle}}{{else}}—{{end}}{{else}}未关联{{end}}</strong>
    <small>商品 ID：{{if .V.PddGoodsID}}{{.V.PddGoodsID}}{{else}}—{{end}}{{if .V.PddDimensionKey}} · 颜色维度：{{.V.PddDimensionKey}}{{end}}</small>
  </div>
  <div class="color-mapping-summary-card color-mapping-progress">
    <strong>{{.V.ValidCount}} / {{len .V.Rows}}</strong>
    <small>当前有效映射</small>
  </div>
</section>

{{if .V.UnavailableReason}}
<p class="feedback error" role="alert"><strong>暂时不能维护颜色映射</strong>{{.V.UnavailableReason}}。请返回蝦皮数据页处理 PDD 关联或采集后再试。</p>
{{else}}
<p class="guard-note">这里只维护商品颜色关系，不修改蝦皮或 PDD 的原始规格。颜色全部匹配也不等于可以采购；系统仍会按当前可购买的完整颜色、尺码组合生成采购规格。</p>
{{end}}

<div class="table-wrap color-mapping-table-wrap">
  <table class="color-mapping-table">
    <thead>
      <tr>
        <th>蝦皮颜色</th>
        <th>颜色来源</th>
        <th class="color-mapping-arrow" aria-label="映射到"></th>
        <th>PDD 可购买颜色</th>
        <th>状态 / 维护来源</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      {{range .V.Rows}}
      <tr data-color-mapping-row data-saved-status="{{.Status}}">
        <td>
          <strong>{{.ColorRaw}}</strong>
          <small class="color-mapping-key">身份键：{{.ColorKey}}</small>
        </td>
        <td>{{if .SourceText}}{{.SourceText}}{{else}}—{{end}}</td>
        <td class="color-mapping-arrow" aria-hidden="true">→</td>
        <td>
          <label class="color-mapping-target-label">为“{{.ColorRaw}}”选择 PDD 颜色
          <select class="color-mapping-select"
                  data-color-mapping-select data-color-key="{{.ColorKey}}" data-color-raw="{{.ColorRaw}}"
                  data-original-value="{{.OriginalValue}}" {{if $.V.UnavailableReason}}disabled{{end}}>
            <option value=""{{if not .SelectedValue}} selected{{end}}>请选择 PDD 颜色</option>
            {{if .SelectedInvalid}}<option value="{{.SelectedValue}}" selected disabled>原选择已不可用：{{.SelectedValue}}</option>{{end}}
            {{range .Groups}}
            <optgroup label="{{.Label}}">
              {{range .Options}}<option value="{{.Value}}" data-candidate data-base-label="{{.Label}}"{{if .Selected}} selected{{end}}>{{.Label}}</option>{{end}}
            </optgroup>
            {{end}}
          </select>
          </label>
        </td>
        <td>
          <span class="status-pill status-{{.Status}}" data-color-mapping-status>{{.StatusText}}</span>
          <small class="color-mapping-source">{{if .MappingText}}{{.MappingText}}{{else}}—{{end}}</small>
        </td>
        <td><button type="button" class="link-button" data-color-mapping-clear {{if or $.V.UnavailableReason (not .SelectedValue)}}disabled{{end}}>清除</button></td>
      </tr>
      {{else}}
      <tr class="empty"><td colspan="6">没有可用于匹配的蝦皮颜色。请先补全正式 SKU 颜色，或等待顺运宝同步到可确定解析的颜色规格。</td></tr>
      {{end}}
    </tbody>
  </table>
</div>

<p class="hint color-mapping-empty-filter" data-color-mapping-empty-filter hidden>当前筛选下没有颜色。</p>

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