<div class="space-y-6">
  <div>
    <h1 class="text-xl font-semibold text-slate-900">Dashboard</h1>
    <p class="text-sm text-slate-500 mt-0.5">Ringkasan sistem absensi secara keseluruhan.</p>
  </div>

  <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
    <div class="bg-white border border-slate-200 rounded-2xl shadow-sm p-5">
      <div class="text-xs font-medium text-slate-500">Total Peserta</div>
      <div class="text-2xl font-semibold text-slate-900 mt-1"><%= totalParticipants %></div>
    </div>
    <div class="bg-white border border-slate-200 rounded-2xl shadow-sm p-5">
      <div class="text-xs font-medium text-slate-500">Total Kegiatan</div>
      <div class="text-2xl font-semibold text-slate-900 mt-1"><%= totalEvents %></div>
    </div>
    <div class="bg-white border border-slate-200 rounded-2xl shadow-sm p-5">
      <div class="text-xs font-medium text-slate-500">Sesi Aktif</div>
      <div class="text-2xl font-semibold text-slate-900 mt-1"><%= activeSessions %></div>
    </div>
    <div class="bg-white border border-slate-200 rounded-2xl shadow-sm p-5">
      <div class="text-xs font-medium text-slate-500">Absensi Hari Ini</div>
      <div class="text-2xl font-semibold text-blue-600 mt-1"><%= todayAttendance %></div>
    </div>
  </div>

  <div class="bg-white border border-slate-200 rounded-2xl shadow-sm p-5">
    <h2 class="text-sm font-semibold text-slate-900 mb-4">Absensi 7 Hari Terakhir</h2>
    <% if (last7.length === 0) { %>
      <p class="text-sm text-slate-400">Belum ada data absensi.</p>
    <% } else {
      const max = Math.max(...last7.map(d => d.c), 1);
    %>
      <div class="flex items-end gap-3 h-32">
        <% last7.forEach(function(d) { %>
          <div class="flex-1 flex flex-col items-center gap-1.5">
            <div class="text-[11px] text-slate-500"><%= d.c %></div>
            <div class="w-full bg-blue-500 rounded-t-md" style="height: <%= (d.c/max*90)+10 %>px"></div>
            <div class="text-[10px] text-slate-400"><%= d.d.slice(5) %></div>
          </div>
        <% }) %>
      </div>
    <% } %>
  </div>

  <div class="bg-white border border-slate-200 rounded-2xl shadow-sm">
    <div class="flex items-center justify-between p-5 pb-0">
      <h2 class="text-sm font-semibold text-slate-900">Kegiatan Terbaru</h2>
      <a href="/events" class="text-xs text-blue-600 font-medium hover:underline">Lihat semua</a>
    </div>
    <% if (recentEvents.length === 0) { %>
      <p class="text-sm text-slate-400 p-5">Belum ada kegiatan. <a href="/events" class="text-blue-600">Buat kegiatan pertama</a>.</p>
    <% } else { %>
      <div class="divide-y divide-slate-100 mt-3">
        <% recentEvents.forEach(function(e) { %>
          <a href="/events/<%= e.id %>" class="flex items-center justify-between px-5 py-3 hover:bg-slate-50 transition">
            <div>
              <div class="text-sm font-medium text-slate-800"><%= e.name %></div>
              <div class="text-xs text-slate-400 mt-0.5"><%= e.session_count %> sesi &middot; <%= e.attendance_count %> absensi</div>
            </div>
            <span class="text-[11px] px-2 py-0.5 rounded-full <%= e.status === 'active' ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-500' %>"><%= e.status %></span>
          </a>
        <% }) %>
      </div>
    <% } %>
  </div>
</div>
