<div class="page-header">
  <div>
    <div class="eyebrow">Academics</div>
    <h1>Exams &amp; Results</h1>
    <p class="desc">Schedule exams and manage student results.</p>
  </div>
  <a href="/exams/new" class="btn btn-primary"><i class="fa-solid fa-plus"></i> Create Exam</a>
</div>

<div class="card">
  <div class="table-wrap">
    <table class="data-table">
      <thead><tr><th>Exam</th><th>Class</th><th>Start Date</th><th>End Date</th><th>Graded</th><th></th></tr></thead>
      <tbody>
        <% if (exams.length === 0) { %><tr><td colspan="6"><div class="empty-state"><i class="fa-solid fa-file-pen"></i><h4>No exams scheduled</h4><p>Create your first exam to begin recording results.</p></div></td></tr><% } %>
        <% exams.forEach(function(e) { %>
          <tr>
            <td><div class="row-title"><%= e.name %></div></td>
            <td><span class="badge badge-violet"><%= e.class_name %> <%= e.class_section %></span></td>
            <td><%= e.start_date %></td>
            <td><%= e.end_date %></td>
            <td><%= e.graded_count %> student<%= e.graded_count === 1 ? '' : 's' %></td>
            <td><a href="/exams/<%= e.id %>" class="btn btn-outline btn-sm">Enter Results</a></td>
          </tr>
        <% }); %>
      </tbody>
    </table>
  </div>
</div>
