{% extends "erp_base.html" %}

{% block head_extra %}
<style>
  .dsp-pick td.sku { font-size:18px;font-weight:700;color:#0f172a;white-space:nowrap; }
  .dsp-pick td.qty { font-size:18px;font-weight:700;text-align:right;color:#2563eb;white-space:nowrap; }
</style>
{% endblock %}

{% block content %}
<section class="dsp">
  {% include "dispatch/_nav.html" %}

  <div class="erp-card" style="max-width:560px;">
    <div class="cpg-card-head" style="display:flex;justify-content:space-between;align-items:center;">
      <h2 data-ko="피킹 요약 (SKU별 총 수량)" data-en="Picking Summary (total qty by SKU)">피킹 요약 (SKU별 총 수량)</h2>
      <span class="erp-muted"><span data-ko="총" data-en="Total">총</span> {{ total_qty }} · {{ summary|length }} SKU</span>
    </div>
    <p class="erp-muted" style="margin:4px 0 12px;" data-ko="이 화면을 보고 먼저 전체 상품을 꺼내세요."
       data-en="Pick all items first using this list.">이 화면을 보고 먼저 전체 상품을 꺼내세요.</p>
    <div class="erp-table-wrap">
      <table class="erp-table dsp-pick">
        <thead>
          <tr><th>Seller SKU</th><th data-ko="상품명" data-en="Product">상품명</th>
              <th style="text-align:right" data-ko="수량" data-en="Qty">수량</th></tr>
        </thead>
        <tbody>
          {% for r in summary %}
          <tr>
            <td class="sku">{{ r.seller_sku }}</td>
            <td class="erp-muted">{{ r.product_name or '—' }}</td>
            <td class="qty">{{ r.total_qty }}</td>
          </tr>
          {% endfor %}
          {% if not summary %}
          <tr><td colspan="3" class="erp-muted" data-ko="피킹할 상품이 없습니다." data-en="No items to pick.">피킹할 상품이 없습니다.</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</section>
{% endblock %}