<div class="flex justify-between items-center mb-8">
  <h1>Kelas.</h1>
  <a href="/kelas/new" class="btn-primary btn-sm">+ Tambah</a>
</div>

<div class="card p-0 overflow-hidden">
<table class="table-base">
  <thead>
    <tr>
      <th>angkatan</th>
      <th>kelas</th>
      <th>jenjang</th>
      <th>wali kelas</th>
      <th>progress</th>
      <th>aksi</th>
    </tr>
  </thead>
  <tbody>
    <% if (kelasList.length === 0) { %>
      <tr><td colspan="6" class="text-center text-mute py-8">Belum ada kelas.</td></tr>
    <% } %>
    <% kelasList.forEach(k => { %>
      <% const persen = k.total > 0 ? Math.round((k.terkirim / k.total) * 100) : 0; %>
      <tr>
        <td class="text-body"><%= k.angkatanNomor %></td>
        <td class="font-medium"><%= k.nama %></td>
        <td class="text-body"><%= k.jenjang %></td>
        <td class="text-body"><%= k.waliNama || '—' %></td>
        <td>
          <div class="flex items-center gap-2">
            <div class="progress-bar w-16"><div class="progress-bar-fill" style="width:<%= persen %>%"></div></div>
            <span class="mono-label"><%= k.terkirim %>/<%= k.total %></span>
          </div>
        </td>
        <td>
          <div class="flex flex-wrap gap-1.5">
            <a href="/santri/kelas/<%= k.id %>" class="btn-secondary btn-xs">Santri</a>
            <a href="/kelas/<%= k.id %>/edit" class="btn-secondary btn-xs">Edit</a>
            <form action="/kelas/<%= k.id %>?_method=DELETE" method="POST" onsubmit="return confirm('Hapus kelas ini?')">
              <button class="btn-danger btn-xs">Hapus</button>
            </form>
          </div>
        </td>
      </tr>
    <% }) %>
  </tbody>
</table>
</div>
