{{ define "receipt" }}
<style>
  /* Layout-only styles; buttons/colors come from app.css so the receipt
     matches the rest of the till and theme plugins. */
  .receipt-wrap {max-width: 420px; margin: 0 auto;}
  .receipt-card {background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: .8rem .9rem;}
  .barcode {text-align: center; margin: 0.4rem 0;}
  .barcode .receipt-barcode {max-width: 100%; height: 44px;}
  .barcode small {display: block; letter-spacing: 3px; color: #374151;}
  .actions {display: flex; gap: 0.5rem; margin: .75rem 0 .25rem;}
  .receipt-lines {list-style: none; padding: 0; margin: 0.5rem 0;}
  .receipt-lines li {display: flex; justify-content: space-between; margin-bottom: 0.25rem;}
  .receipt-payments {border-top: 1px dashed #e5e7eb; margin-top: 0.75rem; padding-top: 0.75rem;}
  .receipt-payments h3 {margin: 0 0 0.35rem; font-size: 1rem;}
  .receipt-payments ul {list-style: none; padding: 0; margin: 0;}
  .receipt-payments li {display: flex; justify-content: space-between; margin-bottom: 0.35rem;}
  .receipt-payments small {color: #6b7280; display: block; text-align: end;}
  .receipt-legal {border-top: 1px dashed #e5e7eb; margin-top: 0.75rem; padding-top: 0.75rem; font-size: 0.85rem; color: #374151;}
  .receipt-legal-label {font-weight: 600; margin-bottom: 0.25rem;}
  .receipt-legal-line {margin: 0.15rem 0;}
  .receipt-printer-warning {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; padding: 0.5rem; border-radius: 4px; margin: 0.75rem 0;}
  .receipt-printer-message {font-size: 0.9rem;}
  @media print {
    /* Take the receipt OUT of the sale-screen grid: the fixed-height kiosk
       grid pins the basket to a narrow side column (the opposite side in
       RTL) and overflow:hidden clips anything past one page. Block flow +
       visible overflow prints the same centered receipt in LTR and RTL. */
    body, body.kiosk.sale-screen {background: #fff; overflow: visible !important;}
    .actions {display: none;}
    .nav {display: none !important;}
    .kiosk-header {display: none !important;}
    .pos-container {display: block !important; height: auto !important; min-height: 0 !important;}
    .pos-container > :not(#basket) {display: none !important;}
    .pos-container > .basket.receipt-view {overflow: visible !important; height: auto !important; max-height: none !important;}
    .receipt-printer-warning {display: none;}
  }
</style>
<div class="receipt-wrap">
  <div class="receipt-card">
    {{ if .StoreName }}<h2 class="receipt-store">{{ .StoreName }}</h2>{{ end }}
    {{ range .DesignHeader }}<div class="receipt-design-line"><small>{{ . }}</small></div>{{ end }}
    <h2>{{ T "receipt.title" }} #{{ .ReceiptNo }}</h2>
    {{ if .OriginalReceiptNo }}<p><small>{{ T "receipt.return_for" }}: {{ .OriginalReceiptNo }}</small></p>{{ end }}
    {{ if .ShowBarcode }}<div class="barcode">{{ barcodesvg .ReceiptNo }}<small>{{ .ReceiptNo }}</small></div>{{ end }}
    <ul class="receipt-lines">
      {{ range .Lines }}
      <li><span>{{ .Name }}{{ if .SKU }} <small class="muted">{{ .SKU }}</small>{{ end }} x{{ .Qty }}</span><span>{{ money .TotalAfterTax }}</span></li>
      {{ end }}
    </ul>
    <div class="totals">
      {{ if .ShowTax }}
      <div>{{ T "basket.subtotal" }}: {{ money .Subtotal }}</div>
      <div>{{ T "basket.tax" }}: {{ money .TaxTotal }}</div>
      {{ end }}
      {{ if gt .SaleDiscount 0 }}<div>{{ T "basket.discount" }}{{ if eq .SaleDiscountType "percent" }} ({{ bpPercent .SaleDiscountRaw }}){{ end }}: -{{ money .SaleDiscount }}</div>{{ end }}
      <div><strong>{{ T "basket.total" }}: {{ money .Total }}</strong></div>
    </div>
    {{ if .Payments }}
    <div class="receipt-payments">
      <h3>{{ T "receipt.payments" }}</h3>
      <ul>
        {{ range .Payments }}
          <li>
            <div>
              <strong>{{ .Method }}</strong>
              {{ if .Reference }}<small>{{ .Reference }}</small>{{ end }}
            </div>
            <div>
              {{ money .Applied }}
              {{ if gt .Change 0 }}<small>{{ T "receipt.change" }} {{ money .Change }}</small>{{ end }}
            </div>
          </li>
        {{ end }}
      </ul>
    </div>
    {{ end }}
    {{ if .LegalBlocks }}
    <div class="receipt-legal">
      {{ range .LegalBlocks }}
      <div class="receipt-legal-block">
        <div class="receipt-legal-label">{{ printf (T "receipt.legal.plugin_label") .PluginName .PluginVersion }}</div>
        {{ range .Lines }}
        <div class="receipt-legal-line">{{ . }}</div>
        {{ end }}
      </div>
      {{ end }}
    </div>
    {{ end }}
    {{ if .DesignFooter }}<div class="receipt-design-line" style="margin-top:.5rem"><small>{{ .DesignFooter }}</small></div>{{ end }}
    {{ if .PrinterUnavailable }}
    <div class="receipt-printer-warning">
      <span class="receipt-printer-message">{{ T "receipt.printer.unavailable" }}</span>
      <button class="btn secondary receipt-printer-retry" type="button" onclick="window.print()">{{ T "receipt.printer.retry" }}</button>
    </div>
    {{ end }}
    <div class="actions">
      <button class="btn primary" onclick="var b=this;fetch('/api/print/receipt/{{ .ReceiptNo }}',{method:'POST'}).then(function(r){if(r.ok){b.textContent='✓ {{ T "receipt.print" }}';}else{window.print();}}).catch(function(){window.print();})">{{ T "receipt.print" }}</button>
      <button class="btn secondary" onclick="window.location='/'">{{ T "receipt.new_customer" }}</button>
      <button class="btn secondary" onclick="window.location='/refund/{{ .ReceiptNo }}'">↩ {{ T "refund.title" }}</button>
    </div>
    <small>{{ T "receipt.auto_reset" }}</small>
  </div>
</div>
<script>
  setTimeout(function(){ window.location='/'; }, 60000);
</script>
{{ end }}