<div class="max-w-lg mx-auto">
  <h2 class="mb-6"><%= title %>.</h2>
  <div class="card">
    <form action="<%= item ? `/kelas/${item.id}?_method=PUT` : '/kelas' %>" method="POST" class="space-y-4">
      <div>
        <label class="label">Angkatan</label>
        <select name="angkatanId" required class="input">
          <option value="">— Pilih —</option>
          <% angkatanList.forEach(a => { %>
            <option value="<%= a.id %>" <%= item && item.angkatanId === a.id ? 'selected' : '' %>>Angkatan <%= a.nomor %> (<%= a.tahun %>)</option>
          <% }) %>
        </select>
      </div>
      <div>
        <label class="label">Nama Kelas</label>
        <input type="text" name="nama" required class="input" value="<%= item ? item.nama : '' %>" placeholder="XII IPA 1" />
      </div>
      <div>
        <label class="label">Jenjang</label>
        <select name="jenjang" required class="input">
          <option value="SMP" <%= item && item.jenjang === 'SMP' ? 'selected' : '' %>>SMP</option>
          <option value="SMA" <%= item && item.jenjang === 'SMA' ? 'selected' : '' %>>SMA</option>
        </select>
      </div>
      <div>
        <label class="label">Wali Kelas</label>
        <select name="waliKelasUserId" class="input">
          <option value="">— Belum dipilih —</option>
          <% waliList.forEach(w => { %>
            <option value="<%= w.id %>" <%= item && item.waliKelasUserId === w.id ? 'selected' : '' %>><%= w.nama %> (<%= w.email %>)</option>
          <% }) %>
        </select>
      </div>
      <div class="flex gap-2 pt-2">
        <button class="btn-primary btn-sm"><%= item ? 'Simpan' : 'Tambah' %></button>
        <a href="/kelas" class="btn-secondary btn-sm">Batal</a>
      </div>
    </form>
  </div>
</div>
