<div class="breadcrumbs"><a href="/exams">Exams &amp; Results</a> <span class="sep">/</span> <%= exam.name %></div>
<div class="page-header">
  <div>
    <h1><%= exam.name %></h1>
    <p class="desc"><%= exam.class_name %> <%= exam.class_section %> · <%= exam.start_date %> – <%= exam.end_date %></p>
  </div>
</div>

<div class="card" style="margin-bottom:18px;">
  <div class="card-head"><h3>Enter Marks</h3><div class="sub">Select a subject to enter or update marks</div></div>
  <div class="card-body" style="padding-bottom:0;">
    <form method="GET" action="/exams/<%= exam.id %>" class="filter-bar">
      <select name="subject" onchange="this.form.submit()">
        <% subjects.forEach(function(s) { %><option value="<%= s.name %>" <%= subject === s.name ? 'selected' : '' %>><%= s.name %></option><% }); %>
      </select>
    </form>
  </div>

  <% if (students.length === 0) { %>
    <div class="empty-state"><i class="fa-regular fa-face-frown"></i><h4>No active students in this class</h4></div>
  <% } else { %>
  <form method="POST" action="/exams/<%= exam.id %>/results">
    <input type="hidden" name="subject" value="<%= subject %>">
    <div style="padding: 16px 22px 0;">
      <div class="form-group" style="max-width:180px;">
        <label>Maximum Marks</label>
        <input type="number" name="max_marks" value="<%= (existingMap[students[0] && students[0].id] && existingMap[students[0].id].max_marks) || 100 %>">
      </div>
    </div>
    <div class="table-wrap">
      <table class="data-table">
        <thead><tr><th>Student</th><th>Admission No.</th><th style="width:160px;">Marks Obtained</th><th>Grade</th></tr></thead>
        <tbody>
          <% students.forEach(function(s) { %>
            <tr>
              <td><div class="row-title"><%= s.name %></div></td>
              <td><span class="id-code"><%= s.admission_no %></span></td>
              <td><input type="number" step="0.5" name="marks[s<%= s.id %>]" value="<%= existingMap[s.id] ? existingMap[s.id].marks_obtained : '' %>" placeholder="—"></td>
              <td><% if (existingMap[s.id]) { %><span class="badge badge-brand"><%= existingMap[s.id].grade %></span><% } else { %>—<% } %></td>
            </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
    <div class="form-actions" style="margin: 0 22px 22px;">
      <button type="submit" class="btn btn-primary"><i class="fa-solid fa-check"></i> Save Marks</button>
    </div>
  </form>
  <% } %>
</div>

<div class="card">
  <div class="card-head"><h3>All Recorded Results</h3></div>
  <div class="table-wrap">
    <table class="data-table">
      <thead><tr><th>Student</th><th>Subject</th><th>Marks</th><th>Grade</th></tr></thead>
      <tbody>
        <% if (allResults.length === 0) { %><tr><td colspan="4"><div class="empty-state"><i class="fa-regular fa-file-lines"></i><h4>No results recorded yet</h4></div></td></tr><% } %>
        <% allResults.forEach(function(r) { %>
          <tr>
            <td><%= r.student_name %></td>
            <td><span class="badge badge-sky"><%= r.subject %></span></td>
            <td><%= r.marks_obtained %> / <%= r.max_marks %></td>
            <td><span class="badge badge-brand"><%= r.grade %></span></td>
          </tr>
        <% }); %>
      </tbody>
    </table>
  </div>
</div>
