{% for key, statItem in liveStats %}
    <div class="accordion" id="statItem{{ key }}">
        <div class="accordion-item border-top-0 border-left-0 border-right-0 border-bottom-1">
            <h2 class="accordion-header" id="item-live-{{ key }}">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-item-stat-{{ key }}" aria-expanded="false" aria-controls="collapse-item-stat-{{ key }}">
                    <p class="mb-0 w-100 d-flex flex-wrap" style="justify-content: space-between; align-items: center;">
                        <span class="{% if 100 == statItem.all_progression %}  bloc-title-ellipsis text-decoration-line-through mx-2 {% else %} bloc-title-ellipsis mx-2 {% endif %}">
                            {{ statItem.room }} - {{statItem['result']|length }} session(s)
                        </span>
                        {# progerssion of all session in one room #}
                        {% if statItem.all_progression == 100 %}
                            <span class="mx-2 text-light btn btn-sm btn-success">100 %</span>
                        {% elseif statItem.all_progression > 0 %}
                            <span class="mx-2 btn btn-sm btn-primary">{{ statItem.all_progression }} %</span>
                        {% else %}
                            <span class="mx-2 btn btn-sm btn-primary">0 %</span>
                        {% endif %}
                        {# duration of participant session in one room #}
                        {% if statItem.all_participations_duration > 0 %}
                            <span class="mx-2 btn btn-sm btn-info">{{ statItem.all_participations_duration }} minutes</span>
                        {% endif %}
                    </p>
                </button>
            </h2>
            <div id="collapse-item-stat-{{ key }}" class="accordion-collapse collapse" aria-labelledby="item-stat-{{ key }}" data-bs-parent="#statItem{{ key }}">
                <div class="accordion-body">
                    {# contetnt item #}
                    {% for keySession,item in statItem['result'] %}
                        <div class="row">
                            <div class="col-sm-4">
                                <span class="m-2 badge rounded-pill bg-secondary"><i class="mdi mdi-calendar menu-icon"></i> Session du {{item.startSessionDate|date("d/m/Y H:i") }}</span>
                            </div>
                            <div class="col-sm-4">
                                {% if item.session_participation_progression == 100 %}
                                    <span class="m-2 badge rounded-pill bg-success text-light">progerssion : 100 %</span>
                                {% elseif item.session_participation_progression > 0 %}
                                    <span class="m-2 badge rounded-pill bg-secondary">progerssion : {{ item.session_participation_progression }} %</span>
                                {% else %}
                                    <span class="m-2 badge rounded-pill bg-secondary">progerssion : 0 %</span>
                                {% endif %}
                            </div>
                            <div class="col-sm-4">
                                <span class="m-2 badge rounded-pill bg-secondary">Durée de participation : {{item.participation_duration}} minute(s)</span>
                            </div>
                            <hr>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% else %}      
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <span>Aucune statistique trouvée pour l'instant</span>
    </div>
{% endfor %}