{% load htmlparams %}
{% load other_filters %}

{% htmlparams %}
	{% htmlparam body %}
        <div class="tdbmd-indicator-card__data fr-mt-5w fr-mb-3w">
            <div class="fr-grid-row fr-grid-row--middle">
                <div class="fr-col-12 fr-grid-row tdbmd-indicator-card__data-container fr-grid-row--middle">
                    <p class="main-value tdbmd-indicator-card__data-number delay-spinner">
                        <span>{% include "territories_dashboard_lib/website/pages/indicators/components/loader.html" with width=32 %}</span>
                        <span class="unite" aria-label="{{indicator.unite_nom_accessible}}">{{indicator.unite}}</span>
                    </p>
                </div>
                <div class="fr-col-12">
                    <div class="fr-toggle">
                        {% if indicator.unite_alternative and indicator.show_alternative %}
                            <input
                                type="checkbox"
                                class="fr-toggle__input toggle-unite"
                                aria-label="Modifier l'unité - {{ indicator.title }}"
                                aria-describedby="{{indicator.id}}-toggle-unit-messages"
                                id="{{indicator.id}}-toggle-unit"
                            >
                            <label aria-label="{{indicator.unite_alternative_nom_accessible}}" class="fr-toggle__label" for="{{indicator.id}}-toggle-unit">
                                {{ indicator.unite_alternative }}
                            </label>
                            <div
                                class="fr-messages-group fr-sr-only"
                                id="{{indicator.id}}-toggle-unit-messages"
                                aria-live="polite"
                            ></div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% include "./stats.html" %}
	{% endhtmlparam %}

    {% htmlparam footer %}
        {% if indicator.show_evolution %}
            <section class="fr-accordion tdbmd-indicator-accordion">
                <h4 class="fr-accordion__title">
                    <button
                        class="fr-accordion__btn"
                        aria-expanded="false"
                        aria-controls="accordion-{{indicator.id}}"
                        aria-label="Historique - {{ indicator.title }}"
                    >
                        Historique
                    </button>
                </h4>
                <div
                    class="fr-collapse"
                    id="accordion-{{indicator.id}}"
                >
                    <div style="height: 300px;">
                        <canvas class="history-chart" aria-describedby="{{indicator.id}}values-export-csv"></canvas>
                    </div>
                    {% include "territories_dashboard_lib/website/pages/indicators/components/chart-buttons.html" with name="Historique" route="values" indicator=indicator no_pb=True tracking_objet="historique" %}
                </div>
            </section>
        {% endif %}
        <a
            class="fr-btn fr-btn--tertiary fr-icon-external-link-fill fr-btn--icon-right tdbmd-indicator-btn"
            href="/indicateurs/details/{{indicator.name}}/"
            aria-label="Voir les graphiques avancés - {{ indicator.title }}"
        >
            Voir les graphiques avancés
        </a>
    {% endhtmlparam %}

    {% include "territories_dashboard_lib/website/pages/indicators/components/indicator-card.html" with indicator=indicator %}
{% endhtmlparams %}
