{% extends "BASE.html" %}
{% load static %}     
{% block 'titre_page' %} Gestion des projets {% endblock %}
{% block 'css' %}
{% endblock %}
{% block 'contenu' %}
    <div class="col px-2">      
        <h3>Gestion des employés</h3>
        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        {% endif %}

        <div class="row">
            <div class="col text-white bg-success d-flex flex-column justify-content-center align-items-center border rounded p-4">
                <span class="fs-5">Nombre d'employés</span>
                <h3>{{ nombre_employes }}</h3>
            </div>
            <div class="col text-white bg-info d-flex flex-column justify-content-center align-items-center border rounded p-4 mx-3">
                <span class="fs-5">Nombre de prestataires</span>
                <h3>{{ nombre_cps }}</h3>
            </div>
            <div class="col text-white bg-warning d-flex flex-column justify-content-center align-items-center border rounded p-4">
                <span class="fs-5">Nombre de stagiaires</span>
                <h3>{{ nombre_stage }}</h3>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col d-flex justify-content-between mb-3">
                <h3> 
                    <i class="bi bi-people"></i>
                    La liste des employés
                </h3>
                <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modalListeDesContratExpirants" id="boutonContratExpirants" data-urlexpirants="{% url 'gestion_employe:liste-contrat-expirants' %}">
                    Contrats proches de la fin <span class="badge badge-light">{{ nombre_expirants }}</span>
                </button>
            </div>
            <div class="row mb-2 d-flex justify-content-end">
                <div class="col">
                    <div class="row">
                        <div class="col d-flex justify-content-center">
                            <input class="form-control d-block" type="search" placeholder="Recherche par nom et prénom..." id="input-recherche">
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <div id="tableau_liste_employe" data-url={% url 'gestion_employe:liste-employes' %}></div>
            </div>
            </div>
        </div>
    </div> 
{% endblock %}
{% block 'modal' %}
    {% include "gestion_employe/parts/modalDetailEmploye.html" %}
    {% include "gestion_employe/parts/modalCreationContrat.html" %}
    {% include "gestion_employe/parts/modalAffectationProjet.html" %}
    {% include "gestion_employe/parts/modalDocument.html" %}
    {% include "gestion_employe/parts/modalListeContratExpirants.html" %}
{% endblock %}
{% block 'js' %}
<script type="text/javascript" src="{% static 'gestion_employe/js/index.js' %}"></script>
{% endblock %}