<div class="modal fade" id="modalDetailActivite" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-orange-dark">
                <h5 class="modal-title">Détails de l'activité</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="">
                        <input type="hidden" id="idDetailActivite">
                        <div class="form-group mb-2">
                            <label>Titre :</label>
                            <input type="text" class="form-control" id="titreDetailActivite">
                        </div>
                        <div class="form-group mb-2">
                            <label>Description :</label>
                            <textarea class="form-control" id="descriptionDetailActivite"></textarea>
                        </div>
                         <div class="form-group mb-2">
                            <label>Date de début :</label>
                            <input type="date" class="form-control" id="date_debutDetailActivite">
                        </div>
                         <div class="form-group mb-2">
                            <label>Date de fin :</label>
                            <input type="date" class="form-control" id="date_finDetailActivite">
                        </div>
                        <div class="form-group mb-2">
                            <label>Statut:</label>
                            <input type="text" class="form-control" id="statutDetailActivite">
                        </div>
                        <div class="form-group mb-2">
                            <label>Budget prévu :</label>
                            <input type="number" class="form-control" id="budget_prevuDetailActivite">
                        </div>
                        <div class="form-group mb-2">
                            <label>Besoin de ressources matérielles:</label>
                            <textarea class="form-control" id="besoin_ressources_materiellesDetailActivite"></textarea>
                        </div>
                        <p><strong>Liste des livrables :</strong></p>
                        <div id="listeLivrables"></div>
                        <button class="btn btn-danger d-block mx-auto" id="btnAnnulerActivite">
                            Annuler cette activité
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" id="btnMiseAJourDepense">
                    <i class="bi bi-plus-circle"></i> Mise à jour du budget 
                </button>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAjouterLivrable">
                    <i class="bi bi-plus-circle"></i> Ajouter un livrable 
                </button>
            </div>
        </div>
    </div>
</div>