{% set bodyClass = 'bg-white' %}
{% set mainClass = 'wrapper' %}
{% extends 'layout.twig' %}
            
{% block content %}
        
    <div class="breadcrumbs">
        <a href="/" class="breadcrumbs__item">
            {{ function('pll_e', 'Главная') }}
        </a>
        <a href="/shop" class="breadcrumbs__item">
            {{ function('pll_e', 'Продукция') }}
        </a>
        {% if category %}
            <a href="{{ category_link }}" class="breadcrumbs__item">
                {{ category_title }}
            </a>
        {% endif %}
    </div>

    <div class="product">
        <div class="product__header">
            <h1 class="product__title">
                {% if category %}
                    {{ category.name }}
                {% else %}
                    {{ function('pll_e', 'Продукция') }}
                {% endif %}
            </h1>

            <button class="button button--gradient button--high button--icon button--filter">
                {{ function('pll_e', 'Фильтры') }}
            </button>
        </div>

        {% if active_filters|length > 0 %}
                <div class="active-filters">
                    {% if active_filters is not empty %}
                        <div class="active-filters">
                            {% for filter in active_filters %}
                                <span class="active-filter-tag" data-filter-id="{{ filter.id }}" data-filter-slug="{{ filter.slug }}" data-filter-taxonomy="{{ filter.taxonomy }}">
                                    {{ filter.name }} ×
                                </span>
                            {% endfor %}
                        </div>
                    {% endif %}

                    <button class="active-filters__clear button button--white">
                        {% if current_lang == 'ru' %}{{ function('pll_e', 'Очистить все') }}{% elseif current_lang == 'en' %}{{ function('pll_e', 'Clear all') }}{% endif %}
                    </button>
                </div>
            {% endif %}
        
        <div class="product__main">

            {% if posts|length > 0 %}
            {% for post in posts %}
               
                {% include 'woocommerce/product-card.twig' with {item : post, addClass: 'product-archive-card'} %}    
            {% endfor %}
            {% else %}
            <div class="not-found">
                <img src="{{ fn('get_template_directory_uri') }}/static/img/sv.svg" alt="">
                <div class="not-found-title">{{ fn('pll_e', 'coming soon') }}</div>
                <div class="not-found-text">{{ fn('pll_e', 'This item is not on our website yet, but it will be here very soon') }}</div>
            </div>
            {% endif %}
        </div>

        <div class="product__footer product__footer--error">
            {% if posts_per_page < count %}
                <button class="button button--white" id="load-more-products" data-category_id="{{ category_id }}" data-category_type="{{ category_type }}">
                    {{ function('pll_e', 'Загрузить еще') }}
                </button>
            {% endif %}
        </div>
    </div>   

{% endblock %}