{% comment %}
Переиспользуемый компонент панели фильтров (Offcanvas)
Параметры:
- filters: список HTML-кода фильтров для отображения (опционально)
- filter_form: объект формы Django для фильтров (опционально)
- reset_url: URL для сброса фильтров (по умолчанию: текущая страница без параметров)

Использование:
    {% include 'mainapp/components/_filter_panel.html' with filters=filter_list %}
    {% include 'mainapp/components/_filter_panel.html' with filter_form=form %}
    {% include 'mainapp/components/_filter_panel.html' with filters=filter_list reset_url='/sources/' %}

Примечание:
- Можно передать либо список HTML-кода фильтров через 'filters', либо форму Django через 'filter_form'
- Форма отправляется методом GET для сохранения параметров в URL
- Кнопка "Сбросить" очищает все параметры фильтрации
{% endcomment %}

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasFilters" aria-labelledby="offcanvasFiltersLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasFiltersLabel">Фильтры</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
    </div>
    <div class="offcanvas-body">
        <form method="get" id="filter-form">
            {% if filter_form %}
                {# Если передана форма Django, отображаем её поля #}
                {% for field in filter_form %}
                    <div class="mb-3">
                        <label for="{{ field.id_for_label }}" class="form-label">
                            {{ field.label }}
                        </label>
                        {{ field }}
                        {% if field.help_text %}
                            <div class="form-text">{{ field.help_text }}</div>
                        {% endif %}
                        {% if field.errors %}
                            <div class="invalid-feedback d-block">
                                {{ field.errors }}
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}
            {% elif filters %}
                {# Если переданы готовые HTML-блоки фильтров #}
                {% for filter in filters %}
                    {{ filter|safe }}
                {% endfor %}
            {% endif %}

            {# Сохраняем параметры сортировки и поиска при применении фильтров #}
            {% if request.GET.sort %}
                <input type="hidden" name="sort" value="{{ request.GET.sort }}">
            {% endif %}
            {% if request.GET.search %}
                <input type="hidden" name="search" value="{{ request.GET.search }}">
            {% endif %}
            {% if request.GET.items_per_page %}
                <input type="hidden" name="items_per_page" value="{{ request.GET.items_per_page }}">
            {% endif %}

            <div class="d-grid gap-2 mt-3">
                <button type="submit" class="btn btn-primary btn-sm">
                    Применить
                </button>
                <a href="{{ reset_url|default:'?' }}" class="btn btn-secondary btn-sm">
                    Сбросить
                </a>
            </div>
        </form>
    </div>
</div>

<script>
// Update filter counter badge when filters are active
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const filterCounter = document.getElementById('filterCounter');
    
    if (filterCounter) {
        // Count active filters (excluding pagination, sort, search, and items_per_page)
        const excludedParams = ['page', 'sort', 'search', 'items_per_page'];
        let activeFilters = 0;
        
        for (const [key, value] of urlParams.entries()) {
            if (!excludedParams.includes(key) && value) {
                activeFilters++;
            }
        }
        
        if (activeFilters > 0) {
            filterCounter.textContent = activeFilters;
            filterCounter.style.display = 'inline-block';
        } else {
            filterCounter.style.display = 'none';
        }
    }
});
</script>
