{% load other_filters %}

<section
    id="card-{{ indicator.id }}"
    class="indicator-card fr-grid-row fr-grid-row-md--gutters"
    data-indicator="{{ indicator.id }}"
>
    {{ indicator|json_script:indicator.id }}
    {% with indicator.id|stringformat:"i"|add:"-api-urls" as script_name %}
        {{ indicator|indicator_api_urls|json_script:script_name }}
    {% endwith %}
    <div id="{{indicator.name}}" class="fr-col-12">
        <div class="tdbmd-indicator-card fr-p-3w fr-mt-md-5w fr-mt-3w">
            <h3 class="fr-h6">
                {{indicator.title}}
                {% include "territories_dashboard_lib/website/pages/indicators/components/actions.html" %}
            </h3>
            <p>{{indicator.description}}</p>
            {% if indicator.source %}
                <p class="tdbmd-indicator-source">
                    <span class="tdbmd-indicator-source__title">Source</span>
                    <span>:</span>
                    {{indicator.source}}
                </p>
            {% endif %}
            <a
                href="{% url 'website:indicator-methodo' indicator_name=indicator.name %}"
                aria-label="Accéder à la fiche méthodologique - {{ indicator.title }} - nouvel onglet"
                target="_blank"
                class="no-link"
            >
                <button class="fr-btn fr-btn--secondary fr-btn--sm fr-icon-file-line fr-btn--icon-right">
                    Fiche méthodologique
                </button>
            </a>
            {% if params|should_territory_mesh_analysis:indicator %}
                <div class="fr-tag-list fr-mt-4w" role="group" aria-label="Filtres disponibles">
                    {% for dimension_filters in indicator.filters %}
                        <div class="filters-dimension">
                            {% if indicator.filters|length > 1 %}
                                <label>{{ dimension_filters.0.title }}</label>
                            {% endif %}
                            <div>
                                {% for filter in dimension_filters.1 %}
                                    <button
                                        class="fr-tag filter-tag"
                                        aria-label="{{ filter.db_name }} - {{indicator.title}}"
                                        data-indicator="{{ indicator.id }}"
                                        data-dimension="{{ dimension_filters.0.db_name }}"
                                        data-filter="{{ filter.db_name|escape }}"
                                        data-default="{{ filter.default|yesno:'true,false' }}"
                                    >
                                        {{filter.db_name}}
                                    </button>
                                {% endfor %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
                {{ body }}
                {% if not params|should_mesh_analysis:indicator %}
                    <div style="margin-top: 2rem">Les statistiques et graphiques avancés ne sont pas disponibles à cette maille.</div>
                {% endif %}
            {% elif not params|should_mesh_analysis:indicator %}
                    <div style="margin-top: 2rem">Les statistiques et graphiques avancés ne sont pas disponibles à ce niveau territorial.</div>
            {% endif %}
        </div>
        {% if params|should_territory_mesh_analysis:indicator and params|should_mesh_analysis:indicator %}
            {{ footer }}
        {% endif %}
    </div>
</section>