<section class="section">
  <p class="eyebrow">Server central scanner</p>
  <h1>Festival Scanner</h1>
  <form id="festival-scan-form" class="checkout-form">
    <label>Mod
      <select name="mode">
        <option value="entry">Intrare</option>
        <option value="exit">Iesire</option>
        <option value="validate">Validare</option>
        <option value="validate">Zone Check</option>
      </select>
    </label>
    <label>Poarta
      <select name="gate_id">
        <option value="">Fara poarta</option>
        <% gates.forEach((gate) => { %><option value="<%= gate.id %>"><%= gate.name %> · <%= gate.type %> · <%= gate.zone_name || 'fara zona' %></option><% }) %>
      </select>
    </label>
    <label>Device <input name="scanner_device_id" autocomplete="off" placeholder="Device ID optional"></label>
    <label>Token QR <input name="token" autocomplete="off"></label>
    <label>Token NFC / bratara <input name="wristband_token" autocomplete="off"></label>
    <button type="submit">Scaneaza</button>
  </form>
  <div id="festival-scan-result" class="scan-result-panel neutral">Asteapta scanare.</div>
</section>

<script>
  window.EventorFestivalScanner = {
    eventId: "<%= eventId %>",
    csrfToken: "<%= csrfToken %>"
  };
</script>
<script src="/public/assets/js/festival-scanner.js"></script>
