{% extends 'base.html.twig' %}

{% block title %}Boutique | {{ parent() }}{% endblock %}
{% block meta %}
    <meta name="description" content="{{ productCategory ? productCategory.title }} Le Leader du Mobilier en Afrique, Mobilier et Décoration - Intérieur et Extérieur - Bâtiment et Génie Civil" />
    <meta name="keywords" content="Meubles de Maison, Meubles de Décoration, Meubles de Rangement, Meubles de Bureaux, Litterie, Meubles de Cuisine, ..." />
{% endblock %}
{% block body %}
	<div class="breadcrumb-area">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row breadcrumb_box  align-items-center">
                        <div class="col-lg-6 col-md-6 col-sm-12 text-center text-md-left">
                            <h2 class="breadcrumb-title">{{ productCategory ? productCategory.title : 'Boutique' }}</h2>
                        </div>
                        <div class="col-lg-6  col-md-6 col-sm-12">
                            <ul class="breadcrumb-list text-center text-md-right">
                                <li class="breadcrumb-item"><a href="{{ path('default') }}">Accueil</a></li>
                                <li class="breadcrumb-item active">{{ app.request.get('code') ? app.request.get('code') : 'Boutique'}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="shop-category-area pb-100px pt-70px">
        <div class="container">
            <div class="row">
                <div class="col-lg-12  col-md-12">
                    <div class="shop-top-bar d-flex">
                        <p>Il y a {{ countProduct|number_format(0, ',', ' ')}} Produits.</p>
                        <div class="select-shoing-wrap d-flex align-items-center">
                            <div class="shot-product">
                                <p>Trier par:</p>
                            </div>
                            <div class="shop-select">
                                <select class="shop-sort" id="shopSort" onchange="sortBy();">
                                    <option data-display="Pertinence">Pertinence</option>
                                    <option value="nameAsc" {% if sortBy == 'nameAsc' %} selected="" {% endif %}> Nom, A à Z</option>
                                    <option value="nameDesc" {% if sortBy == 'nameDesc' %} selected="" {% endif %}> Nom, Z à A</option>
                                    <option value="priceAsc" {% if sortBy == 'priceAsc' %} selected="" {% endif %}> Prix du moin cher au plus cher</option>
                                    <option value="priceDesc" {% if sortBy == 'priceDesc' %} selected="" {% endif %}> Prix, du plus cher au moin cher</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="shop-bottom-area">
                        <div class="row">
							{% for product in products %}
								{{ include('default/_shopProductBox.html.twig') }}
								{{ include('default/_productModal.html.twig') }}
							{% endfor %}
                        </div>
                        <div class="pro-pagination-style text-center mb-md-30px mb-lm-30px mt-6" data-aos="fade-up">
							{{ knp_pagination_render(products) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
       function sortBy(){
           sortValue =  $('#shopSort').val();
           window.location.href = '/boutique' + '{{ app.request.get('code') ? '/' ~ app.request.get('code') : ''}}' + '?sortBy=' + sortValue;
       }
    </script>
{% endblock %}