<div class="breadcrumbs"><a href="/exams">Exams &amp; Results</a> <span class="sep">/</span> Create Exam</div>
<div class="page-header"><div><h1>Create Exam</h1><p class="desc">Set up a new exam for a class.</p></div></div>

<div class="card card-pad" style="max-width:640px;">
  <form method="POST" action="/exams">
    <div class="form-grid">
      <div class="form-group full"><label>Exam Name *</label><input type="text" name="name" required placeholder="e.g. Final Term Examination"></div>
      <div class="form-group full">
        <label>Class *</label>
        <select name="class_id" required>
          <% classes.forEach(function(c) { %><option value="<%= c.id %>"><%= c.name %> <%= c.section %></option><% }); %>
        </select>
      </div>
      <div class="form-group"><label>Start Date</label><input type="date" name="start_date"></div>
      <div class="form-group"><label>End Date</label><input type="date" name="end_date"></div>
    </div>
    <div class="form-actions">
      <a href="/exams" class="btn btn-outline">Cancel</a>
      <button type="submit" class="btn btn-primary"><i class="fa-solid fa-check"></i> Create Exam</button>
    </div>
  </form>
</div>
