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

<div class="card p-0 overflow-hidden">
<table class="table-base">
  <thead>
    <tr>
      <th>nomor</th>
      <th>tahun</th>
      <th>status</th>
      <th>aksi</th>
    </tr>
  </thead>
  <tbody>
    <% if (angkatanList.length === 0) { %>
      <tr><td colspan="4" class="text-center text-mute py-8">Belum ada data.</td></tr>
    <% } %>
    <% angkatanList.forEach(a => { %>
      <tr>
        <td class="font-medium">Angkatan <%= a.nomor %></td>
        <td class="text-body"><%= a.tahun %></td>
        <td><span class="badge-neutral"><%= a.status %></span></td>
        <td>
          <div class="flex flex-wrap gap-1.5">
            <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="/undangan/preview/angkatan/<%= a.id %>" target="_blank" class="btn-secondary btn-xs">Preview</a>
            <form action="/angkatan/<%= a.id %>?_method=DELETE" method="POST" onsubmit="return confirm('Hapus angkatan ini?')">
              <button class="btn-danger btn-xs">Hapus</button>
            </form>
          </div>
        </td>
      </tr>
    <% }) %>
  </tbody>
</table>
</div>
