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


{% block content %}
    {% for message in messages %}
        <div class="alert alert-{{message.tags}} alert-dismissible fade show mt-5" role="alert">
            <strong>{{ message }}</strong>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    {% endfor %}
    <div class="container my-5">
        <div class="card shadow mt-5">
            <div class="card-header text-center fw-bold fs-1 sms-bg-primary sms-text-icon mb-3">
                Students
            </div>
            
            <form class="p-3" action="" method="post">
                {% csrf_token %}
                <select class="form-select" required name="shift">
                    <option selected>Select Shift</option>
                    {% for shift in shifts %}
                        <option value="{{ shift.0 }}">{{ shift.1 }}</option>
                    {% endfor %}
                </select>
                <select class="form-select mt-3" required name="class">
                    <option selected>Select Class</option>
                    {% for class in classes %}
                        <option value="{{ class.0 }}">{{ class.1 }}</option>
                    {% endfor %}
                </select>
                <select class="form-select mt-3" required name="section">
                    <option selected>Select Section</option>
                    {% for section in sections %}
                        <option value="{{ section.0 }}">{{ section.1 }}</option>
                    {% endfor %}
                </select>

                <div class="d-flex justify-content-end mt-3">
                    <button type="submit" class="btn rounded-pill sms-btn-primary p-2">Search</button>
                </div>
            </form>

            {% if students %}
                <div class="p-3">
                    <h4 class="ms-3 mb-5">Showing students for, <br><br> Shift: <b>{{ students.0.shift}}</b> <br> Class: <b>{{ students.0.enrolled_class }}</b> <br> Section: <b>{{ students.0.section }}</b></h4>
                    <table class="table table-bordered p-2" style="background-color: #f8fafd !important;">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Roll</th>
                                <th>gender</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for student in students %}
                                <tr>
                                    <td>{{ student.name }}</td>
                                    <td>{{ student.roll }}</td>
                                    <td>{{ student.gender }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock content %}