{% extends "base.html" %}

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

{% block content %}
{% if can_filter %}
<form class="filters" method="get">
    <label>Поиск
        <input type="text" name="q" value="{{ q }}">
    </label>
    <label>Категория
        <select name="category">
            <option value="">Все</option>
            {% for c in categories %}
            <option value="{{ c }}" {% if c == category %}selected{% endif %}>{{ c }}</option>
            {% endfor %}
        </select>
    </label>
    <label>Поставщик
        <select name="supplier">
            <option value="">Все</option>
            {% for s in suppliers %}
            <option value="{{ s }}" {% if s == supplier %}selected{% endif %}>{{ s }}</option>
            {% endfor %}
        </select>
    </label>
    <label>Сортировка
        <select name="sort">
            <option value="name" {% if sort == 'name' %}selected{% endif %}>По названию</option>
            <option value="price" {% if sort == 'price' %}selected{% endif %}>По цене</option>
            <option value="discount" {% if sort == 'discount' %}selected{% endif %}>По скидке</option>
        </select>
    </label>
    <button type="submit" class="btn">Применить</button>
</form>
{% endif %}

{% if is_admin %}
<p>
    <a href="{% url 'product-create' %}" class="btn">Добавить товар</a>
</p>
{% endif %}

<div class="product-grid">
    {% for product in products %}
    <div class="product-card {% if product.discount > 25 %}discount-high{% endif %}">
        {% if product.photo %}
        <img src="{{ product.photo.url }}" alt="{{ product.name }}">
        {% else %}
        <img src="/media/picture.png" alt="Нет фото">
        {% endif %}
        <div class="info">
            <h3>{{ product.name }}</h3>
            <p>Категория: {{ product.category }}</p>
            <p>Производитель: {{ product.creator }}</p>
            <p>Поставщик: {{ product.supplier }}</p>
            <p>На складе: {{ product.in_stock }} {{ product.measure }}</p>
            <p class="price">
                {% if product.discount > 0 %}
                <span class="old-price">{{ product.price }} ₽</span>
                {{ product.final_price }} ₽
                <span>(скидка {{ product.discount }}%)</span>
                {% else %}
                {{ product.price }} ₽
                {% endif %}
            </p>
            {% if product.description %}
            <p>{{ product.description|truncatechars:150 }}</p>
            {% endif %}
        </div>
        {% if is_admin %}
        <div class="actions">
            <a href="{% url 'product-update' articule=product.articule %}">Редактировать</a>
            <a href="{% url 'product-delete' articule=product.articule %}">Удалить</a>
        </div>
        {% endif %}
    </div>
    {% empty %}
    <p>Товары не найдены</p>
    {% endfor %}
</div>
{% endblock %}