<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>
            <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 }}
        </div>
        {{ footer }}
    </div>
</section>
