{{ define "content" }}
<div class="kiosk-header">
  <h1>{{ T "app.name" }}</h1>
  <div class="kiosk-actions">
    <button class="btn primary" data-testid="kiosk-checkout-start"
            hx-post="/api/pos/reset" hx-target="#basket" hx-swap="outerHTML"
            onclick="setTimeout(function(){var b=document.querySelector('input[name=code]'); if(b) b.focus();}, 150)">
      {{ T "kiosk.checkout_start" }}</button>
    <a class="btn secondary" data-testid="kiosk-inventory-link" href="/inventory">{{ T "kiosk.inventory" }}</a>
    <div class="status-pill" data-testid="status-indicator">{{ T "status.online" }}</div>
  </div>
</div>

  <div class="pos-container" data-currency="{{ or .currency "GBP" }}">
    <!-- Basket loads on page load -->
    <div class="basket" hx-get="/ui/basket" hx-trigger="load" hx-swap="outerHTML"></div>

    <!-- Product buttons panel loads on page load -->
    <div class="products" hx-get="/ui/buttons" hx-trigger="load" hx-swap="outerHTML"></div>

  <!-- Tender and Scan: fixed-height panel, tabs instead of stacked cards so
       it never scrolls. Split-tender element IDs are load-bearing (app.js). -->
  <div class="tender" x-data="{ tab: 'pay' }">
    <form class="scan-row" hx-post="/api/pos/scan" hx-target="#basket" hx-swap="outerHTML">
      <input type="text" name="code" placeholder="{{ T "tender.scan.barcode" }}" aria-label="{{ T "tender.scan.barcode" }}" autofocus required>
      <input type="number" name="qty" value="1" min="1" step="1" required title="{{ T "tender.scan.qty" }}" aria-label="{{ T "tender.scan.qty" }}">
      <button class="btn" type="submit">{{ T "tender.scan.add" }}</button>
      {{ if .aiIdentify }}
      <button class="btn secondary" type="button" id="ai-identify-open" hidden
              title="{{ T "ai.identify.button" }}">📷</button>
      {{ end }}
    </form>

    <div id="held-sales" hx-get="/ui/held" hx-trigger="load" hx-swap="outerHTML"></div>

    <div class="tab-bar" role="tablist">
      <button type="button" class="tab" :class="tab === 'pay' && 'active'" @click="tab = 'pay'">{{ T "tender.tab.pay" }}</button>
      <button type="button" class="tab" :class="tab === 'split' && 'active'" @click="tab = 'split'">{{ T "tender.tab.split" }}</button>
    </div>

    <div class="tab-panel" x-show="tab === 'pay'">
      <input type="hidden" id="offline-flag" name="offline" value="0">
      <div class="pay-grid">
        {{ range .payMethods }}
        <button class="btn pay-btn{{ if .PluginID }} pay-plugin{{ end }}" hx-post="/api/pos/tender"
                hx-vals='{"amount":0,"method":"{{ .ID }}"}' hx-include="#offline-flag"
                hx-target="#basket" hx-swap="outerHTML">{{ .Name }}</button>
        {{ else }}
        <button class="btn pay-btn" hx-post="/api/pos/tender" hx-vals='{"amount":0,"method":"cash"}' hx-include="#offline-flag" hx-target="#basket" hx-swap="outerHTML">{{ T "tender.cash" }}</button>
        <button class="btn pay-btn" hx-post="/api/pos/tender" hx-vals='{"amount":0,"method":"card"}' hx-include="#offline-flag" hx-target="#basket" hx-swap="outerHTML">{{ T "tender.card" }}</button>
        {{ end }}
      </div>
      <label class="offline-toggle">
        <input type="checkbox" id="offline-override"> {{ T "kiosk.offline" }}
      </label>
    </div>

    <div class="tab-panel" x-show="tab === 'split'" x-cloak id="split-tender-card">
      <form class="split-tender-form" id="split-tender-form" autocomplete="off">
        {{ $default := .paymentMethodDefault }}
        <div class="split-grid">
          <label>{{ T "tender.method" }}
            <select name="method" id="split-tender-method" data-default="{{ $default }}" required>
              {{ range .paymentMethods }}
                <option value="{{ . }}" {{ if eq . $default }}selected{{ end }}>{{ . }}</option>
              {{ end }}
            </select>
          </label>
          <label>{{ T "tender.amount" }}
            <input type="number" name="amount" min="{{ if eq currency.Decimals 0 }}1{{ else }}0.01{{ end }}" step="{{ if eq currency.Decimals 0 }}1{{ else }}0.01{{ end }}" placeholder="{{ if eq currency.Decimals 0 }}0{{ else }}0.00{{ end }}" required>
          </label>
          <label>{{ T "tender.change" }}
            <input type="number" name="change" min="0" step="{{ if eq currency.Decimals 0 }}1{{ else }}0.01{{ end }}" value="{{ if eq currency.Decimals 0 }}0{{ else }}0.00{{ end }}">
          </label>
          <label>{{ T "tender.reference" }}
            <input type="text" name="reference" placeholder="{{ T "tender.reference_placeholder" }}">
          </label>
        </div>
        <div class="split-controls">
          <button class="btn" type="button" id="split-tender-add">{{ T "tender.add_payment" }}</button>
          <button class="btn secondary" type="button" id="split-tender-fill">{{ T "tender.fill_remaining" }}</button>
        </div>
      </form>
      <div id="split-tender-payments" class="split-tender-payments empty">
        <p>{{ T "tender.no_pending" }}</p>
      </div>
      <div id="split-tender-status" class="split-tender-status" aria-live="polite"></div>
      <div class="split-controls">
        <button class="btn primary" type="button" id="split-tender-submit">{{ T "tender.complete_sale" }}</button>
        <button class="btn secondary" type="button" id="split-tender-clear">{{ T "common.clear" }}</button>
      </div>
    </div>

    <div class="tender-footer">
      <button class="btn secondary" hx-post="/api/pos/hold" hx-target="#basket" hx-swap="outerHTML">{{ T "hold.action" }}</button>
      <button class="btn secondary" hx-post="/api/pos/reset" hx-target="#basket" hx-swap="outerHTML">{{ T "tender.new_customer" }}</button>
    </div>
  </div>
</div>

{{ if .aiIdentify }}
<!-- Camera identify (assistive; opened on demand, never blocks checkout).
     Message strings ride on data-* so app.js stays locale-free. -->
<div id="ai-identify-overlay" class="ai-identify-overlay" hidden
     data-msg-searching="{{ T "ai.identify.searching" }}"
     data-msg-no-match="{{ T "ai.identify.no_match" }}"
     data-msg-suggested="{{ T "ai.identify.suggested" }}"
     data-msg-error="{{ T "ai.identify.error" }}"
     data-msg-camera-error="{{ T "ai.identify.camera_error" }}">
  <div class="ai-identify-panel">
    <h3>{{ T "ai.identify.title" }}</h3>
    <video id="ai-identify-video" autoplay playsinline muted></video>
    <div id="ai-identify-results" class="ai-identify-results"></div>
    <div id="ai-identify-status" class="ai-identify-status" aria-live="polite"></div>
    <div class="ai-identify-controls">
      <button type="button" class="btn primary" id="ai-identify-capture">{{ T "ai.identify.capture" }}</button>
      <button type="button" class="btn secondary" id="ai-identify-retake" hidden>{{ T "ai.identify.retake" }}</button>
      <button type="button" class="btn secondary" id="ai-identify-close">{{ T "ai.identify.close" }}</button>
    </div>
  </div>
</div>
{{ end }}

{{ end }}