{% comment %}
Переиспользуемый компонент панели инструментов
Параметры:
- show_search: показывать ли поиск (по умолчанию: True)
- show_filters: показывать ли кнопку фильтров (по умолчанию: True)
- show_actions: показывать ли кнопки действий (по умолчанию: True)
- search_placeholder: текст placeholder для поиска (по умолчанию: "Поиск...")
- search_query: текущее значение поиска
- items_per_page: текущее количество элементов на странице
- available_items_per_page: список доступных значений для выбора
- action_buttons: HTML-код кнопок действий (опционально)
- page_obj: объект пагинации Django
- show_pagination_info: показывать ли информацию о количестве элементов (по умолчанию: True)
- extra_buttons: дополнительные кнопки между фильтрами и пагинацией (опционально)

Использование:
    {% include 'mainapp/components/_toolbar.html' with show_search=True show_filters=True show_actions=True %}
    {% include 'mainapp/components/_toolbar.html' with show_search=False show_actions=False %}
{% endcomment %}

<div class="card">
    <div class="card-body">
        <div class="d-flex flex-wrap align-items-center gap-3">
            {% if show_search|default:True %}
            <!-- Search bar -->
            <div style="min-width: 200px; flex-grow: 1; max-width: 400px;">
                <div class="input-group">
                    <input type="text" id="toolbar-search" class="form-control" 
                           placeholder="{{ search_placeholder|default:'Поиск...' }}"
                           value="{{ search_query|default:'' }}">
                    <button type="button" class="btn btn-outline-primary" onclick="performSearch()">
                        Найти
                    </button>
                    <button type="button" class="btn btn-outline-secondary" onclick="clearSearch()">
                        Очистить
                    </button>
                </div>
            </div>
            {% endif %}

            <!-- Items per page select -->
            <div>
                <label for="items-per-page" class="form-label mb-0">Показать:</label>
                <select name="items_per_page" id="items-per-page"
                        class="form-select form-select-sm d-inline-block" style="width: auto;"
                        onchange="updateItemsPerPage()">
                    {% for option in available_items_per_page %}
                    <option value="{{ option }}" {% if option == items_per_page %}selected{% endif %}>
                        {{ option }}
                    </option>
                    {% endfor %}
                </select>
            </div>

            {% if show_actions|default:True %}
            <!-- Action buttons -->
            <div class="d-flex gap-2">
                {% if action_buttons %}
                    {{ action_buttons|safe }}
                {% endif %}
            </div>
            {% endif %}

            {% if show_filters|default:True %}
            <!-- Filter Toggle Button -->
            <div>
                <button class="btn btn-outline-primary btn-sm" type="button" 
                        data-bs-toggle="offcanvas" data-bs-target="#offcanvasFilters">
                    <i class="bi bi-funnel"></i> Фильтры
                    <span id="filterCounter" class="badge bg-danger" style="display: none;">0</span>
                </button>
            </div>
            {% endif %}

            {% if extra_buttons %}
            <!-- Extra buttons (e.g., polygon filter) -->
            <div class="d-flex gap-2">
                {{ extra_buttons|safe }}
            </div>
            {% endif %}

            <!-- Pagination -->
            <div class="ms-auto">
                {% include 'mainapp/components/_pagination.html' with page_obj=page_obj show_info=show_pagination_info|default:True %}
            </div>
        </div>
    </div>
</div>

<script>
// Search functionality
function performSearch() {
    const searchInput = document.getElementById('toolbar-search');
    const searchValue = searchInput.value.trim();
    
    const urlParams = new URLSearchParams(window.location.search);
    
    if (searchValue) {
        urlParams.set('search', searchValue);
    } else {
        urlParams.delete('search');
    }
    
    // Reset to first page when searching
    urlParams.delete('page');
    
    window.location.search = urlParams.toString();
}

function clearSearch() {
    const searchInput = document.getElementById('toolbar-search');
    searchInput.value = '';
    
    const urlParams = new URLSearchParams(window.location.search);
    urlParams.delete('search');
    urlParams.delete('page');
    
    window.location.search = urlParams.toString();
}

// Allow Enter key to trigger search
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('toolbar-search');
    if (searchInput) {
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                performSearch();
            }
        });
    }
});

// Items per page functionality
function updateItemsPerPage() {
    const select = document.getElementById('items-per-page');
    const itemsPerPage = select.value;
    
    const urlParams = new URLSearchParams(window.location.search);
    urlParams.set('items_per_page', itemsPerPage);
    
    // Reset to first page when changing items per page
    urlParams.delete('page');
    
    window.location.search = urlParams.toString();
}
</script>
