{# Onglets période + calendrier bulma optionnel (TDB + liste admin).
   Variables : route_name, filters
   Optionnel : dashboard_booking_years, show_period_calendar (bool), filters_form_id (string si calendrier).
#}
{% set booking_years = dashboard_booking_years is defined ? dashboard_booking_years : [] %}
<div class="viz-period-tabs-wrap">
    <div class="viz-period-tabs-row viz-period-tabs-row--presets">
        <nav class="viz-period-tabs" role="tablist" aria-label="Période">
            <a href="{{ path(route_name, filters.withPeriodTab('7d').toQueryParams(1)) }}"
               class="viz-period-tab {{ filters.matchesPeriodTab('7d') ? 'is-active' : '' }}">7j</a>
            <a href="{{ path(route_name, filters.withPeriodTab('this_month').toQueryParams(1)) }}"
               class="viz-period-tab {{ filters.matchesPeriodTab('this_month') ? 'is-active' : '' }}">Mois</a>
            <a href="{{ path(route_name, filters.withPeriodTab('last_month').toQueryParams(1)) }}"
               class="viz-period-tab {{ filters.matchesPeriodTab('last_month') ? 'is-active' : '' }}">Mois dernier</a>
            <a href="{{ path(route_name, filters.withPeriodTab('3months').toQueryParams(1)) }}"
               class="viz-period-tab {{ filters.matchesPeriodTab('3months') ? 'is-active' : '' }}">Trimestre</a>
            <a href="{{ path(route_name, filters.withPeriodTab('year').toQueryParams(1)) }}"
               class="viz-period-tab {{ filters.matchesPeriodTab('year') ? 'is-active' : '' }}">Année</a>
            <a href="{{ path(route_name, filters.withPeriodTab('last_year').toQueryParams(1)) }}"
               class="viz-period-tab {{ filters.matchesPeriodTab('last_year') ? 'is-active' : '' }}">Année dernière</a>
        </nav>
        {% if booking_years is not empty %}
            <div class="viz-period-year-wrap">
                <label class="viz-sr-only" id="lbl-viz-period-booking-year" for="viz-period-booking-year">Choisir une année présente dans les transactions</label>
                <select id="viz-period-booking-year"
                        class="viz-period-year-select"
                        aria-labelledby="lbl-viz-period-booking-year"
                        autocomplete="off"
                        onchange="if (this.value) { window.location.href = this.value; }">
                    <option value=""{% if filters.activeCalendarYearAmong(booking_years) is null %} selected{% endif %}>Année…</option>
                    {% for year in booking_years %}
                        <option value="{{ path(route_name, filters.withCalendarYear(year).toQueryParams(1)) }}"{% if filters.matchesCalendarYear(year) %} selected{% endif %}>{{ year }}</option>
                    {% endfor %}
                </select>
            </div>
        {% endif %}
    </div>
    {% if show_period_calendar is defined and show_period_calendar and filters_form_id is defined %}
        <div class="viz-period-tabs-row viz-period-tabs-row--datepicker" role="region" aria-label="Période précise au calendrier">
            {% include '_partials/period_calendar_fields.html.twig' with {
                filters_form_id: filters_form_id,
                filters: filters,
            } only %}
        </div>
    {% endif %}
</div>