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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<div class="container py-4">

    <div class="card bg-dark bg-opacity-75 p-3 mb-4">
    <div class="row g-2 align-items-center">

        <div class="col-9">
            <form method="post" action="/submit" class="row g-2 align-items-center">
                <div class="col-md-3">
                    <input 
                        type="text"
                        name="query"
                        class="form-control bg-dark text-white"
                        placeholder="Nom de la machine">
                </div>
                <div class="col-md-3">
                    <select name="time" class="form-select bg-dark text-white" id="time-select">
                        {% 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-md-2">
                    <div class="form-check text-white">
                        <input class="form-check-input" type="checkbox" name="noshutdown" id="noshutdown">
                        <label class="form-check-label" for="noshutdown">Whitelist shutdown</label>
                    </div>
                </div>
                <div class="col-md-1">
                    <button type="submit" class="btn btn-sm btn-primary w-100">
                        <i class="bi bi-plus-lg"> Save</i>
                    </button>
                </div>
            </form>
        </div>

        <div class="col-3 gap-1 ms-auto">
            <form method="post" action="/submit-default" class="d-flex gap-2">
                <div class="col-md-4">
                    <select name="default-time" class="form-select bg-dark text-white flex-grow-1" id="default-time-select">
                        {% 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>
                <button type="submit" class="btn btn-sm btn-primary">
                    <i class="bi bi-save"> Save</i>
                </button>
            </form>
        </div>

    </div>
</div>

    <div class="card bg-dark bg-opacity-75 p-3">
        <h5 class="text-white mb-3">Liste des éléments</h5>
        <div class="row fw-bold text-white mb-2">
            <div class="col-4">Nom</div>
            <div class="col-3">Whitelist</div>
            <div class="col-3">Time</div>
            <div class="col-2 text-end">Actions</div>
        </div>
        <div class="table-items">
            {% for item in items %}
                <div class="row align-items-center py-2">
                    <div class="col-4 text-white">
                        {{ item.name }}
                    </div>

                    <div class="col-3">
                        {% if item.noshutdown == 1 %}
                            <span class="text-success">OUI</span>
                        {% else %}
                            <span class="text-danger">NON</span>
                        {% endif %}
                    </div>

                    <div class="col-3 text-white">
                        {% if item.noshutdown == 0 %}
                            {{ item.time }}
                        {% endif %}
                    </div>

                    <div class="col-2 text-end">
                        <form method="post" action="/delete" class="m-0">
                            <input type="hidden" name="item_name" value="{{ item.name }}">
                            <button type="submit" class="btn btn-sm btn-danger">
                                <i class="bi bi-x-lg"></i>Supprimer
                            </button>
                        </form>
                    </div>
                </div>
                {% if not loop.last %}
                    <hr class="border-secondary my-1">
                {% endif %}
            {% endfor %}
        </div>
    </div>

</div>

<script>
const tickCheckbox = document.getElementById('noshutdown'); // script pr desactiver la selection de l'heure si whitelist
const timeSelect = document.getElementById('time-select');

timeSelect.disabled = tickCheckbox.checked;

tickCheckbox.addEventListener('change', function() {
    timeSelect.disabled = this.checked;
});
</script>

{% endblock %}