{% comment %}
    This component shows a toggle for the indicator unit. 

    You need to provide as props : 
        * indicator, the component uses the following props of indicator : id, unite_alternative_nom_accessible, title, unite_alternative and show_alternative
        * key : if several toggles for the same indicator are on the page, you need to give a key to distinguish them.
{% endcomment %}


{% if indicator.unite_alternative and indicator.show_alternative %}
    <unit-toggle>
        <span>{{ indicator.unite }}</span>
        <div class="fr-toggle">
            <input
                type="checkbox"
                class="fr-toggle__input toggle-unite"
                aria-label="Modifier l'unité - {{ indicator.title }}"
                data-indicator="{{ indicator.id }}"
                aria-describedby="{{indicator.id}}-{{key}}-toggle-unit-messages"
                id="{{indicator.id}}-{{key}}-toggle-unit"
            >
            <label aria-label="{{indicator.unite_alternative_nom_accessible}}" class="fr-toggle__label" for="{{indicator.id}}-{{key}}-toggle-unit">
                {{ indicator.unite_alternative }}
            </label>
            <div
                class="fr-messages-group fr-sr-only toggle-unit-messages"
                id="{{indicator.id}}-{{key}}-toggle-unit-messages"
                data-indicator="{{indicator.id}}"
                aria-live="polite"
            ></div>
        </div>
    </unit-toggle>
{% endif %}