<div class="flex items-center justify-between mb-8">
  <h1>Dashboard.</h1>
  <div class="flex gap-2">
    <a href="/angkatan/new" class="btn-primary btn-sm">+ Angkatan</a>
    <a href="/kelas/new" class="btn-secondary btn-sm">+ Kelas</a>
    <a href="/users/new" class="btn-secondary btn-sm">+ User</a>
  </div>
</div>

<% if (angkatanStats.length === 0) { %>
  <div class="card-soft text-center py-12">
    <p class="text-body mb-4">Belum ada angkatan.</p>
    <a href="/angkatan/new" class="btn-primary btn-sm">Buat angkatan pertama</a>
  </div>
<% } else { %>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
  <% angkatanStats.forEach(a => { %>
    <% const persen = a.total > 0 ? Math.round((a.terkirim / a.total) * 100) : 0; %>
    <div class="card">
      <div class="flex items-center justify-between mb-3">
        <h4>Angkatan <%= a.nomor %></h4>
        <span class="badge-neutral"><%= a.status %></span>
      </div>
      <p class="mono-label mb-4">Tahun <%= a.tahun %></p>
      <div class="flex items-center justify-between text-sm mb-2">
        <span class="text-body">Terkirim</span>
        <span class="text-ink font-medium"><%= a.terkirim %>/<%= a.total %></span>
      </div>
      <div class="progress-bar">
        <div class="progress-bar-fill" style="width:<%= persen %>%"></div>
      </div>
      <div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-hairline">
        <a href="/angkatan/<%= a.id %>/setting" class="btn-secondary btn-xs">Setting</a>
        <a href="/angkatan/<%= a.id %>/edit" class="btn-secondary btn-xs">Edit</a>
        <a href="/santri/import/<%= a.id %>" class="btn-secondary btn-xs">Import</a>
        <a href="/undangan/preview/angkatan/<%= a.id %>" target="_blank" class="btn-secondary btn-xs">Preview</a>
      </div>
    </div>
  <% }) %>
</div>
<% } %>
