{% extends "BASE.html" %}
{% load static %}     
{% block 'titre_page' %} Gestion des projets {% endblock %}
{% block 'contenu' %}
    {% 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 %}
    <h5 class="mb-4 fw-bold text-uppercase text-orange-dark">
        <i class="bi bi-kanban-fill me-2"></i> Suivi des Activités ({{ nom_projet }} )
    </h5>            
    <div class="row d-flex justify-content-center mb-4">
        <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">Budget Total (GNF)</span>
            <h3>{{ budget_total }}</h3>
        </div>
        <div class="col text-white bg-info d-flex flex-column justify-content-center align-items-center border rounded mx-3 p-4">
            <span class="fs-5">Budget RH (GNF)</span>
            <h3>{{ budget_RH }}</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">Budget Dépensé (GNF)</span>
            <h3>{{budget_depense}}</h3>
        </div>
    </div>
    <div class="row">
        <div class="mt-4 d-flex justify-content-between mb-3">
            <h5><i class="bi bi-people"></i> La liste des Activités</h5>
            <div>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAjoutActivite">
                    <i class="bi bi-plus-circle me-2"></i> Ajouter une Activité
                </button>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAjoutDocument">
                    <i class="bi bi-plus-circle me-2"></i> Ajouter un document
                </button>
                <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modalListeDocument">
                    Documents du projet
                </button>
            </div>
        </div>
    </div>
    
    <div class="table-responsive">
        <div id="tableau-liste-activite" data-urllisteactivite="{% url 'gestion_projet:liste-activites-projet' %}"></div>
    </div>
{% endblock %}
{% block 'modal' %}
    {% include "gestion_projet/parts/modalAjoutActivite.html" %}
    {% include "gestion_projet/parts/modalDetailActivite.html" %}
    {% include "gestion_projet/parts/modalAjoutDocument.html" %}
    {% include "gestion_projet/parts/modalMiseAJourDepense.html" %}
    {% include "gestion_projet/parts/modalAjoutLivrable.html" %}
    {% include "gestion_projet/parts/liste_document_projet.html" %}
    {% include "gestion_projet/parts/modalAnnulerActivite.html" %}
{% endblock %}
{% block 'js' %}
    <script type="text/javascript" src="{% static 'gestion_projet/js/suivi-activites.js' %}"></script>
    <script type="text/javascript" src="{% static 'gestion_projet/js/liste_documents_projet.js' %}"></script>
{% endblock %}