<section class="section">
  <div class="section-header">
    <p class="eyebrow">Live stats</p>
    <h1><%= event.title %></h1>
    <p>Actualizat la: <span id="updated-at"><%= stats.updated_at %></span></p>
  </div>
  <div class="cards-grid" id="stats-cards">
    <article class="card"><h3>In festival acum</h3><p><%= stats.inside_now %></p></article>
    <article class="card"><h3>Intrari azi</h3><p><%= stats.entries_today %></p></article>
    <article class="card"><h3>Iesiri azi</h3><p><%= stats.exits_today %></p></article>
    <article class="card"><h3>Scanari invalide</h3><p><%= stats.invalid_scans %></p></article>
    <article class="card"><h3>Top-up total</h3><p><%= stats.topups_total %> RON</p></article>
    <article class="card"><h3>Vanzari cashless</h3><p><%= stats.purchases_total %> RON</p></article>
    <article class="card"><h3>Nesincronizate local</h3><p><%= stats.local_gateway_unsynced %></p></article>
    <article class="card"><h3>Bratari active</h3><p><%= stats.wristbands_active %></p></article>
  </div>
</section>
<section class="section">
  <div class="section-header"><h2>Zone</h2></div>
  <div class="table-wrap"><table><thead><tr><th>Zona</th><th>Inside</th><th>Capacitate</th><th>Alerta</th></tr></thead><tbody>
    <% stats.by_zone.forEach((zone) => { %><tr><td><%= zone.name %></td><td><%= zone.inside %></td><td><%= zone.capacity_limit || '-' %></td><td><%= zone.capacity_alert ? 'CAPACITATE' : '-' %></td></tr><% }) %>
  </tbody></table></div>
</section>
<script>
setInterval(async () => {
  try {
    const response = await fetch('/api/festival/<%= event.id %>/live-stats/full');
    const data = await response.json();
    document.getElementById('updated-at').textContent = new Date(data.updated_at).toLocaleTimeString('ro-RO');
  } catch (error) {}
}, 8000);
</script>
