{% extends "base.html" %}
{% block title %}My Students{% endblock %}
{% block nav_teacher_students %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h2><i class="fa-solid fa-users me-2"></i>My Students</h2>
        <p class="text-muted mb-0">Students enrolled in your programs</p>
    </div>
</div>

<!-- Filters -->
<form method="get" class="portal-card mb-4">
    <div class="portal-card-body">
        <div class="row g-3 align-items-end">
            <div class="col-md-5">
                <label class="form-label small fw-semibold">Search</label>
                <input type="text" name="q" class="form-control form-control-sm"
                       placeholder="Name or student ID…" value="{{ search_query }}">
            </div>
            <div class="col-md-4">
                <label class="form-label small fw-semibold">Program</label>
                <select name="program" class="form-select form-select-sm">
                    <option value="">All My Programs</option>
                    {% for prog in my_programs %}
                    <option value="{{ prog.pk }}"
                        {% if current_program == prog.pk|stringformat:"s" %}selected{% endif %}>
                        {{ prog.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3 d-flex gap-1">
                <button type="submit" class="btn btn-primary btn-sm flex-grow-1">
                    <i class="fa-solid fa-filter me-1"></i> Filter
                </button>
                {% if search_query or current_program %}
                <a href="{% url 'portal:teacher_students' %}" class="btn btn-outline-secondary btn-sm" title="Clear">
                    <i class="fa-solid fa-xmark"></i>
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</form>

<div class="portal-card">
    <div class="portal-card-body p-0">
        {% if enrollments %}
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Student</th>
                        <th>Student ID</th>
                        <th>Program</th>
                        <th>Level</th>
                        <th>Enrolled</th>
                    </tr>
                </thead>
                <tbody>
                    {% for enrollment in enrollments %}
                    <tr>
                        <td>
                            <div class="fw-semibold">{{ enrollment.student.get_full_name }}</div>
                            <div class="text-muted small">{{ enrollment.student.email }}</div>
                        </td>
                        <td><code class="small">{{ enrollment.student_number }}</code></td>
                        <td class="small">{{ enrollment.program.name }}</td>
                        <td>
                            <span class="badge bg-primary-subtle text-primary-emphasis">
                                {{ enrollment.program.get_level_display }}
                            </span>
                        </td>
                        <td class="small text-muted">{{ enrollment.enrolled_at|date:"d M Y" }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-5 text-muted">
            <i class="fa-solid fa-users fa-2x mb-3 d-block"></i>
            <p class="mb-0">No students found.</p>
        </div>
        {% endif %}
    </div>
</div>

{% if is_paginated %}
<nav 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 }}&q={{ search_query }}&program={{ current_program }}">Previous</a>
        </li>
        {% endif %}
        <li class="page-item disabled">
            <span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
        </li>
        {% if page_obj.has_next %}
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.next_page_number }}&q={{ search_query }}&program={{ current_program }}">Next</a>
        </li>
        {% endif %}
    </ul>
</nav>
{% endif %}
{% endblock %}