{% extends "base.html" %}
{% block content %}

<div class="container py-4">

    <div class="card bg-dark bg-opacity-75 p-3 mb-4">
        <form method="post" action="/submit" class="row g-2 align-items-center justify-content-start">

            <div class="col-md-4">
                <input 
                    type="text"
                    name="query"
                    class="form-control bg-dark text-white"
                    placeholder="Nom de la machine">
            </div>

            <div class="col-md-2">
                <select name="time" class="form-select bg-dark text-white">
                    {% for hour in range(0, 24) %}
                        <option value="{{ '%02d:00'|format(hour) }}">{{ '%02d:00'|format(hour) }}</option>
                        <option value="{{ '%02d:30'|format(hour) }}">{{ '%02d:30'|format(hour) }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="col-auto">
                <button type="submit" class="btn btn-secondary">
                    Ajouter
                </button>
            </div>

        </form>
    </div>

    <div class="card bg-dark bg-opacity-75 p-3">
        <h5 class="text-white mb-3">Liste des éléments</h5>
        <div class="table-items">
            {% for name, time in items.items() %}
                <div class="d-flex justify-content-between align-items-center py-2">
                    <span class="text-white">{{ name }}</span>

                    <span class="text-white">{{ time }}</span>

                    <form method="post" action="/delete" class="m-0 p-0">
                        <input type="hidden" name="item_name" value="{{ item.name }}">
                        <input type="hidden" name="item_time" value="{{ item.time }}">
                        <button type="submit" class="btn btn-sm btn-danger">&times;</button>
                    </form>
                </div>
                {% if not loop.last %}
                    <hr class="border-secondary my-1">
                {% endif %}
            {% endfor %}
        </div>
    </div>

</div>

{% endblock %}