<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
  <title>Scanner QR</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="/css/app.css" />
</head>
<body class="bg-slate-50 min-h-screen">
  <div class="sticky top-0 bg-white border-b border-slate-200 px-4 h-14 flex items-center justify-between z-10">
    <a href="/dashboard" class="text-slate-500 text-sm flex items-center gap-1">&larr; Kembali</a>
    <span class="font-semibold text-sm text-slate-900">Pilih Sesi</span>
    <span class="w-14"></span>
  </div>

  <div class="p-4 space-y-3 max-w-lg mx-auto">
    <% sessions.forEach(function(s) { %>
      <a href="/scanner/<%= s.id %>" class="flex items-center justify-between bg-white border border-slate-200 rounded-2xl shadow-sm p-4 active:bg-slate-50">
        <div>
          <div class="text-sm font-semibold text-slate-900"><%= s.event_name %></div>
          <div class="text-xs text-slate-500 mt-0.5"><%= s.name %> &middot; <%= s.session_date %> &middot; <%= s.start_time %>&ndash;<%= s.end_time %></div>
        </div>
        <div class="flex items-center gap-2 shrink-0">
          <span class="text-[11px] px-2 py-0.5 rounded-full <%= s.is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-500' %>"><%= s.is_active ? 'Aktif' : 'Nonaktif' %></span>
          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
        </div>
      </a>
    <% }) %>
    <% if (sessions.length === 0) { %>
      <div class="text-center text-slate-400 py-16">
        Belum ada sesi yang ditugaskan kepada Anda.
      </div>
    <% } %>
  </div>
</body>
</html>
