<section class="section">
  <div class="section-header">
    <p class="eyebrow">Admin</p>
    <h1>Bratari NFC - <%= event.title %></h1>
  </div>
  <form class="filters" onsubmit="return assignWristband(event)">
    <select name="ticket_id" required>
      <option value="">Alege bilet</option>
      <% tickets.forEach((ticket) => { %><option value="<%= ticket.id %>"><%= ticket.code %> - <%= ticket.holder_name %></option><% }) %>
    </select>
    <input name="uid" placeholder="UID bratara" required>
    <button type="submit">Asociaza</button>
  </form>
</section>
<section class="section">
  <div class="table-wrap">
    <table>
      <thead><tr><th>ID</th><th>Public code</th><th>Bilet</th><th>Status</th><th>Emisa</th></tr></thead>
      <tbody>
        <% wristbands.forEach((wristband) => { %>
          <tr><td><%= wristband.id %></td><td><%= wristband.public_code %></td><td><%= wristband.ticket_code || '-' %></td><td><%= wristband.status %></td><td><%= wristband.issued_at || '-' %></td></tr>
        <% }) %>
      </tbody>
    </table>
  </div>
</section>
<script>
async function assignWristband(event) {
  event.preventDefault();
  const form = event.target;
  const response = await fetch('/api/nfc/assign', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'x-csrf-token': '<%= csrfToken %>' },
    body: JSON.stringify({ ticket_id: form.ticket_id.value, uid: form.uid.value })
  });
  if (!response.ok) alert('Asocierea a esuat.');
  window.location.reload();
}
</script>
