{% extends 'shop/shop.html.twig' %}

{% block title %}{{ category.title }}{% endblock %}

{% block content %}

    {% set BreadCrumbsCat = category %}
    {% set BreadCrumbsArr = [] %}

    {% set BreadCrumbsArr = get_breadcrumbs_array(BreadCrumbsCat) %}
    {% if BreadCrumbsCat.id > 1 %}
        {% set BreadCrumbsArr = BreadCrumbsArr|merge([{name: 'Publikace a e-shop', slug:''}]) %}
    {% endif %}

    <div class="col-12 col-lg-9">
        <hr class="line line--gray">
        {% if BreadCrumbsArr|length > 0 %}
            <ul class="shop-breadcrumbs">
                {% for BreadCrumbsItem in BreadCrumbsArr|reverse %}
                    <li>
                        <a href="/{{ app.request.locale }}/publikace/{{ BreadCrumbsItem.slug }}" class="shop-breadcrumbs__link">{{ BreadCrumbsItem.name }}</a>
                    </li>
                {% endfor %}
                <li class="shop-breadcrumbs__current">
                    {{ category.name }}
                </li>
            </ul>
        {% endif %}

        <h1 class="main-title">{{ category.name }}</h1>
        <div class="content">
        {{ category.html|raw }}
        </div>
        <hr class="line line--yellow line--big">
        <div class="shop-filters">
            <div class="shop-filters__sorts">
                {% if sortFilters['ProductSortByName'] %}
                <button type="button" class="shop-filters__sort" id="ProductSortByName">
                    {% trans %}nazev{% endtrans %}


                    <svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path class="sortingIconTop" d="M9 6L5 2L1 6" stroke="currentColor" stroke-width="2"/>
                        <path class="sortingIconBottom" d="M9 11L5 15L1 11" stroke="currentColor" stroke-width="2"/>
                    </svg>
                </button>
                {% endif %}
                {% if sortFilters['ProductSortByYear'] %}
                <button type="button" class="shop-filters__sort" id="ProductSortByYear">
                    {% trans %}rok.vydani{% endtrans %}


                    <svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path class="sortingIconTop" d="M9 6L5 2L1 6" stroke="currentColor" stroke-width="2"/>
                        <path class="sortingIconBottom" d="M9 11L5 15L1 11" stroke="currentColor" stroke-width="2"/>
                    </svg>
                </button>
                {% endif %}
                {% if sortFilters['ProductSortByNumber'] %}
                <button type="button" class="shop-filters__sort" id="ProductSortByNumber">
                    {% trans %}cislo.svazku{% endtrans %}


                    <svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path class="sortingIconTop" d="M9 6L5 2L1 6" stroke="currentColor" stroke-width="2"/>
                        <path class="sortingIconBottom" d="M9 11L5 15L1 11" stroke="currentColor" stroke-width="2"/>
                    </svg>
                </button>
                {% endif %}
            </div>
            <div class="shop-filters__sort-mobile">
                <label for="productsSort">{% trans %}radit.dle{% endtrans %}</label>
                <select name="productsSort" id="productsSort" class="select w-100">
                    <option value="Option">Option</option>
                    <option value="Option">Option</option>
                    <option value="Option">Option</option>
                    <option value="Option">Option</option>
                    <option value="Option">Option</option>
                </select>
            </div>
            <div class="shop-filters__available">
                <input type="checkbox" id="availableProducts" class="checkbox">
                <label for="availableProducts">
                    {% trans %}jen.prodejne{% endtrans %}
                </label>
            </div>
        </div>
        <div class="shop-publications">
            {% for product in pagination %}
                {{ include('shop/product/_product_preview.html.twig', {product: product}) }}
            {% endfor %}
        </div>
        <div class="mt-5">
            {{ knp_pagination_render(pagination) }}
        </div>
    </div>
{% endblock %}