{% extends "_layouts/base.html" %}
{% load static %}

{% block title %}Избранное{% endblock %}

{% block add_css %}
    <link rel="stylesheet" href="{% static "css/catalog.css" %}">
    <link rel="stylesheet" href="{% static "css/favorites.css" %}">
{% endblock %}

{% block content %}
    {% include "_fragments/header.html" with active="favorites" %}

    {% include '_fragments/breadcrumbs.html' with url_1='/' text_1='Главная' url_2='/favorites/' text_2='Избранное' %}

    <main class="container favorites-page" data-favorites-page>
        <section class="favorites-hero">
            <p class="favorites-kicker">Личный список</p>
            <div class="favorites-hero__row">
                <div>
                    <h1 class="favorites-title">Избранные товары</h1>
                    <p class="favorites-description">
                        Здесь собраны товары, которые вы хотите сохранить для быстрого возврата к ним позже.
                    </p>
                </div>
                <div class="favorites-counter">
                    <span class="favorites-counter__value" data-favorites-count-value>{{ favorite_count }}</span>
                    <span class="favorites-counter__label" data-favorites-count-label>товаров</span>
                </div>
            </div>
        </section>

        <section class="favorites-list" aria-label="Список избранных товаров">
            {% include "_fragments/item-grid.html" with items=items empty_message="В избранном пока нет товаров." favorites_grid=True %}
        </section>
    </main>

    {% include "_fragments/footer.html" %}
{% endblock %}