{% extends 'base.html' %}
{% load static %}

{% block title %}{{ school_class }} — Students{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">{{ school_class }}</h1>
            <p class="text-muted">
                {{ students.count }} student{{ students.count|pluralize }} &bull;
                {{ school_class.get_section_type_display }} &bull;
                {{ school_class.academic_year }}
            </p>
        </div>
        <div class="btn-group">
            <a href="{% url 'academics:class_detail' school_class.pk %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Class
            </a>
            <a href="{% url 'academics:assign_teacher' school_class.pk %}" class="btn btn-outline-primary">
                <i class="fas fa-chalkboard-teacher me-2"></i>Manage Teachers
            </a>
        </div>
    </div>

    <!-- Class Teacher Banner -->
    {% if school_class.class_teacher %}
    <div class="alert alert-info d-flex align-items-center mb-4">
        <i class="fas fa-user-tie fa-lg me-3"></i>
        <div>
            <strong>Class Teacher:</strong> {{ school_class.class_teacher.user.get_full_name }}
            &bull; {{ school_class.class_teacher.phone_number|default:"No phone" }}
        </div>
    </div>
    {% endif %}

    <!-- Stats Row -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Students</div>
                    <div class="h4 mb-0 font-weight-bold">{{ students.count }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Male</div>
                    <div class="h4 mb-0 font-weight-bold">{{ male_count|default:"0" }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Female</div>
                    <div class="h4 mb-0 font-weight-bold">{{ female_count|default:"0" }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Capacity</div>
                    <div class="h4 mb-0 font-weight-bold">{{ students.count }}/{{ school_class.capacity }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Student Table -->
    <div class="card shadow">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">Student Roster</h6>
            <div class="input-group" style="max-width:250px;">
                <input type="text" id="studentSearch" class="form-control form-control-sm" placeholder="Filter students...">
                <span class="input-group-text"><i class="fas fa-search"></i></span>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0" id="studentsTable">
                    <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>Student ID</th>
                            <th>Name</th>
                            <th>Gender</th>
                            <th>Date of Birth</th>
                            <th>Parent Contact</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for student in students %}
                        <tr>
                            <td class="text-muted">{{ forloop.counter }}</td>
                            <td><span class="badge bg-light text-dark">{{ student.student_id }}</span></td>
                            <td>
                                <div class="fw-bold">{{ student.get_full_name }}</div>
                            </td>
                            <td>
                                <i class="fas fa-{% if student.gender == 'M' %}mars text-primary{% elif student.gender == 'F' %}venus text-danger{% else %}genderless text-secondary{% endif %}"></i>
                                {{ student.get_gender_display }}
                            </td>
                            <td>{{ student.date_of_birth|date:"d M Y"|default:"—" }}</td>
                            <td>
                                {% with student.parents.filter(is_primary_contact=True).first as primary %}
                                {% if primary %}
                                <div class="small">{{ primary.get_full_name }}</div>
                                <div class="text-muted small"><i class="fas fa-phone me-1"></i>{{ primary.phone }}</div>
                                {% else %}
                                {% with student.parents.first as any_parent %}
                                {% if any_parent %}
                                <div class="small">{{ any_parent.get_full_name }}</div>
                                <div class="text-muted small"><i class="fas fa-phone me-1"></i>{{ any_parent.phone }}</div>
                                {% else %}
                                <span class="text-muted">—</span>
                                {% endif %}
                                {% endwith %}
                                {% endif %}
                                {% endwith %}
                            </td>
                            <td>
                                <span class="badge bg-{% if student.status == 'active' %}success{% else %}secondary{% endif %}">
                                    {{ student.get_status_display }}
                                </span>
                            </td>
                            <td>
                                <a href="{% url 'students:student_detail' student.pk %}" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-eye"></i>
                                </a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="8" class="text-center py-4 text-muted">
                                <i class="fas fa-user-graduate fa-2x mb-2 d-block"></i>
                                No students enrolled in this class yet.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
document.getElementById('studentSearch').addEventListener('keyup', function() {
    const query = this.value.toLowerCase();
    document.querySelectorAll('#studentsTable tbody tr').forEach(row => {
        row.style.display = row.textContent.toLowerCase().includes(query) ? '' : 'none';
    });
});
</script>
{% endblock %}
{% endblock %}
