{% 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>피킹 요약 (SKU별 총 수량)</h2>
      <span class="erp-muted">총 {{ total_qty }}개 · {{ summary|length }} SKU</span>
    </div>
    <p class="erp-muted" style="margin:4px 0 12px;">이 화면을 보고 먼저 전체 상품을 꺼내세요.</p>
    <div class="erp-table-wrap">
      <table class="erp-table dsp-pick">
        <thead>
          <tr><th>Seller SKU</th><th>상품명</th><th style="text-align:right">수량</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">피킹할 상품이 없습니다.</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</section>
{% endblock %}