{% extends 'base.html' %}
{% block title %}Classes{% endblock %}
{% block page_title %}Classes{% endblock %}

{% block content %}
<div class="page-header">
<div class="page-header-left">
  <h1 class="page-title">Classes</h1>
  <p class="page-subtitle">All school classes and sections</p>
</div>
<a href="{% url 'class_add' %}" class="btn btn-primary">
  <i data-lucide="plus" style="width:15px;height:15px;"></i> New Class
</a>
</div>

<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;">
{% for cls in classes %}
<a href="{% url 'class_detail' cls.pk %}" style="text-decoration:none;">
  <div class="card" style="padding:20px;cursor:pointer;transition:all .2s;">
    <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;">
      <div style="width:44px;height:44px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--primary),var(--primary-light));display:flex;align-items:center;justify-content:center;color:white;font-size:18px;font-weight:700;">
        {{ cls.grade_level }}
      </div>
      <div>
        <div style="font-weight:600;font-size:15px;color:var(--text-primary);">{{ cls.name }}</div>
        <div style="font-size:12px;color:var(--text-muted);">Section {{ cls.section }}</div>
      </div>
    </div>
    <div style="display:flex;justify-content:space-between;font-size:13px;">
      <span style="color:var(--text-muted);">Students</span>
      <span style="font-we
Continuing seamlessly from inside the classes list template card, then completing all remaining templates and files.

ight:600;color:var(--text-primary);">{{ cls.student_count }}</span>
  </div>
  <div style="display:flex;justify-content:space-between;font-size:13px;margin-top:6px;">
    <span style="color:var(--text-muted);">Room</span>
    <span style="font-weight:500;color:var(--text-primary);">{{ cls.room_number|default:"—" }}</span>
  </div>
  <div style="display:flex;justify-content:space-between;font-size:13px;margin-top:6px;">
    <span style="color:var(--text-muted);">Year</span>
    <span style="font-weight:500;color:var(--text-primary);">{{ cls.academic_year }}</span>
  </div>
</div>
</a>
{% empty %}
<div style="grid-column:1/-1;">
  <div class="empty-state">
    <div class="empty-state-icon">🏫</div>
    <div class="empty-state-title">No classes yet</div>
    <div class="empty-state-text">Create your first class to get started</div>
  </div>
</div>
{% endfor %}
</div>
{% endblock %}