{% extends "BASE.html" %}
{% load static %}
{% block 'titre_page' %} Gestion des congés {% endblock %}
{% block 'contenu' %}
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %}">{{message}}</div>
        {% endfor %}
    {% endif %}    
    <div class="row d-flex justify-content-center mb-4">              
        <div class="col text-white bg-danger d-flex flex-column justify-content-center align-items-center border rounded p-4">
            <div class="card-header fw-bold">
                <i class="bi bi-x-circle me-2"></i> Congés refusés
            </div>
            <div class="card-body text-center">
                <h5 class="fw-bold">{{ nombre_conges_refuse }}</h5>
            </div>
        </div>
        <div class="col text-white bg-warning d-flex flex-column justify-content-center align-items-center border rounded p-4 mx-2">
            <div class="card-header fw-bold">
                <i class="bi bi-hourglass-split me-2"></i> Congés en attente
            </div>
            <div class="card-body text-center">
                <h5 class="fw-bold">{{ nombre_conges_en_attente }}</h5>
            </div>
        </div>
        <div class="col text-white bg-success d-flex flex-column justify-content-center align-items-center border rounded p-4">
            <div class="card-header fw-bold">
                <i class="bi bi-check-circle me-2"></i> Congés Validé
            </div>
            <div class="card-body text-center">
                <h5 class="fw-bold">{{ nombre_conges_valide }}</h5>
            </div>
        </div>
        <div class="d-flex justify-content-between my-4">
            <h3><i class="bi bi-list-ul"></i> Liste des demandes de congé</h3>
            <button class='btn btn-primary' id="bouton-demande-conge">Demande de congé</button>
        </div>
        <div class="table-responsive">
            <div id="liste-demande-conges" data-url="{% url 'gestion_conges:liste-des-conges' %}"></div>
        </div>
    </div>
{% endblock %}
{% block 'modal' %}
    {% include 'gestion_conge/parts/modalDemandeConge.html' %}
    {% include 'gestion_conge/parts/modalDetailConge.html' %}
{% endblock %}
{% block 'js' %}
    <script type="text/javascript" src="{% static 'gestion_conge/js/index.js' %}"></script>
    <script type="text/javascript" src="{% static 'gestion_conge/js/detail_conges.js' %}"></script>
{% endblock %}