{% extends "BASE.html" %}
{% load static %}  
{% load tags_personnaliser %}
{% block 'titre_page' %} Gestion des projets {% endblock %}
{% block 'contenu' %}
<h3>Gestion des projets</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">Projets en cours</span>
        <h3>{{projet_en_cours}}</h3>
    </div>
    <div class="col text-white bg-success d-flex flex-column justify-content-center align-items-center border rounded p-4 mx-2">
        <span class="fs-5">Budget Total (GNF)</span>
        <h3>{{budget_total}}</h3>
    </div>
    <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">Personnel sous projet</span>
        <h3>{{nombre_personnel}}</h3>
    </div>
</div>
<div class="row mt-4">
    <div class="col d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-4" >La liste des projets </h5>
        {% if user|has_group:"ressource_humaine"  %}
            <div>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalProjet">    
                    <i class="bi bi-plus-circle"></i> Ajouter un projet
                </button>
                <button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#modalBailleur">
                    <i class="bi bi-person"></i> Ajouter un bailleur
                </button>
            </div>
        {% endif %}
    </div>
    <div class="row">
        <div class="col">
            <div id="tableau-liste-projet" data-url="{% url 'gestion_projet:liste-projet' %}"></div>
        </div>
    </div>
</div>
{% endblock %}
{% block 'modal' %}
    {% include "gestion_projet/parts/modalAjoutProjet.html" %}
    {% include "gestion_projet/parts/modalFinancement.html" %}
    {% include "gestion_projet/parts/creation_bailleur.html" %}
    {% include "gestion_projet/parts/modalDetailProjet.html" %}
{% endblock %}
{% block 'js' %}
    <script type="text/javascript" src="{% static 'gestion_projet/js/index.js' %}"></script>
    <script type="text/javascript" src="{% static 'gestion_projet/js/creation_projet.js' %}"></script>
    <script type="text/javascript" src="{% static 'gestion_projet/js/enregistrement_bailleur.js' %}"></script>
    <script type="text/javascript" src="{% static 'gestion_projet/js/enregistrement_financement.js' %}"></script>
{% endblock %}