<div class="space-y-6">
  <div>
    <h1 class="text-xl font-semibold text-slate-900">Dashboard Panitia</h1>
    <p class="text-sm text-slate-500 mt-0.5">Sesi yang ditugaskan kepada Anda.</p>
  </div>

  <a href="/scanner" class="flex items-center justify-center gap-2 w-full py-4 rounded-2xl bg-blue-600 text-white font-semibold text-base shadow-sm hover:bg-blue-700 transition">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7V5a1 1 0 011-1h2M4 17v2a1 1 0 001 1h2m10-14h2a1 1 0 011 1v2m-3 12h2a1 1 0 001-1v-2M7 12h10"/></svg>
    SCAN QR
  </a>

  <div class="space-y-3">
    <% 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 hover:border-blue-200 transition">
        <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="text-right shrink-0 ml-3">
          <div class="text-lg font-semibold text-blue-600"><%= s.hadir_count %></div>
          <div class="text-[11px] text-slate-400">hadir</div>
        </div>
      </a>
    <% }) %>
    <% if (sessions.length === 0) { %>
      <div class="text-center text-slate-400 py-12 bg-white border border-slate-200 rounded-2xl">
        Belum ada sesi yang ditugaskan kepada Anda oleh Super Admin.
      </div>
    <% } %>
  </div>
</div>
