{% extends "base.html" %}
{% load portal_extras %}
{% block title %}Students{% endblock %}
{% block nav_students %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h2><i class="fa-solid fa-users me-2"></i>Enrolled Students</h2>
    </div>
    <div class="d-flex gap-2">
        <a href="{% export_url %}" class="btn btn-success">
            <i class="fa-solid fa-file-excel me-1"></i> Export Excel
        </a>
        <a href="{% url 'portal:direct_enroll' %}" class="btn btn-primary">
            <i class="fa-solid fa-user-plus me-1"></i> Enroll Student Directly
        </a>
    </div>
</div>

<!-- Filters -->
<div class="portal-card mb-4">
    <div class="portal-card-body">
        <form method="get" 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" value="{{ search_query }}" class="form-control"
                       placeholder="Name, email, or student ID...">
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-semibold">Program</label>
                <select name="program" class="form-select">
                    <option value="">All Programs</option>
                    {% for prog in programs %}
                        <option value="{{ prog.pk }}" {% if current_program == prog.pk|stringformat:"s" %}selected{% endif %}>
                            {{ prog.name }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="fa-solid fa-filter me-1"></i> Filter
                </button>
            </div>
            <div class="col-md-2">
                <a href="{% url 'portal:student_list' %}" class="btn btn-outline-secondary w-100">Clear</a>
            </div>
        </form>
    </div>
</div>

<div class="portal-card">
    <div class="portal-card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>Student ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Program</th>
                        <th>Enrolled</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for enrollment in enrollments %}
                    <tr>
                        <td><code>{{ enrollment.student_number }}</code></td>
                        <td class="fw-semibold">{{ enrollment.student.get_full_name }}</td>
                        <td class="small text-muted">{{ enrollment.student.email }}</td>
                        <td class="small">{{ enrollment.program.name }}</td>
                        <td class="small text-muted">{{ enrollment.enrolled_at|date:"d M Y" }}</td>
                        <td>
                            <span class="badge {% if enrollment.is_active %}bg-success{% else %}bg-secondary{% endif %}">
                                {% if enrollment.is_active %}Active{% else %}Inactive{% endif %}
                            </span>
                        </td>
                        <td>
                            <a href="{% url 'portal:student_detail' enrollment.pk %}"
                               class="btn btn-xs btn-outline-primary">View</a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="text-center text-muted py-5">
                            <i class="fa-solid fa-users-slash fa-2x mb-2 d-block"></i>
                            No enrolled students found.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% if page_obj.has_other_pages %}
        <div class="d-flex justify-content-center py-3">
            <nav>
                <ul class="pagination pagination-sm mb-0">
                    {% 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 active"><span class="page-link">{{ page_obj.number }} / {{ 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>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}