<div class="space-y-6">
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-xl font-semibold text-slate-900"><%= currentUser.role === 'super_admin' ? 'Kelola Kegiatan' : 'Kegiatan Saya' %></h1>
      <p class="text-sm text-slate-500 mt-0.5">Daftar kegiatan beserta sesi absensi.</p>
    </div>
    <% if (currentUser.role === 'super_admin') { %>
      <button onclick="document.getElementById('modalAdd').classList.remove('hidden')" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700">+ Kegiatan Baru</button>
    <% } %>
  </div>

  <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
    <% events.forEach(function(e) { %>
      <a href="/events/<%= e.id %>" class="bg-white border border-slate-200 rounded-2xl shadow-sm p-5 hover:shadow-md hover:border-blue-200 transition block">
        <div class="flex items-start justify-between">
          <h3 class="text-sm font-semibold text-slate-900 leading-snug"><%= e.name %></h3>
          <span class="text-[11px] px-2 py-0.5 rounded-full shrink-0 ml-2 <%= e.status === 'active' ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-500' %>"><%= e.status %></span>
        </div>
        <p class="text-xs text-slate-500 mt-1"><%= e.location || 'Lokasi belum diatur' %></p>
        <div class="flex items-center gap-3 mt-4 text-xs text-slate-500">
          <span><%= e.session_count %> sesi</span>
          <span>&middot;</span>
          <span><%= e.start_date || '-' %></span>
        </div>
      </a>
    <% }) %>
    <% if (events.length === 0) { %>
      <div class="col-span-full text-center text-slate-400 py-12 bg-white border border-slate-200 rounded-2xl">
        Belum ada kegiatan<% if (currentUser.role==='admin') { %> yang ditugaskan kepada Anda<% } %>.
      </div>
    <% } %>
  </div>
</div>

<% if (currentUser.role === 'super_admin') { %>
<div id="modalAdd" class="hidden fixed inset-0 bg-slate-900/40 flex items-center justify-center z-40 px-4">
  <div class="bg-white rounded-2xl shadow-xl w-full max-w-md p-6">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-sm font-semibold text-slate-900">Kegiatan Baru</h3>
      <button onclick="document.getElementById('modalAdd').classList.add('hidden')" class="text-slate-400 hover:text-slate-600">&times;</button>
    </div>
    <form method="POST" action="/events" class="space-y-3">
      <div><label class="block text-xs font-medium text-slate-600 mb-1">Nama Kegiatan</label><input name="name" required placeholder="Mis. PKKMB STKIP PGRI Pacitan 2026" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
      <div><label class="block text-xs font-medium text-slate-600 mb-1">Deskripsi</label><textarea name="description" rows="2" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm"></textarea></div>
      <div><label class="block text-xs font-medium text-slate-600 mb-1">Lokasi</label><input name="location" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
      <div class="grid grid-cols-2 gap-3">
        <div><label class="block text-xs font-medium text-slate-600 mb-1">Tanggal Mulai</label><input type="date" name="start_date" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
        <div><label class="block text-xs font-medium text-slate-600 mb-1">Tanggal Selesai</label><input type="date" name="end_date" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
      </div>
      <div class="flex justify-end gap-2 pt-2">
        <button type="button" onclick="document.getElementById('modalAdd').classList.add('hidden')" class="px-4 py-2 rounded-lg bg-slate-100 text-slate-700 text-sm font-medium">Batal</button>
        <button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium">Simpan</button>
      </div>
    </form>
  </div>
</div>
<% } %>
