{{ define "basket" }}
<div class="basket" id="basket">
  {{ if .ToastMessage }}
    <div class="toast info" id="toast-message">{{ .ToastMessage }}</div>
  {{ end }}
  <h2>{{ T "basket.title" }}</h2>
  <div class="basket-scroll">
    <table>
      <thead>
        <tr><th>{{ T "basket.col.item" }}</th><th>{{ T "basket.col.qty" }}</th><th>{{ T "basket.col.price" }}</th><th>{{ T "basket.col.total" }}</th><th></th></tr>
      </thead>
      <tbody id="basket-lines">
        {{ if .Lines }}
          {{ range .Lines }}
            <tr>
              <td class="line-item">
                {{ if .ImageURL }}<img class="line-thumb" src="{{ imgv .ImageURL }}" alt="" loading="lazy" />{{ else }}<span class="line-thumb line-thumb-empty"></span>{{ end }}
                <span class="line-text">
                  <span class="line-name">{{ .Name }}</span>
                  <small class="muted">{{ .SKU }}</small>
                </span>
              </td>
              <td>
                <input class="qty-input" type="number" name="qty" value="{{ printf "%.2f" .Qty }}" min="0" step="{{ if .IsWeighed }}0.01{{ else }}1{{ end }}"
                       hx-post="/api/pos/line"
                       hx-vals='{"code":"{{ .SKU }}"}'
                       hx-include="closest tr"
                       hx-target="#basket"
                       hx-swap="outerHTML" />
                <input class="disc-input" type="number" name="discount" value="{{ .LineDiscount }}" min="0" step="1"
                       title="{{ T "basket.discount_hint" }}" placeholder="{{ T "basket.discount_short" }}"
                       hx-post="/api/pos/line"
                       hx-vals='{"code":"{{ .SKU }}"}'
                       hx-include="closest tr"
                       hx-target="#basket"
                       hx-swap="outerHTML" />
              </td>
              <td>{{ money .PriceCents }}</td>
              <td>{{ money .LineTotal }}</td>
              <td><button class="btn danger btn-x" title="{{ T "basket.remove" }}" hx-post="/api/pos/remove" hx-vals='{"code":"{{ .SKU }}"}' hx-target="#basket" hx-swap="outerHTML">✕</button></td>
            </tr>
          {{ end }}
        {{ else }}
          <tr><td colspan="5" class="empty">{{ T "basket.empty" }}</td></tr>
        {{ end }}
      </tbody>
    </table>
  </div>
  <div class="totals">
    {{ if .CustomerName }}<div>{{ T "basket.customer" }}: {{ .CustomerName }}</div>{{ end }}
    <div>{{ T "basket.subtotal" }}: {{ money .Subtotal }}</div>
    {{ if gt .Discount 0 }}
      <div>
        {{ T "basket.discount" }}{{ if eq .DiscountType "percent" }} ({{ bpPercent .DiscountRaw }}){{ end }}: -{{ money .Discount }}
      </div>
    {{ end }}
    <div>{{ T "basket.tax" }}: {{ money .Tax }}</div>
    <div class="total" data-minor="{{ .Total.Minor }}">{{ T "basket.total" }}: {{ money .Total }}</div>
  </div>
  <!-- "Customers also buy" — reloads with every basket swap (local data only) -->
  <div id="suggest-strip" hx-get="/ui/suggestions" hx-trigger="load" hx-swap="outerHTML"></div>
</div>
{{ end }}