{% load other_filters %}

{% if params.mesh != params.territory_mesh and params|should_mesh_analysis:indicator %}
    <div id="histogramContainer" class="subtheme">
        <div class="fr-px-md-4w fr-px-2w fr-py-2w">
            {% include "territories_dashboard_lib/website/pages/indicators/components/title.html" with title="Répartition des territoires selon les valeurs de l'indicateur" key="repartition" text="Le nom des territoires s'affiche au survol s'il y a moins de 6 territoires. Précisions : Ce graphique varie selon la maille sélectionnée." %}
            <div style="width:100%; height: 400px;">
                <canvas id="histogramChart" aria-describedby="histogram-export-csv"></canvas>
            </div>
            {% include "./no-data.html" %}
            {% include "./filters-reminder.html" %}
        </div>
        {% include "territories_dashboard_lib/website/pages/indicators/components/chart-buttons.html" with name="Répartition par valeurs" route="histogram" one_indicator=True tracking_objet="repartition-valeurs" %}
    </div>
{% else %}
    <div class="subtheme">
        <div class="fr-px-md-4w fr-px-2w fr-py-2w">
            <h3 class="fr-mt-4w">Répartition par territoires</h3>
            {% if params.mesh == params.territory_mesh %}
                <div>La répartition n'est pas disponible si le territoire est du même niveau que la maille sélectionnée.</div>
            {% else %}
                <div>La répartition n'est pas disponible pour la maille sélectionnée.</div>
            {% endif %}
        </div>
    </div>
{% endif %}