{% comment %}
Переиспользуемый компонент поиска и выбора товара (Product).
Только единичный выбор (single-select).

Параметры (Django template variables):
- container_id: уникальный ID контейнера (default: 'product-search-picker')
- title: заголовок компонента (default: 'Выбор товара')
- api_url: URL для AJAX поиска (default: '/products/api/search-products-variants/')
- show_filters: показывать фильтры (default: True)
- show_view_toggle: показывать переключатель вида (default: True)
- add_button_text: текст кнопки добавления (default: 'Выбрать товар')
- initial_view: начальный вид 'grid' или 'list' (default: 'list')
- filter_in_stock_only: показывать только товары в наличии (default: False)
- warehouse_id: ID склада для фильтрации товаров (default: None)
- skip_stock_filter: не фильтровать по остаткам на складе (default: False, для приёмки: True)
- categories: список категорий для фильтра (queryset или list)
- tags: список тегов для фильтра (queryset или list)
- content_height: высота контейнера с товарами (default: '400px')

Пример использования:
{% include 'products/components/product_search_picker.html' with
    container_id='writeoff-products'
    title='Выберите товар для списания'
    show_filters=True
    filter_in_stock_only=True
    categories=categories
%}

После включения инициализируйте JS:
<script>
ProductSearchPicker.init('#writeoff-products', {
    onAddSelected: function(product, instance) {
        // product = {id, text, sku, price, in_stock, photo_url}
        addToForm(product);
        instance.clearSelection();
    }
});
</script>
{% endcomment %}

{% load static %}

<div class="product-search-picker"
     id="{{ container_id|default:'product-search-picker' }}"
     data-api-url="{{ api_url|default:'/products/api/search-products-variants/' }}"
     data-exclude-kits="true"
     {% if warehouse_id %}data-warehouse-id="{{ warehouse_id }}"{% endif %}
     {% if skip_stock_filter %}data-skip-stock-filter="true"{% endif %}>

    <div class="card shadow-sm">
        <!-- Строка поиска - компактный размер -->
        <div class="card-header bg-white py-1">
            <div class="input-group">
                <span class="input-group-text bg-light border-end-0">
                    <i class="bi bi-search text-primary"></i>
                </span>
                <input type="text"
                       class="form-control form-control-sm border-start-0 product-picker-search"
                       placeholder="{{ title|default:'Поиск товара по названию, артикулу...' }}"
                       style="box-shadow: none;">
                <button class="btn btn-outline-secondary btn-sm product-picker-search-clear"
                        type="button" style="display: none;">
                    <i class="bi bi-x"></i>
                </button>
            </div>
        </div>

        {% if show_filters|default:True %}
        <!-- Фильтры - компактный вид -->
        <div class="card-body border-bottom py-1">
            <div class="d-flex gap-1 align-items-center flex-wrap">
                {% if categories %}
                <!-- Фильтр по категории -->
                <select class="form-select form-select-sm product-picker-category" style="width: auto;">
                    <option value="">Все категории</option>
                    {% for cat in categories %}
                    <option value="{{ cat.id }}">{{ cat.name }}</option>
                    {% endfor %}
                </select>
                {% endif %}

                {% if tags %}
                <!-- Фильтр по тегам -->
                <select class="form-select form-select-sm product-picker-tag" style="width: auto;">
                    <option value="">Все теги</option>
                    {% for tag in tags %}
                    <option value="{{ tag.id }}">{{ tag.name }}</option>
                    {% endfor %}
                </select>
                {% endif %}

                <!-- Фильтр по наличию -->
                <select class="form-select form-select-sm product-picker-stock-status" style="width: auto;">
                    <option value="all" {% if not filter_in_stock_only|default:False %}selected{% endif %}>Все товары</option>
                    <option value="in_stock" {% if filter_in_stock_only|default:False %}selected{% endif %}>В наличии</option>
                    <option value="out_of_stock">Не в наличии</option>
                </select>

                {% if show_view_toggle|default:True %}
                <!-- Переключатель вида -->
                <div class="btn-group ms-auto">
                    <button class="btn btn-outline-secondary btn-sm product-picker-view"
                            data-view="grid" title="Карточки">
                        <i class="bi bi-grid-3x3-gap"></i>
                    </button>
                    <button class="btn btn-outline-secondary btn-sm product-picker-view"
                            data-view="list" title="Список">
                        <i class="bi bi-list-ul"></i>
                    </button>
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}

        <!-- Контент: сетка/список товаров - компактный -->
        <div class="card-body product-picker-content p-1" style="max-height: {{ content_height|default:'400px' }}; overflow-y: auto;">
            <!-- Индикатор загрузки -->
            <div class="product-picker-loading text-center py-2" style="display: none;">
                <div class="spinner-border spinner-border-sm text-primary" role="status">
                    <span class="visually-hidden">Загрузка...</span>
                </div>
            </div>

            <!-- Сетка товаров -->
            <div class="row g-1 product-picker-grid" data-view="{{ initial_view|default:'list' }}">
                <!-- Товары загружаются через AJAX -->
            </div>

            <!-- Пустой результат -->
            <div class="product-picker-empty text-center py-2 text-muted" style="display: none;">
                <i class="bi bi-search fs-5 opacity-25"></i>
                <p class="mb-0 mt-1 small">Товары не найдены</p>
            </div>
        </div>

        <!-- Футер с кнопкой действия - компактный -->
        <div class="card-footer bg-white py-1 d-flex justify-content-between align-items-center flex-wrap gap-1">
            <div></div>
            
            <button class="btn btn-primary btn-sm product-picker-add-selected" disabled>
                <i class="bi bi-plus-circle"></i>
                {{ add_button_text|default:'Выбрать товар' }}
            </button>
        </div>
    </div>
</div>
