<div class="page-header">
  <div>
    <div class="eyebrow">Academics</div>
    <h1>Classes</h1>
    <p class="desc"><%= classes.length %> class<%= classes.length === 1 ? '' : 'es' %> configured</p>
  </div>
  <a href="/classes/new" class="btn btn-primary"><i class="fa-solid fa-plus"></i> Add Class</a>
</div>

<% if (classes.length === 0) { %>
  <div class="card"><div class="empty-state"><i class="fa-solid fa-school"></i><h4>No classes yet</h4><p>Create your first class to start assigning students.</p></div></div>
<% } %>

<div class="stat-grid" style="grid-template-columns: repeat(3, 1fr);">
  <% var colors = ['brand','violet','sky','green','amber','red']; %>
  <% classes.forEach(function(c, i) { %>
    <div class="stat-card accent-<%= colors[i % colors.length] %>">
      <div class="corner-tab"></div>
      <div style="display:flex; justify-content:space-between; align-items:flex-start;">
        <div class="icon-badge"><i class="fa-solid fa-school"></i></div>
        <a href="/classes/<%= c.id %>/edit" class="btn btn-ghost btn-sm"><i class="fa-solid fa-pen"></i></a>
      </div>
      <div class="value" style="font-size:20px;"><%= c.name %> <%= c.section %></div>
      <div class="label"><%= c.room || 'Room unassigned' %> · Capacity <%= c.capacity %></div>
      <div style="margin-top:14px; display:flex; justify-content:space-between; align-items:center;">
        <span class="badge badge-brand"><%= c.student_count %> students</span>
        <span style="font-size:12px; color:var(--muted);"><%= c.teacher_name || 'No teacher assigned' %></span>
      </div>
      <div class="progress" style="margin-top:12px;"><span style="width: <%= Math.min(100, Math.round((c.student_count / c.capacity) * 100)) %>%; background: var(--accent);"></span></div>
    </div>
  <% }); %>
</div>
