{% comment %}
Переиспользуемый компонент для фильтрации по диапазону дат с календарной лентой

Параметры:
- field_after: поле фильтра "от" (например, filter.form.delivery_date_after)
- field_before: поле фильтра "до" (например, filter.form.delivery_date_before)
- label: заголовок фильтра (например, "Дата доставки")
- icon: иконка Bootstrap Icons (default: calendar-range)

Пример использования:
{% include 'orders/components/date_range_filter.html' with field_after=filter.form.delivery_date_after field_before=filter.form.delivery_date_before label="Дата доставки" icon="truck" %}
{% endcomment %}

{% load static %}

<div class="date-range-filter mb-3">
    <div class="d-flex align-items-center">
        <label class="form-label mb-0">
            <i class="bi bi-{{ icon|default:'calendar-range' }}"></i>
            {{ label }}
        </label>

        <button type="button" class="btn btn-sm btn-outline-primary ms-2 today-btn"
                data-min-input="{{ field_after.id_for_label }}"
                data-max-input="{{ field_before.id_for_label }}"
                title="Сегодня">
            Сегодня
        </button>
        <button type="button" class="btn btn-sm btn-outline-primary ms-1 tomorrow-btn"
                data-min-input="{{ field_after.id_for_label }}"
                data-max-input="{{ field_before.id_for_label }}"
                title="Завтра">
            Завтра
        </button>
        <button type="button" class="btn btn-sm btn-outline-primary ms-1 calendar-picker-btn"
                title="Выбрать дату">
            <i class="bi bi-calendar3"></i>
        </button>
        <input type="date" class="calendar-picker-input"
               data-min-input="{{ field_after.id_for_label }}"
               data-max-input="{{ field_before.id_for_label }}"
               style="position: absolute; opacity: 0; pointer-events: none;">
        <button type="button" class="btn btn-sm btn-outline-secondary ms-1 clear-date-btn"
                data-min-input="{{ field_after.id_for_label }}"
                data-max-input="{{ field_before.id_for_label }}"
                title="Сбросить дату">
            <i class="bi bi-x-lg"></i>
        </button>
    </div>

    <!-- Скрытые поля для хранения дат -->
    <div class="d-none">
        {{ field_after }}
        {{ field_before }}
    </div>

    <!-- Календарная лента с динамическим количеством дней -->
    <div class="date-carousel">
        <button type="button" class="carousel-nav-btn carousel-prev"
                data-min-input="{{ field_after.id_for_label }}"
                data-max-input="{{ field_before.id_for_label }}"
                title="Предыдущий день">
            <i class="bi bi-chevron-left"></i>
        </button>

        <div class="date-carousel-container"
             id="dateCarousel_{{ field_after.id_for_label }}"
             data-min-input="{{ field_after.id_for_label }}"
             data-max-input="{{ field_before.id_for_label }}">
            <!-- Дни генерируются через JavaScript -->
        </div>

        <button type="button" class="carousel-nav-btn carousel-next"
                data-min-input="{{ field_after.id_for_label }}"
                data-max-input="{{ field_before.id_for_label }}"
                title="Следующий день">
            <i class="bi bi-chevron-right"></i>
        </button>
    </div>
</div>
