{% 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">Espaços Acadêmicos Livres</small></b>
                </legend>

                <form method="post" action="{% url 'agenda' %}">
                    {% 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">
                            <button type="submit" class="btn btn-primary w-100" style="font-size: 0.75rem;">Buscar</button>
                        </div>
                    </div>
                </form>

                <form method="post" action="#">
                    {% csrf_token %}
                    {% if horarios_livres %}
                        <div class="table-responsive">
                            <legend style="font-size: 16px; text-align: center; margin-top: 10px;">
                                <b>Espaços Acadêmicos Livres na {{ dia_semana }}</b>
                            </legend>
                            <table class="table table-striped table-bordered mt-3">
                                <thead>
                                    <tr>
                                        <th>Aula</th>
                                        <th>Horário</th>
                                        <th>Local</th>
                                        <th style="text-align: center;">Agendar</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for horario in horarios_livres %}
                                        <tr class="table-light">
                                            <td>{{ horario.aula }}</td>
                                            <td>{{ horario.horario }}</td>
                                            <td>{{ horario.local }}</td>
                                            <td>
                                                <button
                                                    type="submit"
                                                    class="btn btn-primary w-100"
                                                    style="font-size: 0.75rem;" disabled>
                                                    Agendar Espaço
                                                </button>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                    {% else %}
                        <p>Selecione o dia da semana!</p>
                    {% endif %}
                </form>
            </fieldset>
        </div>
    </div>
</div>
{% endblock %}