{% extends '@SyliusShop/layout.html.twig' %}
{% block content %}
<div class="header-image">
<img class="img-header-destock" src="{{ asset('header-image.png', 'shop') }}" alt="cover">
<img class="img-header-responsive" src="{{ asset('header-image-responsive.png', 'shop') }}" alt="cover">
<div class="text-header">
{% if slug == null %}
<h1>Boutique</h1>
<ul>
{% for taxons in taxons %}
<li class="link-taxons-header"><a href="{{ path('sylius_shop_product_index', {slug : taxons.code}) }}">{{ taxons.translations.toArray()['fr_FR'].name }}</a></li>
{% endfor %}
</ul>
{% elseif slug.code == 'categories' %}
<h1>Boutique</h1>
<ul>
{% for taxons in taxons %}
<li class="link-taxons-header"><a href="{{ path('sylius_shop_product_index', {slug : taxons.code}) }}">{{ taxons.translations.toArray()['fr_FR'].name }}</a></li>
{% endfor %}
</ul>
{% else %}
<div class="title-header">
<h1>{{ slug.translations.toArray()['fr_FR'].name }}</h1>
{% set ancestors = slug.ancestors|reverse %}
<a href="{{ path('sylius_shop_product_index', {slug : ancestors[0].code}) }}">
<svg width="39" height="29" viewBox="0 0 39 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.75 0.25L18.075 3.69375L9.64375 12.125L38.5 12.125V16.875L9.64375 16.875L18.075 25.3063L14.75 28.75L0.499995 14.5L14.75 0.25Z" fill="white"/>
</svg>
</a>
</div>
<ul>
{% for taxon in taxons %}
{% if taxon.code == slug.code %}
{% else %}
<li class="link-taxons-header"><a href="{{ path('sylius_shop_product_index', {slug : taxon.code}) }}">{{ taxon.translations.toArray()['fr_FR'].name }}</a></li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
</div>
</div>
<div class="container-h" id="container-category-page">
{% include '@SyliusShop/Product/Index/_header.html.twig' %}
<div class="ui stackable grid">
<div class="four wide column" id="filtre-container">
<div class="header-filter-responsive">
<h3 class="title-category-page">Boutique</h3>
<i class="x icon" id="close-icon-filter"></i>
</div>
{% include '@SyliusShop/Product/Index/_sidebar.html.twig' %}
<form method="POST" action="{{ path('sylius_shop_product_index', {slug : 'categories'}) }}" class="form_category_index">
{% include '@SyliusShop/Product/Index/pricebar.html.twig' %}
{% include '@SyliusShop/Product/Index/colorbar.html.twig' %}
{% include '@SyliusShop/Product/Index/sizebar.html.twig' %}
{# {% include '@SyliusShop/Product/Index/statebar.html.twig' %}#}
{# {% include '@SyliusShop/Product/Index/brandbar.html.twig' %}#}
{# {% include '@SyliusShop/Product/Index/vendortypebar.html.twig' %}#}
{# {% include '@SyliusShop/Product/Index/locationbar.html.twig' %}#}
<button type="submit" class="submit-button-filter">Rechercher</button>
</form>
</div>
<div class="twelve wide column" id="main-index-product">
{% include '@SyliusShop/Product/Index/_main.html.twig' %}
</div>
</div>
</div>
<script>
function toggleDiv(divClass, toggleBtnClass) {
// Sélectionnez la div avec la classe donnée
const div = document.querySelector(`.${divClass}`);
// Sélectionnez le bouton à basculer avec la classe donnée
const toggleBtn = document.querySelector(`.${toggleBtnClass}`);
// Ajoutez un gestionnaire d'événements au clic sur le bouton à basculer
// toggleBtn.addEventListener('click', () => {
// Changez le style de la div pour la masquer ou l'afficher
div.style.display = (div.style.display === 'none') ? 'block' : 'none';
// Changez le texte du bouton à basculer en fonction de l'état de la div
toggleBtn.textContent = (div.style.display === 'none') ? '+' : '-';
// });
}
</script>
{% endblock %}