{% load other_filters %}

<div class="subtheme">
    {% if params.mesh != params.territory_mesh and params|should_mesh_analysis:indicator %}
        <div class="fr-px-md-4w fr-px-2w fr-py-2w">
            {% include "territories_dashboard_lib/website/pages/indicators/components/title.html" with title="Top 10 des territoires" key="top10" text="Survolez les graphiques pour afficher les valeurs de l'indicateur pour chaque modalité. Cliquez sur les catégories de la légende pour afficher/masquer des modalités. Précisions : Ce graphique varie selon la maille sélectionnée." %}
            <div style="width:100%; height: auto;">
                <canvas id="top10Chart" aria-describedby="top-10-export-csv"></canvas>
            </div>
            {% include "territories_dashboard_lib/website/pages/indicators/components/no-data.html" %}
            {% include "./filters-reminder.html" %}
        </div>
        {% include "territories_dashboard_lib/website/pages/indicators/components/chart-buttons.html" with name="Top 10" route="top-10" pattern="show" one_indicator=True tracking_objet="top_10" %}
    {% else %}
        <div class="fr-px-md-4w fr-px-2w fr-py-2w">
            <h3 class="fr-mt-4w">Top 10</h3>
            <div>Le top 10 n'est pas disponible pour la maille sélectionnée.</div>
        </div>
    {% endif %}
</div>