{% 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 }}
    <div 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}}</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 %}
            <button
                class="fr-btn fr-btn--secondary fr-btn--sm fr-icon-file-line fr-btn--icon-right"
                aria-label="Fiche méthodologique - {{ indicator.title }}"
                aria-controls="slide-panel-methodo"
            >
                Fiche méthodologique
            </button>
            {% if params|should_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 }}
            {% else %}
                <div style="margin-top: 2rem">Les statistiques ne sont pas disponibles à cette maille.</div>
            {% endif %}
        </div>
        {{ footer }}
    </div>
</section>