<div class="max-w-2xl mx-auto">
  <h2 class="mb-2">Import santri.</h2>
  <p class="text-body mb-6">Angkatan <%= angkatanItem.nomor %> (<%= angkatanItem.tahun %>)</p>

  <div class="card-soft mb-4">
    <p class="text-sm font-medium text-ink mb-2">Petunjuk:</p>
    <ol class="list-decimal ml-5 space-y-1 text-sm text-body">
      <li>Download template CSV.</li>
      <li>Isi kolom: <code class="font-mono text-xs bg-canvas-soft-2 px-1 py-0.5 rounded">nis</code>, <code class="font-mono text-xs bg-canvas-soft-2 px-1 py-0.5 rounded">nama</code>, <code class="font-mono text-xs bg-canvas-soft-2 px-1 py-0.5 rounded">kelas</code>, <code class="font-mono text-xs bg-canvas-soft-2 px-1 py-0.5 rounded">nomor_wa</code>.</li>
      <li>Nama kelas harus <strong>persis sama</strong> dengan kelas yang sudah dibuat.</li>
      <li>Upload file CSV.</li>
    </ol>
  </div>

  <div class="flex gap-2 mb-4">
    <a href="/santri/template.csv" class="btn-secondary btn-sm">⬇ Download Template</a>
  </div>

  <% if (kelasList.length > 0) { %>
    <div class="card-soft mb-4">
      <p class="text-sm font-medium text-ink mb-2">Kelas tersedia:</p>
      <div class="flex flex-wrap gap-2">
        <% kelasList.forEach(k => { %>
          <span class="badge-neutral font-mono"><%= k.nama %></span>
        <% }) %>
      </div>
    </div>
  <% } else { %>
    <div class="flash-error mb-4">Belum ada kelas di angkatan ini. <a href="/kelas/new" class="underline">Buat kelas dulu →</a></div>
  <% } %>

  <div class="card">
    <form action="/santri/import/<%= angkatanItem.id %>" method="POST" enctype="multipart/form-data" class="space-y-4">
      <div>
        <label class="label">File CSV</label>
        <input type="file" name="file" accept=".csv" required class="input py-2" />
      </div>
      <div class="flex gap-2 pt-2">
        <button class="btn-primary btn-sm">Upload & Import</button>
        <a href="javascript:history.back()" class="btn-secondary btn-sm">Batal</a>
      </div>
    </form>
  </div>
</div>
