<div class="max-w-lg mx-auto">
  <h2 class="mb-6"><%= title %>.</h2>

  <% if (locals.isWaliOnly) { %>
    <div class="flash-success mb-4">Sebagai wali kelas, Anda hanya bisa mengubah nomor WA.</div>
  <% } %>

  <div class="card">
    <form action="<%= item ? `/santri/${item.id}?_method=PUT` : '/santri' %>" method="POST" class="space-y-4">
      <% if (!locals.isWaliOnly) { %>
        <div>
          <label class="label">Kelas</label>
          <select name="kelasId" required class="input">
            <option value="">— Pilih —</option>
            <% kelasList.forEach(k => { %>
              <option value="<%= k.id %>" <%= item && item.kelasId === k.id ? 'selected' : '' %>>Angkatan <%= k.angkatanNomor %> — <%= k.nama %></option>
            <% }) %>
          </select>
        </div>
        <div>
          <label class="label">NIS</label>
          <input type="text" name="nis" required class="input" value="<%= item ? item.nis : '' %>" />
        </div>
        <div>
          <label class="label">Nama Santri</label>
          <input type="text" name="nama" required class="input" value="<%= item ? item.nama : '' %>" />
        </div>
      <% } %>
      <div>
        <label class="label">Nomor WhatsApp Orang Tua</label>
        <input type="tel" name="nomorWa" required class="input" value="<%= item ? item.nomorWa : '' %>" placeholder="08xxxxxxxxxx" />
      </div>
      <div class="flex gap-2 pt-2">
        <button class="btn-primary btn-sm"><%= item ? 'Simpan' : 'Tambah' %></button>
        <a href="<%= item ? `/santri/kelas/${item.kelasId}` : 'javascript:history.back()' %>" class="btn-secondary btn-sm">Batal</a>
      </div>
    </form>
  </div>
</div>
