<div class="breadcrumbs"><a href="/classes">Classes</a> <span class="sep">/</span> <%= isEdit ? 'Edit' : 'Add New' %></div>
<div class="page-header"><div><h1><%= isEdit ? 'Edit Class' : 'Add New Class' %></h1><p class="desc">Define the class, section, room and homeroom teacher.</p></div></div>

<div class="card card-pad" style="max-width:640px;">
  <form method="POST" action="<%= isEdit ? '/classes/' + classItem.id + '?_method=PUT' : '/classes' %>">
    <div class="form-grid">
      <div class="form-group"><label>Class Name *</label><input type="text" name="name" value="<%= classItem.name || '' %>" required placeholder="e.g. Grade 5"></div>
      <div class="form-group"><label>Section</label><input type="text" name="section" value="<%= classItem.section || '' %>" placeholder="e.g. A"></div>
      <div class="form-group"><label>Room</label><input type="text" name="room" value="<%= classItem.room || '' %>" placeholder="e.g. Room 12"></div>
      <div class="form-group"><label>Capacity</label><input type="number" name="capacity" value="<%= classItem.capacity || 40 %>"></div>
      <div class="form-group full">
        <label>Homeroom Teacher</label>
        <select name="teacher_id">
          <option value="">Unassigned</option>
          <% teachers.forEach(function(t) { %>
            <option value="<%= t.id %>" <%= classItem.teacher_id == t.id ? 'selected' : '' %>><%= t.name %> — <%= t.subject %></option>
          <% }); %>
        </select>
      </div>
    </div>
    <div class="form-actions">
      <a href="/classes" class="btn btn-outline">Cancel</a>
      <button type="submit" class="btn btn-primary"><i class="fa-solid fa-check"></i> <%= isEdit ? 'Save Changes' : 'Add Class' %></button>
    </div>
  </form>
</div>
