{% 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>
            <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>