{% extends 'shop/base.html' %}

{% block content %}
<div class="actions">
    <h2 class="page-title">{{ page_title }}</h2>
    {% if is_admin %}
        <a class="button" href="{% url 'product_create' %}">Добавить товар</a>
    {% endif %}
</div>

{% if can_manage_catalog %}
    <form class="filters" method="get" id="filterForm">
        <div class="field">
            <label for="q">Поиск</label>
            <input id="q" name="q" value="{{ search_query }}" placeholder="Введите текст">
        </div>
        <div class="field">
            <label for="supplier">Поставщик</label>
            <select id="supplier" name="supplier">
                <option value="">Все поставщики</option>
                {% for supplier in suppliers %}
                    <option value="{{ supplier.id }}" {% if supplier_id == supplier.id|stringformat:"s" %}selected{% endif %}>
                        {{ supplier.name }}
                    </option>
                {% endfor %}
            </select>
        </div>
        <div class="field">
            <label for="sort">Сортировка</label>
            <select id="sort" name="sort">
                <option value="">Без сортировки</option>
                <option value="quantity_asc" {% if sort == 'quantity_asc' %}selected{% endif %}>Количество по возрастанию</option>
                <option value="quantity_desc" {% if sort == 'quantity_desc' %}selected{% endif %}>Количество по убыванию</option>
                <option value="price_asc" {% if sort == 'price_asc' %}selected{% endif %}>Цена по возрастанию</option>
                <option value="price_desc" {% if sort == 'price_desc' %}selected{% endif %}>Цена по убыванию</option>
            </select>
        </div>
        <a class="button button_secondary" href="{% url 'product_list' %}">Сбросить</a>
    </form>
{% endif %}

<section class="products">
    {% for product in products %}
        <article class="product-card {{ product.row_class }}">
            <img class="product-card__image" src="{{ MEDIA_URL }}{{ product.image_name }}" alt="Фото товара">
            <div>
                <h3 class="product-card__title">{{ product.name }}</h3>
                <p class="product-card__meta">Артикул: {{ product.article }}</p>
                <p class="product-card__meta">Категория: {{ product.category.name }}</p>
                <p class="product-card__meta">Описание: {{ product.description }}</p>
                <p class="product-card__meta">Производитель: {{ product.manufacturer.name }}</p>
                <p class="product-card__meta">Поставщик: {{ product.supplier.name }}</p>
                <p class="product-card__meta">Единица измерения: {{ product.unit.name }}</p>
                <p class="product-card__meta">Количество на складе: {{ product.stock_quantity }}</p>
                <p class="product-card__meta">Действующая скидка: {{ product.discount }}%</p>
                <p class="product-card__meta">
                    {% if product.has_discount %}
                        <span class="price_old">{{ product.price }} руб.</span>
                        <span class="price_new">{{ product.final_price }} руб.</span>
                    {% else %}
                        <span class="price_new">{{ product.price }} руб.</span>
                    {% endif %}
                </p>
            </div>
            {% if is_admin %}
                <div class="actions">
                    <a class="button" href="{% url 'product_edit' product.id %}">Редактировать</a>
                    <a class="button button_danger" href="{% url 'product_delete' product.id %}">Удалить</a>
                </div>
            {% endif %}
        </article>
    {% empty %}
        <div class="empty-state">Товары не найдены. Измените параметры поиска или фильтрации.</div>
    {% endfor %}
</section>

<script>
    const filterForm = document.getElementById('filterForm');
    if (filterForm) {
        let timer = null;
        const submitWithDelay = () => {
            clearTimeout(timer);
            timer = setTimeout(() => filterForm.submit(), 350);
        };
        document.getElementById('q').addEventListener('input', submitWithDelay);
        document.getElementById('supplier').addEventListener('change', () => filterForm.submit());
        document.getElementById('sort').addEventListener('change', () => filterForm.submit());
    }
</script>
{% endblock %}