<div class="page-header">
  <div>
    <div class="eyebrow">Academics</div>
    <h1>Teaching Staff</h1>
    <p class="desc"><%= teachers.length %> teacher<%= teachers.length === 1 ? '' : 's' %> on record</p>
  </div>
  <a href="/teachers/new" class="btn btn-primary"><i class="fa-solid fa-user-plus"></i> Add Teacher</a>
</div>

<div class="card">
  <div class="card-body" style="padding-bottom:0;">
    <form class="filter-bar" method="GET" action="/teachers">
      <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, ID or subject">
      </div>
      <button class="btn btn-outline" type="submit"><i class="fa-solid fa-filter"></i> Search</button>
    </form>
  </div>
  <div class="table-wrap">
    <table class="data-table">
      <thead><tr><th>Teacher</th><th>Employee ID</th><th>Subject</th><th>Qualification</th><th>Phone</th><th>Status</th><th></th></tr></thead>
      <tbody>
        <% if (teachers.length === 0) { %><tr><td colspan="7"><div class="empty-state"><i class="fa-regular fa-folder-open"></i><h4>No teachers found</h4></div></td></tr><% } %>
        <% teachers.forEach(function(t) { %>
          <tr>
            <td>
              <a href="/teachers/<%= t.id %>" class="row-person">
                <div class="avatar sm" style="background:linear-gradient(135deg, var(--violet), var(--brand));"><%= t.name.split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase() %></div>
                <div class="row-title"><%= t.name %></div>
              </a>
            </td>
            <td><span class="id-code"><%= t.employee_id %></span></td>
            <td><span class="badge badge-violet"><%= t.subject %></span></td>
            <td><%= t.qualification || '—' %></td>
            <td><%= t.phone || '—' %></td>
            <td><span class="badge <%= t.status === 'active' ? 'badge-green' : 'badge-gray' %>"><%= t.status %></span></td>
            <td><a href="/teachers/<%= t.id %>/edit" class="btn btn-ghost btn-sm"><i class="fa-solid fa-pen"></i></a></td>
          </tr>
        <% }); %>
      </tbody>
    </table>
  </div>
</div>
