{% extends 'parents/_layout.html.twig' %}

{% block title %}Sondages{% endblock %}

{% block page_title %}Sondages{% endblock %}

{% block body %}
    {% if lignes is empty %}
        <div class="card"><div class="card-body text-muted">Aucun sondage.</div></div>
    {% else %}
        <div class="d-flex flex-column gap-5">
            {% for ligne in lignes %}
                <div class="card">
                    <div class="card-header border-0 pt-6">
                        <div class="card-title"><h3>{{ ligne.sondage.question }}</h3></div>
                    </div>
                    <div class="card-body pt-0">
                        {% if ligne.aVote or not ligne.ouvert %}
                            {% if not ligne.aVote %}
                                <div class="text-muted fs-7 mb-2">Ce sondage est clôturé.</div>
                            {% endif %}
                            {% set totalVoix = 0 %}
                            {% for resultat in ligne.resultats %}
                                {% set totalVoix = totalVoix + resultat.voix %}
                            {% endfor %}
                            {% for resultat in ligne.resultats %}
                                {% set pourcentage = totalVoix > 0 ? (resultat.voix / totalVoix * 100)|round : 0 %}
                                <div class="mb-2">
                                    <div class="d-flex justify-content-between fs-7 mb-1">
                                        <span>{{ resultat.option.libelle }}</span>
                                        <span class="text-muted">{{ resultat.voix }} voix ({{ pourcentage }}%)</span>
                                    </div>
                                    <div class="progress" style="height: 8px;">
                                        <div class="progress-bar bg-primary" role="progressbar" style="width: {{ pourcentage }}%;"></div>
                                    </div>
                                </div>
                            {% endfor %}
                            <div class="text-muted fs-8 mt-1">{{ totalVoix }} vote{{ totalVoix > 1 ? 's' : '' }} au total</div>
                        {% else %}
                            <form method="post" action="{{ path('parents_sondages_voter', {id: ligne.sondage.id}) }}">
                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('parents_sondages_voter_' ~ ligne.sondage.id) }}">
                                <div class="d-flex flex-column gap-2 mb-4">
                                    {% for resultat in ligne.resultats %}
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="option_id" value="{{ resultat.option.id }}" required id="option-{{ resultat.option.id }}">
                                            <label class="form-check-label" for="option-{{ resultat.option.id }}">{{ resultat.option.libelle }}</label>
                                        </div>
                                    {% endfor %}
                                </div>
                                <button type="submit" class="btn btn-primary">Voter</button>
                            </form>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}