{% extends 'base.html' %}

{% block content %}

    <div>
        {% include "partials/menu.html" %}
    </div>

    <div class="container" style="margin-top: 20px;">
        <div class="row">
            <div class="col">
                <fieldset class="border rounded-3 p-3">
                    <legend class="float-none w-auto px-3">
                        <b><small class="text-muted">Quadro de Horários Por Docente</small></b>
                    </legend>

                        <form method="post">
                            {% csrf_token %}
                            <div class="row">
                                <div class="col">
                                    <select name="dia" class="form-select" style="font-size: 0.75rem;">
                                        <option value="Sel">Selecione o Dia</option>
                                        <option value="Seg">Segunda-Feira</option>
                                        <option value="Ter">Terça-Feira</option>
                                        <option value="Qua">Quarta-Feira</option>
                                        <option value="Qui">Quinta-Feira</option>
                                        <option value="Sex">Sexta-Feira</option>
                                    </select>
                                </div>
                                <div class="col">
                                    <select name="docente" class="form-select" style="font-size: 0.75rem;">
                                        <option selected disabled>Selecione o(a) Docente</option>
                                        {% for dado in dados %}
                                            <option value="{{ dado.id }}">{{ dado.nome }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col">
                                    <button type="submit" class="btn btn-primary w-100" style="font-size: 0.75rem;">Buscar</button>
                                </div>
                            </div>
                        </form>
                        
                        {% if horarios %}
                            <div class="table-responsive">
                                <legend style="font-size: 16px; text-align: center; margin-top: 10px;">
                                    <b>Professor(a) {{ nome_docente.nome }}</b>
                                </legend>
                                <table class="table table-striped table-bordered mt-3">
                                    <thead>
                                        <tr>
                                            <th scope="col">Aula - {{ dia }}</th>
                                            <th scope="col">Horário</th>
                                            <th scope="col">Disciplinas</th>
                                            <th scope="col">Turma</th>
                                            <th scope="col">Local</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for horario in horarios %}
                                            <tr>
                                                <td>{{ horario.aula }}</td>
                                                <td>{{ horario.horario }}</td>
                                                <td>{{ horario.disciplina }}</td>
                                                <td>{{ horario.turma }}</td>
                                                <td>{{ horario.local }}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            {% else %}
                                <p class="alert alert-warning mt-3">Nenhuma aula encontrada para os critérios selecionados.</p>
                            </div>
                        {% endif %}
                </fieldset>
            </div>
        </div>
    </div>

{% endblock %}