<!-- templates/academics/class_list.html -->
{% extends 'base.html' %}
{% load static %}

{% block title %}Classes - Rapha-Bethel BNPS{% endblock %}

{% block extra_css %}
<style>
    .class-card {
        transition: transform 0.3s, box-shadow 0.3s;
        border-radius: 10px;
        overflow: hidden;
        border-left: 4px solid transparent;
    }
    .class-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }
    .class-card.english { border-left-color: #2196F3; }
    .class-card.bilingual { border-left-color: #4CAF50; }
    .class-card.french { border-left-color: #FF9800; }
    
    .stats-badge {
        position: absolute;
        top: 15px;
        right: 15px;
    }
    .section-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 25px;
    }
    .filter-section {
        background: #f8f9fc;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 25px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Classes</h1>
            <p class="text-muted">Manage all classes and sections</p>
        </div>
        <div>
            <a href="/admin/academics/schoolclass/add/" class="btn btn-primary">
                <i class="fas fa-plus"></i> Add New Class
            </a>
        </div>
    </div>

    <!-- Summary Stats -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card bg-primary text-white shadow">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <div class="small">Total Classes</div>
                            <div class="h3 mb-0">{{ classes|length }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-school fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-success text-white shadow">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <div class="small">Total Students</div>
                            <div class="h3 mb-0">{{ total_students|default:"0" }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-info text-white shadow">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <div class="small">English Section</div>
                            <div class="h3 mb-0">{{ english_count|default:"0" }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-language fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Class Grid -->
    <div class="row">
        {% for class in classes %}
        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card class-card {{ class.section_type }} h-100 shadow">
                <div class="card-body">
                    <div class="stats-badge">
                        <span class="badge bg-{% if class.section_type == 'english' %}primary{% elif class.section_type == 'bilingual' %}success{% else %}warning{% endif %}">
                            {{ class.get_section_type_display }}
                        </span>
                    </div>
                    
                    <h5 class="card-title mb-1">{{ class.name }}</h5>
                    <p class="text-muted small mb-3">Code: {{ class.code }}</p>
                    
                    <div class="row mb-3">
                        <div class="col-6">
                            <div class="text-center p-2 bg-light rounded">
                                <h6 class="mb-0">{{ class.student_count }}</h6>
                                <small class="text-muted">Students</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center p-2 bg-light rounded">
                                <h6 class="mb-0">{{ class.teacher_count|default:"0" }}</h6>
                                <small class="text-muted">Teachers</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <strong>Class Teacher:</strong><br>
                        {% if class.class_teacher %}
                            <small>{{ class.class_teacher.user.get_full_name }}</small>
                        {% else %}
                            <small class="text-muted">Not assigned</small>
                        {% endif %}
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="text-muted small">
                            <i class="fas fa-door-open"></i> {{ class.room_number|default:"No room" }}
                        </span>
                        <a href="{% url 'academics:class_detail' class.pk %}" class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-eye"></i> View Details
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="text-center py-5">
                <i class="fas fa-school fa-3x text-muted mb-3"></i>
                <h4 class="text-muted">No classes found</h4>
                <p class="text-muted">Click the "Add New Class" button to create your first class</p>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination if needed -->
    {% if is_paginated %}
    <nav aria-label="Page navigation" class="mt-4">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
                    <i class="fas fa-chevron-left"></i> Previous
                </a>
            </li>
            {% endif %}
            
            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
                {% else %}
                <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
                {% endif %}
            {% endfor %}
            
            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}">
                    Next <i class="fas fa-chevron-right"></i>
                </a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>
{% endblock %}