{% extends 'base.html' %}
{% block content %}
<div class="main-content">
    <section class="section">
        {% block entete %}
        <div class="row">
            <div class="col-12 col-sm-12 col-lg-12">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3>{{ reunion.type_reunion|title }}: {{ reunion.titre_reunion }}</h3>
                        <br>
                        <small>{{ reunion.date|date:"d/m/Y" }}</small>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Thème : {{ reunion.theme }}</h5>
                        <p class="card-text"><strong>Lieu :</strong> {{ reunion.lieu }}</p>
                        <p class="card-text"><strong>Durée :</strong> {{ reunion.duree }} heures</p>
                        <p class="card-text"><strong>Modérateur :</strong> {{ reunion.modérateur }}</p>
                        <p class="card-text"><strong>Régulateurs :</strong> {{ reunion.regulateurs|safe }}</p>
                        <p class="card-text"><strong>Statut :</strong> {{ reunion.statut }}</p>
                        <p class="card-text"><strong>Temps d'arrivée moyen :</strong> {{ reunion.temps_arrivee }}</p>
                        <p class="card-text"><strong>Nombre de prises de parole :</strong> {{ reunion.nombre_prises_parole }}</p>
                        <p class="card-text"><strong>Budget :</strong> {{ reunion.budget }} FCFA</p>
                        <div class="mt-5">
                            <h4>Liste des Participants ({{ reunion.participants.count }})</h4>
                            <table class="table table-bordered table-striped">
                                <thead class="thead-dark">
                                <tr>
                                    <th>#</th>
                                    <th>Nom</th>
                                    <th>Prénom</th>
                                    <th>Sexe</th>
                                    <th>Âge</th>
                                    <th>Provenance</th>
                                    <th>Activité</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for participant in reunion.participants.all %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ participant.nom }}</td>
                                    <td>{{ participant.prenom }}</td>
                                    <td>{{ participant.sexe }}</td>
                                    <td>{{ participant.age }}</td>
                                    <td>{{ participant.provenance }}</td>
                                    <td>{{ participant.activite }}</td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="7" class="text-center">Aucun participant enregistré.</td>
                                </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="mt-5">
                            <h4>Résumé Exécutif :</h4>
                            <div class="border p-3">
                                {{ reunion.resume_executif|safe }}
                            </div>
                        </div>

                    </div>

                    <div class="card-footer">
                        <div class="mt-12">
                            <h4>Enquête Liée :</h4>
                            {% if enquete %}

                                    <p><strong>Intitulé :</strong> {{ enquete.intitule }}</p>
                                    <p><strong>Cible :</strong> {{ enquete.get_cible_display }}</p>
                                    <p><strong>Acteurs :</strong> {{ enquete.acteurs }}</p>
                                    <p><strong>Lieu :</strong> {{ enquete.lieu }}</p>
                                    <p><strong>Indicateurs :</strong></p>
                                    <div class="border p-2">
                                        {{ enquete.indicateurs|safe }}
                                    </div>
                                    <p><strong>Nombre d'enquêtes :</strong> {{ enquete.nombre_enquetes }}</p>
                                    <p><strong>Période :</strong> {{ enquete.periode }}</p>
                                    {% if enquete.link_surveycto %}
                                    <div class="mt-12">
                                        <h5>Tableau de bord :</h5>
                                        <iframe
                                                title="{{ enquete.intitule }}"
                                                src="{{ enquete.link_surveycto }}"
                                                frameborder="0"
                                                allowFullScreen="true"
                                                class="iframe-full"
                                                style="width: 100%; height: 800px; border: 1px solid #ccc;">
                                        </iframe>
                                    </div>
                                    {% endif %}

                            {% else %}
                            <p class="text-danger">Aucune enquête liée à cette réunion.</p>
                            {% endif %}
                        </div>
                    </div>
                </div>

            </div>
        </div>
        {% endblock %}
        {% block board %}
        <div class="row">

        </div>
        {% endblock %}
        {% block chart %}

        {% endblock %}
        {% block tache %}

        {% endblock %}
        {% block ticket %}

        {% endblock %}
    </section>
</div>
{% endblock %}