{% load other_filters %}

<section class="fr-accordion tdbmd-indicator-accordion tdbmd-indicator-accordion-comparison">
    <h3 class="fr-accordion__title">
        <button
            class="fr-accordion__btn border-top"
            aria-expanded="false"
            aria-controls="accordion-{{indicator.id}}"
            aria-label="Répartition des valeurs - {{ indicator.title }}"
        >
            Répartition des valeurs
        </button>
    </h3>
    <div
        class="fr-collapse"
        id="accordion-{{indicator.id}}"
    >
        {% include "territories_dashboard_lib/website/pages/indicators/components/title.html" with title="Répartition des territoires selon les valeurs de l'indicateur (graphique en “miroir”)" key=indicator.name h4=True text="Survolez les barres du graphique pour afficher le nombre de territoires dans chaque classe de valeurs (le nom des territoires s'affiche s'il y a moins de 6 territoires). Le graphique du haut correspond à la répartition pour le territoire 1 sélectionné, alors que le graphique du bas (en “miroir”) correspond à la répartition pour le territoire 2 de comparaison. Précisions : Ce graphique varie selon la maille sélectionnée." %}
        {% if params|should_mesh_analysis:indicator %}
            <div style="width: 100%; height: 500px; margin-top: -1rem;">
                <canvas class="comparison-chart" aria-describedby="{{indicator.id}}comparison-histogram-export-csv"></canvas>
            </div>
            {% include "territories_dashboard_lib/website/pages/indicators/components/chart-buttons.html" with name="Comparaison de la répartition" route="comparison-histogram" indicator=indicator pattern="show" tracking_objet="comparison-histogram" %}
        {% else %}
            <div style="margin-top: 16px;">L'histogramme de comparaison n'est pas disponible à la maille sélectionnée.</div>
        {% endif %}
    </div>
</section>
