{% extends 'base.html' %}
{% block title %}{{ school_class }}{% endblock %}
{% block page_title %}Class Detail{% endblock %}

{% block content %}
<div class="page-header">
<div class="page-header-left">
<h1 class="page-title">{{ school_class.name }} — Section {{ school_class.section }}</h1>
<p class="page-subtitle">Grade {{ school_class.grade_level }} &middot; {{ school_class.academic_year }} &middot; Room {{ school_class.room_number|default:"N/A" }}</p>
</div>
<a href="{% url 'class_list' %}" class="btn btn-secondary">
<i data-lucide="arrow-left" style="width:15px;height:15px;"></i> Back
</a>
</div>

<div class="card">
<div class="card-header">
  <span class="card-title">👨‍🎓 Students in this class ({{ students.count }})</span>
  <a href="{% url 'student_add' %}" class="btn btn-primary btn-sm">
    <i data-lucide="user-plus" style="width:13px;height:13px;"></i> Add Student
  </a>
</div>
<div class="card-body" style="padding:0;">
  <table>
    <thead>
      <tr><th>Student</th><th>ID</th><th>Email</th><th>Status</th><th>Actions</th></tr>
    </thead>
    <tbody>
      {% for student in students %}
      <tr>
        <td>
          <div style="display:flex;align-items:center;gap:10px;">
            <div class="avatar-sm">{{ student.first_name|first }}</div>
            <span style="font-weight:500;">{{ student.full_name }}</span>
          </div>
        </td>
        <td><span class="badge badge-secondary">{{ student.student_id }}</span></td>
        <td style="font-size:13px;color:var(--text-secondary);">{{ student.email }}</td>
        <td>
          <span class="badge {% if student.status == 'active' %}badge-success{% else %}badge-secondary{% endif %}">
            {{ student.get_status_display }}
          </span>
        </td>
        <td>
          <a href="{% url 'student_detail' student.pk %}" class="btn btn-outline btn-sm">
            <i data-lucide="eye" style="width:13px;height:13px;"></i>
          </a>
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="5">
        <div class="empty-state" style="padding:32px;">
          <div class="empty-state-icon">👨‍🎓</div>
          <div class="empty-state-title">No students in this class</div>
        </div>
      </td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
</div>
{% endblock %}