<!doctype html>
<html lang="ro">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#111827">
  <meta name="csrf-token" content="<%= csrfToken %>">
  <title>Eventor Scanner</title>
  <link rel="manifest" href="/public/scanner/manifest.json">
  <link rel="stylesheet" href="/public/assets/css/scanner.css">
</head>
<body class="scanner-shell">
  <main class="scanner-app" data-event-id="<%= event ? event.id : '' %>">
    <header class="scanner-topbar">
      <div>
        <div class="scanner-brand">Eventor Scanner</div>
        <div class="scanner-meta">Festival: <strong id="scanner-event-name"><%= event ? event.title : 'Neselectat' %></strong></div>
        <div class="scanner-meta">Poarta: <strong id="scanner-gate-name">-</strong></div>
        <div class="scanner-meta">Mod: <strong id="scanner-mode-label">INTRARE</strong></div>
      </div>
      <div class="scanner-connection" id="scanner-connection">
        <strong>SERVER CENTRAL</strong>
        <span>sincronizat</span>
      </div>
    </header>

    <input id="scanner-input" class="scanner-input" type="text" inputmode="none" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Scanner input">

    <section class="scanner-stage">
      <button id="scanner-focus-button" class="scanner-primary" type="button">SCANEAZA BILET</button>
      <div class="scanner-hint" id="scanner-hint">Astept cod QR / cod de bare / NFC</div>
      <div class="scanner-actions">
        <button id="manual-open" type="button">Introdu cod manual</button>
        <button id="camera-open" type="button">Camera scan</button>
        <button id="nfc-read" type="button" hidden>Citeste bratara NFC</button>
        <button id="bridge-nfc-read" type="button">NFC bridge</button>
      </div>
    </section>

    <%- include('result-card') %>

    <section class="scanner-history-panel">
      <div class="scanner-section-title">Ultimele 5 scanari</div>
      <ol id="scanner-history" class="scanner-history"></ol>
    </section>

    <section class="scanner-controls" aria-label="Configurare rapida">
      <label>Eveniment
        <select id="event-select">
          <% events.forEach((item) => { %>
            <option value="<%= item.id %>" <%= event && Number(item.id) === Number(event.id) ? 'selected' : '' %>><%= item.title %></option>
          <% }) %>
        </select>
      </label>
      <label>Poarta
        <select id="gate-select">
          <option value="">Fara poarta</option>
          <% gates.forEach((gate) => { %>
            <option value="<%= gate.id %>" data-name="<%= gate.name %>" data-type="<%= gate.type %>"><%= gate.name %> / <%= gate.type %></option>
          <% }) %>
        </select>
      </label>
      <label>Mod
        <select id="scan-mode">
          <option value="entry">Intrare</option>
          <option value="exit">Iesire</option>
          <option value="validate">Validare</option>
        </select>
      </label>
      <label>Sursa
        <select id="api-target" <%= permissions.canSwitchGateway ? '' : 'disabled' %>>
          <option value="central">Central</option>
          <option value="local_gateway">Local Gateway</option>
        </select>
      </label>
      <button id="setup-link" type="button">Setup</button>
      <button id="retry-button" type="button" disabled>Retry</button>
    </section>

    <dialog id="manual-dialog" class="scanner-dialog">
      <form method="dialog">
        <h2>Cod manual</h2>
        <input id="manual-token" type="text" autocomplete="off" placeholder="Token bilet">
        <div class="scanner-dialog-actions">
          <button value="cancel">Inchide</button>
          <button id="manual-submit" value="default">Valideaza</button>
        </div>
      </form>
    </dialog>

    <dialog id="camera-dialog" class="scanner-dialog">
      <form method="dialog">
        <h2>Camera scan</h2>
        <video id="camera-video" playsinline muted></video>
        <p id="camera-message">Camera porneste doar la cerere. BarcodeDetector este folosit daca browserul il suporta.</p>
        <div class="scanner-dialog-actions">
          <button id="camera-stop" value="cancel">Inchide</button>
        </div>
      </form>
    </dialog>
  </main>

  <script>
    window.EventorScanner = {
      csrfToken: "<%= csrfToken %>",
      eventId: "<%= event ? event.id : '' %>",
      operatorUserId: "<%= currentUser ? currentUser.id : '' %>",
      permissions: <%- JSON.stringify(permissions) %>,
      gates: <%- JSON.stringify(gates) %>,
      defaults: <%- JSON.stringify(deviceOptions.defaults) %>
    };
  </script>
  <script src="/public/assets/js/scanner-api.js"></script>
  <script src="/public/assets/js/scanner-result.js"></script>
  <script src="/public/assets/js/scanner-nfc.js"></script>
  <script src="/public/assets/js/scanner-device-input.js"></script>
</body>
</html>
