{% set bodyClass = 'bg-white' %}
{% set mainClass = 'wrapper' %}
{% extends 'layout.twig' %}
            
{% block content %}

    {% if site_region == 'ru' %}
    <style>
        .product-item-overlay__price::after{
            content: '₽';
        }
    </style>
    {% endif %}  
        
    <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">
                        {{ function('pll_e', 'Очистить все') }}
                    </button>
                </div>
            {% endif %}
        
        <div class="product__main">
            {% for post in posts %}
                {% include '/woocommerce/archive-product/archive-product-tease.twig' with {post: post} %}
            {% endfor %}
        </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>   

    <script>
document.addEventListener("DOMContentLoaded", () => {
    const filterButtons = document.querySelectorAll('.product-tagitem');

    filterButtons.forEach(button => {
        button.addEventListener('click', () => {
            const slug = button.dataset.slug;
            const taxonomy = button.dataset.taxonomy;

            const param = 'wpf_filter_' + taxonomy;
            const url = new URL(window.location.href);
            const params = new URLSearchParams(url.search);

            if (params.has(param)) {
                let values = params.get(param).split(',');
                values = values.filter(v => v !== slug);

                if (values.length > 0) {
                    params.set(param, values.join(','));
                } else {
                    params.delete(param);
                }

                url.search = params.toString();
                window.location.href = url.toString();
            }
        });
    });

    // Обработка клика на отдельные теги активных фильтров
    const activeFilterTags = document.querySelectorAll('.active-filter-tag');
    activeFilterTags.forEach(tag => {
        tag.addEventListener('click', () => {
            const slug = tag.dataset.filterSlug;
            const taxonomy = tag.dataset.filterTaxonomy;
            
            // Убираем префикс pa_ если есть для формирования параметра URL
            const rawTaxonomy = taxonomy.replace('pa_', '');
            const param = 'wpf_filter_' + rawTaxonomy;
            
            const url = new URL(window.location.href);
            const params = new URLSearchParams(url.search);

            if (params.has(param)) {
                let values = params.get(param).split(',');
                values = values.filter(v => v !== slug);

                if (values.length > 0) {
                    params.set(param, values.join(','));
                } else {
                    params.delete(param);
                }
            }

            url.search = params.toString();
            window.location.href = url.toString();
        });
    });

    // Обработка кнопки "Очистить все"
    const clearAllBtn = document.querySelector('.active-filters__clear');
    if (clearAllBtn) {
        clearAllBtn.addEventListener('click', () => {
            const url = new URL(window.location.href);
            const params = new URLSearchParams(url.search);

            for (const key of Array.from(params.keys())) {
                if (key.startsWith('wpf_')) {
                    params.delete(key);
                }
            }

            url.search = params.toString();
            window.location.href = url.toString();
        });
    }
});
</script>

        
{% endblock %}