{% extends "base.html" %}

{% block title %}Товары — ЧитайГород{% endblock %}
{% block page_title %}Каталог товаров{% endblock %}

{% block extra_css %}
<style>
    .filters form {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: end;
    }

    .filters label {
        display: block;
        margin-bottom: 4px;
    }

    .filters input,
    .filters select {
        font-family: inherit;
        padding: 6px 8px;
    }

    .products {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
    }

    .product-card {
        border: 2px solid #ABCFCE;
        border-radius: 8px;
        padding: 12px;
        background: #fff;
    }

    .product-card.discount-high {
        background: #23E1EF;
    }

    .product-card.out-of-stock {
        background: #E0E0E0;
    }

    .product-card img {
        width: 100%;
        height: 180px;
        object-fit: contain;
        background: #fff;
    }

    .product-card h3 {
        margin: 8px 0;
        color: #546F94;
    }

    .price-old {
        text-decoration: line-through;
        color: #888;
    }

    .price-new {
        color: #546F94;
        font-weight: bold;
        font-size: 18px;
    }

    .actions {
        margin-top: 12px;
    }
</style>
{% endblock %}

{% block content %}
{% if filterset %}
<div class="panel filters">
    <form method="get">
        {{ filterset.form.as_p }}
        <div>
            <label for="order_by">Сортировка</label>
            <select name="order_by" id="order_by">
                <option value="">—</option>
                <option value="name" {% if request.GET.order_by == "name" %}selected{% endif %}>Название ↑</option>
                <option value="-name" {% if request.GET.order_by == "-name" %}selected{% endif %}>Название ↓</option>
                <option value="price" {% if request.GET.order_by == "price" %}selected{% endif %}>Цена ↑</option>
                <option value="-price" {% if request.GET.order_by == "-price" %}selected{% endif %}>Цена ↓</option>
                <option value="discount" {% if request.GET.order_by == "discount" %}selected{% endif %}>Скидка ↑</option>
                <option value="-discount" {% if request.GET.order_by == "-discount" %}selected{% endif %}>Скидка ↓</option>
            </select>
        </div>
        <button class="btn" type="submit">Применить</button>
        <a class="btn" href="{% url 'products-list' %}">Сбросить</a>
    </form>
</div>
{% endif %}

<div style="margin-bottom:16px;">
    {% if user.role == "Администратор" %}
    <a class="btn" href="{% url 'products-create' %}">Добавить товар</a>
    {% endif %}
</div>

{% if object_list %}
<div class="products">
    {% for product in object_list %}
    <div class="product-card{% if product.discount > 25 %} discount-high{% endif %}{% if product.in_stock == 0 %} out-of-stock{% endif %}">
        {% if product.photo %}
        <img src="{{ product.photo.url }}" alt="{{ product.name }}">
        {% endif %}
        <h3>{{ product.name }}</h3>
        <p><strong>Артикул:</strong> {{ product.articule }}</p>
        <p><strong>Категория:</strong> {{ product.category }}</p>
        <p><strong>Поставщик:</strong> {{ product.supplier }}</p>
        <p><strong>На складе:</strong> {{ product.in_stock }} {{ product.measure }}</p>
        {% if product.discount %}
        <p class="price-old">{{ product.price }} ₽</p>
        <p class="price-new">{{ product.price_with_discount }} ₽ (−{{ product.discount }}%)</p>
        {% else %}
        <p class="price-new">{{ product.price }} ₽</p>
        {% endif %}
        <div class="actions">
            <a href="{% url 'products-detail' product.articule %}">Подробнее</a>
            {% if user.role == "Администратор" %}
            | <a href="{% url 'products-update' product.articule %}">Изменить</a>
            | <a href="{% url 'products-delete' product.articule %}">Удалить</a>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<p>Товары не найдены.</p>
{% endif %}
{% endblock %}