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

Параметры:
- title: заголовок панели (default: "Фильтры")
- filters: объект с данными фильтров
  - categories: список категорий
  - tags: список тегов
  - current: текущие значения фильтров
- action_buttons: список кнопок действий
  - url: ссылка
  - text: текст кнопки
  - class: CSS классы (default: 'btn-primary')
  - icon: иконка Bootstrap Icons (без префикса bi-)
- show_search: показать поиск (default: True)
- show_category: показать фильтр категорий (default: True)
- show_status: показать фильтр статуса (default: True)
- show_tags: показать фильтр тегов (default: True)

Пример использования:
{% include 'components/filter_panel.html' with title="Товары" filters=filters action_buttons=action_buttons %}
{% endcomment %}

{% load static %}

<link rel="stylesheet" href="{% static 'css/filter_panel.css' %}">

<div class="filter-panel card shadow-sm mb-4">
    <div class="card-body">
        <!-- Заголовок и кнопки действий -->
        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">
            <h5 class="card-title mb-0 me-3">
                <i class="bi bi-funnel-fill"></i> {{ title|default:"Фильтры" }}
            </h5>

            <!-- Кнопки действий -->
            {% if action_buttons %}
            <div class="btn-toolbar" role="toolbar">
                {% for button in action_buttons %}
                <a href="{{ button.url }}" class="btn {{ button.class|default:'btn-primary' }} btn-sm me-2 mb-2 mb-md-0">
                    {% if button.icon %}<i class="bi bi-{{ button.icon }}"></i>{% endif %}
                    {{ button.text }}
                </a>
                {% endfor %}
            </div>
            {% endif %}
        </div>

        <hr class="my-3">

        <!-- Форма фильтров -->
        <form method="get" id="filterForm">
            <div class="row g-3">
                <!-- Поле поиска -->
                {% if show_search|default:True %}
                <div class="col-12 col-md-4">
                    <label for="search" class="form-label">
                        <i class="bi bi-search"></i> Поиск
                    </label>
                    <input
                        type="text"
                        class="form-control"
                        id="search"
                        name="search"
                        placeholder="Поиск по названию..."
                        value="{{ filters.current.search|default:'' }}"
                    >
                </div>
                {% endif %}

                <!-- Фильтр по категории -->
                {% if show_category|default:True and filters.categories %}
                <div class="col-12 col-md-3">
                    <label for="category" class="form-label">
                        <i class="bi bi-folder"></i> Категория
                    </label>
                    <select class="form-select" id="category" name="category">
                        <option value="">Все категории</option>
                        {% for cat in filters.categories %}
                        <option value="{{ cat.id }}" {% if filters.current.category|stringformat:"s" == cat.id|stringformat:"s" %}selected{% endif %}>
                            {{ cat.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}

                <!-- Фильтр по статусу -->
                {% if show_status|default:True %}
                <div class="col-12 col-md-2">
                    <label for="status" class="form-label">
                        <i class="bi bi-toggle-on"></i> Статус
                    </label>
                    <select class="form-select" id="status" name="status">
                        <option value="">Все</option>
                        <option value="active" {% if filters.current.status == 'active' %}selected{% endif %}>Активный</option>
                        <option value="archived" {% if filters.current.status == 'archived' %}selected{% endif %}>Архивный</option>
                        <option value="discontinued" {% if filters.current.status == 'discontinued' %}selected{% endif %}>Снят</option>
                    </select>
                </div>
                {% endif %}

                <!-- Фильтр по тегам -->
                {% if show_tags|default:True and filters.tags %}
                <div class="col-12">
                    <label class="form-label">
                        <i class="bi bi-tags"></i> Теги
                    </label>
                    <div class="d-flex flex-wrap gap-2">
                        {% for tag in filters.tags %}
                        <div class="form-check form-check-inline">
                            <input
                                class="form-check-input"
                                type="checkbox"
                                name="tags"
                                id="tag_{{ tag.id }}"
                                value="{{ tag.id }}"
                                {% if tag.id|stringformat:"s" in filters.current.tags %}checked{% endif %}
                            >
                            <label class="form-check-label" for="tag_{{ tag.id }}">
                                {{ tag.name }}
                            </label>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <!-- Кнопки управления фильтрами -->
                <div class="col-12">
                    <div class="d-flex gap-2 justify-content-end">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> Применить фильтры
                        </button>
                        <a href="{{ request.path }}" class="btn btn-outline-secondary">
                            <i class="bi bi-x-circle"></i> Сбросить
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
