<div class="page-header">
  <div>
    <div class="eyebrow">Platform</div>
    <h1>Schools</h1>
    <p class="desc">Manage every campus running on EP School Management System.</p>
  </div>
  <a href="/schools/new" class="btn btn-primary"><i class="fa-solid fa-plus"></i> Add School</a>
</div>

<div class="stat-grid" style="grid-template-columns: repeat(2, 1fr);">
  <% var colors = ['brand','violet','sky','green','amber','red']; %>
  <% schools.forEach(function(s, i) { %>
    <div class="card card-pad" style="position:relative;">
      <div style="display:flex; justify-content:space-between; align-items:flex-start;">
        <div style="display:flex; gap:14px; align-items:center;">
          <div class="logo-mark" style="width:48px; height:48px; border-radius:12px; background:<%= s.theme_color %>; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:#fff; font-size:16px;"><%= s.code %></div>
          <div>
            <h3 style="font-size:16px;"><%= s.name %></h3>
            <div style="font-size:12px; color:var(--muted);"><%= s.address %></div>
          </div>
        </div>
        <form method="POST" action="/schools/<%= s.id %>?_method=DELETE" onsubmit="return confirm('Delete this school and all its data?');">
          <button class="btn btn-ghost btn-sm" type="submit"><i class="fa-solid fa-trash"></i></button>
        </form>
      </div>
      <div style="display:flex; gap:10px; margin-top:18px;">
        <span class="badge badge-brand"><%= s.student_count %> students</span>
        <span class="badge badge-violet"><%= s.teacher_count %> teachers</span>
        <span class="badge badge-sky"><%= s.class_count %> classes</span>
      </div>
      <div style="margin-top:14px; font-size:12.5px; color:var(--muted); display:flex; justify-content:space-between;">
        <span><i class="fa-solid fa-phone"></i> <%= s.phone %></span>
        <span>Est. <%= s.established_year %></span>
      </div>
    </div>
  <% }); %>
</div>
