<h1 class="mb-8">Dashboard.</h1>

<% if (kelasStats.length === 0) { %>
  <div class="card-soft text-center py-12">
    <p class="text-body">Anda belum di-assign ke kelas manapun. Hubungi admin.</p>
  </div>
<% } else { %>
<div class="grid md:grid-cols-2 gap-4">
  <% kelasStats.forEach(k => { %>
    <% const persen = k.total > 0 ? Math.round((k.terkirim / k.total) * 100) : 0; %>
    <div class="card">
      <h4 class="mb-1"><%= k.nama %></h4>
      <p class="mono-label mb-4">Angkatan <%= k.angkatanNomor %> · <%= k.jenjang %></p>
      <div class="flex items-center justify-between text-sm mb-2">
        <span class="text-body">Terkirim</span>
        <span class="text-ink font-medium"><%= k.terkirim %>/<%= k.total %></span>
      </div>
      <div class="progress-bar mb-4">
        <div class="progress-bar-fill" style="width:<%= persen %>%"></div>
      </div>
      <a href="/santri/kelas/<%= k.id %>" class="btn-primary btn-sm w-full">Kirim Undangan</a>
    </div>
  <% }) %>
</div>
<% } %>
