{% load static %}

<section class="products-section container">
    <h2 class="products-title">ПОПУЛЯРНЫЕ ТОВАРЫ</h2>

    <div class="products-grid">
        {% for item in home_products %}
            {% url 'detail' item.category.slug item.slug as item_url %}
            <article class="product product-{{ forloop.counter }}">
                <a class="product-card-link" href="{{ item_url }}" aria-label="Открыть товар {{ item.name }}" tabindex="-1" aria-hidden="true"></a>
                <a class="product-media" href="{{ item_url }}" aria-label="Открыть товар {{ item.name }}">
                    {% with primary_image=item.primary_image %}
                        {% if primary_image %}
                            <img src="{{ primary_image.image.url }}" alt="{{ primary_image.alt|default:item.name }}">
                        {% else %}
                            <span class="product-placeholder">Нет фото</span>
                        {% endif %}
                    {% endwith %}
                </a>

                <div class="product-actions" aria-label="Действия с товаром">
                    {% if request.user.is_authenticated %}
                        <form method="post" action="{% url 'favorites:toggle' %}">
                            {% csrf_token %}
                            <input type="hidden" name="item_id" value="{{ item.id }}">
                            <input type="hidden" name="next" value="{{ request.get_full_path }}">
                            <button
                                class="{% if item.id in favorite_item_ids %}is-active{% endif %}"
                                type="submit"
                                title="{% if item.id in favorite_item_ids %}Удалить из избранного{% else %}Добавить в избранное{% endif %}"
                                aria-label="{% if item.id in favorite_item_ids %}Удалить из избранного{% else %}Добавить в избранное{% endif %}"
                            >
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                                    <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01z"></path>
                                </svg>
                            </button>
                        </form>
                    {% else %}
                        <a
                            href="{% url 'users:login' %}?next={{ request.get_full_path|urlencode }}"
                            title="Войдите, чтобы добавить в избранное"
                            aria-label="Войдите, чтобы добавить в избранное"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                                <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01z"></path>
                            </svg>
                        </a>
                    {% endif %}

                    {% if request.user.is_authenticated %}
                        {% if item.id in cart_item_ids %}
                            <a href="{% url 'orders:cart' %}" title="Перейти в корзину" aria-label="Перейти в корзину">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                                    <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l1.25 5h8.22l1.25-5zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0"></path>
                                </svg>
                            </a>
                        {% else %}
                            <form method="post" action="{% url 'orders:add' %}">
                                {% csrf_token %}
                                <input type="hidden" name="item_id" value="{{ item.id }}">
                                <input type="hidden" name="next" value="{{ request.get_full_path }}">
                                <button type="submit" title="В корзину" aria-label="В корзину">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                                        <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l1.25 5h8.22l1.25-5zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0"></path>
                                    </svg>
                                </button>
                            </form>
                        {% endif %}
                    {% else %}
                        <a href="{% url 'users:login' %}?next={{ request.get_full_path|urlencode }}" title="Войдите, чтобы добавить в корзину" aria-label="Войдите, чтобы добавить в корзину">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                                <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l1.25 5h8.22l1.25-5zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0"></path>
                            </svg>
                        </a>
                    {% endif %}
                </div>

                <div class="product-info">
                    <span class="product-category">
                        {{ item.category.name }}{% if item.subcategory %} / {{ item.subcategory.name }}{% endif %}
                    </span>
                    <a class="product-name" href="{{ item_url }}">{{ item.name }}</a>
                    <div class="product-meta">
                        <div class="product-price-block">
                            <span class="product-price{% if item.has_discount %} product-price--discount{% endif %}">
                                {{ item.display_price }} руб.
                            </span>
                            {% if item.has_discount %}
                                <span class="product-price-original">{{ item.price }} руб.</span>
                            {% endif %}
                        </div>
                        <span class="product-availability">В наличии</span>
                    </div>
                </div>
            </article>
        {% empty %}
            <p class="products-empty">Товары скоро появятся.</p>
        {% endfor %}
    </div>

    <div class="products-footer">
        <a href="/catalog/" class="btn-primary">ПЕРЕЙТИ В КАТАЛОГ</a>
    </div>
</section>