<div class="page-header">
  <div>
    <div class="eyebrow">Academics</div>
    <h1>Students</h1>
    <p class="desc"><%= total %> student<%= total === 1 ? '' : 's' %> on record</p>
  </div>
  <a href="/students/new" class="btn btn-primary"><i class="fa-solid fa-user-plus"></i> Add Student</a>
</div>

<div class="card">
  <div class="card-body" style="padding-bottom:0;">
    <form class="filter-bar" method="GET" action="/students">
      <div class="input-icon-wrap" style="flex:1; min-width:220px;">
        <i class="fa-solid fa-magnifying-glass"></i>
        <input type="search" name="q" value="<%= q %>" placeholder="Search by name or admission no.">
      </div>
      <select name="class_id" onchange="this.form.submit()">
        <option value="">All Classes</option>
        <% classes.forEach(function(c) { %>
          <option value="<%= c.id %>" <%= String(class_id) === String(c.id) ? 'selected' : '' %>><%= c.name %> <%= c.section %></option>
        <% }); %>
      </select>
      <select name="status" onchange="this.form.submit()">
        <option value="">All Status</option>
        <option value="active" <%= status === 'active' ? 'selected' : '' %>>Active</option>
        <option value="inactive" <%= status === 'inactive' ? 'selected' : '' %>>Inactive</option>
      </select>
      <button class="btn btn-outline" type="submit"><i class="fa-solid fa-filter"></i> Filter</button>
      <% if (q || class_id || status) { %><a href="/students" class="btn btn-ghost">Clear</a><% } %>
    </form>
  </div>

  <div class="table-wrap">
    <table class="data-table">
      <thead>
        <tr><th>Student</th><th>Admission No.</th><th>Class</th><th>Gender</th><th>Guardian</th><th>Contact</th><th>Status</th><th></th></tr>
      </thead>
      <tbody>
        <% if (students.length === 0) { %>
          <tr><td colspan="8"><div class="empty-state"><i class="fa-regular fa-folder-open"></i><h4>No students found</h4><p>Try adjusting your filters or add a new student.</p></div></td></tr>
        <% } %>
        <% students.forEach(function(s) { %>
          <tr>
            <td>
              <a href="/students/<%= s.id %>" class="row-person">
                <div class="avatar sm" style="background:linear-gradient(135deg, var(--sky), var(--brand));"><%= s.name.split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase() %></div>
                <div class="row-title"><%= s.name %></div>
              </a>
            </td>
            <td><span class="id-code"><%= s.admission_no %></span></td>
            <td><%= s.class_name ? s.class_name + ' ' + s.class_section : '—' %></td>
            <td style="text-transform:capitalize;"><%= s.gender || '—' %></td>
            <td><%= s.guardian_name || '—' %></td>
            <td><%= s.guardian_phone || '—' %></td>
            <td><span class="badge <%= s.status === 'active' ? 'badge-green' : 'badge-gray' %>"><%= s.status %></span></td>
            <td>
              <a href="/students/<%= s.id %>/edit" class="btn btn-ghost btn-sm"><i class="fa-solid fa-pen"></i></a>
            </td>
          </tr>
        <% }); %>
      </tbody>
    </table>
  </div>

  <% if (totalPages > 1) { %>
  <div class="pagination">
    <span>Page <%= pageNum %> of <%= totalPages %></span>
    <div style="display:flex; gap:8px;">
      <% if (pageNum > 1) { %><a class="btn btn-outline btn-sm" href="?page=<%= pageNum-1 %>&q=<%= q %>&class_id=<%= class_id %>&status=<%= status %>">Previous</a><% } %>
      <% if (pageNum < totalPages) { %><a class="btn btn-outline btn-sm" href="?page=<%= pageNum+1 %>&q=<%= q %>&class_id=<%= class_id %>&status=<%= status %>">Next</a><% } %>
    </div>
  </div>
  <% } %>
</div>
