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

{% block title %}{% endblock %}

{% block body %}

    <!-- breadcrumb area start -->
    <div class="breadcrumb-area">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap text-center">
                        <h2 class="breadcrumb-title">{% trans %}SPRINT & SPORTS | Boutique en ligne{% endtrans%} </h2>
                        <nav aria-label="breadcrumb">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ path("index") }}">{% trans %}Accueil{% endtrans%}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{% trans %}Boutique{% endtrans%}</li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <br>
            <br>
        </div>
    </div>
    <!-- breadcrumb area end -->

    <div class="page-main-wrapper pt-98 pb-5 pt-sm-55 pb-sm-30">
        <div class="container">
            <div class="row">
                <!-- shop main wrapper start -->
                <div class="col-lg-9 order-lg-2">
                    <div class="shop-product-wrap pb-md-50 pb-sm-5">
                        <div class="shop-top-bar">
                            <div class="row">
                                <div class="col-lg-6 col-md-6">
                                    <div class="top-bar-left">
                                        <div class="product-view-mode mr-70 mr-sm-20">
                                            <a class="active" href="#" data-bs-target="grid"><i
                                                        class="fa fa-th"></i></a>
                                            <a href="#" data-bs-target="list"><i class="fa fa-list"></i></a>
                                        </div>
                                        <div class="product-amount">
                                            <p><span id="results">{{ products|length }}</span> {% trans %} résultats{% endtrans%}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <div class="top-bar-right">
                                        <a href="javascript: void(0)" class="init_filters">{% trans %}Réinitialiser les filtres{% endtrans%}</a>
{#                                        <div class="product-short">#}
{#                                            <p>Trier par : </p>#}
{#                                            <select class="nice-select" name="sortby">#}
{#                                                <option value="pertinence">Pertinence</option>#}
{#                                                <option value="nom_asc">Nom (A - Z)</option>#}
{#                                                <option value="nom_desc">Nom (Z - A)</option>#}
{#                                                <option value="prix_asc">Prix (Moins cher)</option>#}
{#                                                <option value="prix_desc">Prix (Plus cher)</option>#}
{#                                            </select>#}
{#                                        </div>#}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="shop-product-wrap grid row">
                            {% for product in products %}
                                    <div class="products col-lg-4 col-md-4 col-sm-6"
                                         data-cat="{{ product.categoryId.id }}"
                                         data-sub="{{ product.subCategoryId.id }}"
                                         data-brand="{{ product.brandId is not null ? product.brandId.id: null }}"
                                         data-price="{{ product.price }}">
                                        <div class="product__item mb-30" id="{{ product.id }}">
                                            <div class="product__thumb mb-20">
                                                <a class="img-overlay" href="{{ path('product_details', { id: product.id }) }}">
                                                    <img class="pri-img" src="{{ product.image }}"
                                                         alt="">
                                                    <img class="sec-img" src="{{ product.image2 }}"
                                                         alt="">
                                                </a>
{#                                                <div class="action_link">#}
{#                                                    <a title="Ajouter au panier" href="#"><i class="pe-7s-cart"></i></a>#}
{#                                                    #}{#                                                <a title="Add to Wishlist" href="#"><i class="pe-7s-like"></i></a> #}
{#                                                    #}{#                                                <a title="Quick View" href="#" data-bs-target="#quick_view" #}
{#                                                    #}{#                                                   data-bs-toggle="modal"><i class="pe-7s-look"></i></a> #}
{#                                                    #}{#                                                <a title="Details" href="#"><i class="pe-7s-copy-file"></i></a> #}
{#                                                </div>#}
                                            </div>
                                            <div class="product__content">
                                                <h6><a href="{{ path('product_details', { id: product.id }) }}" >{{ product.label }}</a>
                                                    <a href="{{ path('shop', {"route":"cat","id":product.categoryId.id}) }}" > <span class="b-category">{{ product.categoryId.label|trans }}</span> </a></h6>
                                                {% if product.brandId is not null %}
                                                    <p><a href="{{ path('product_details', { id: product.id }) }}"> {{ product.brandId.label }}</a></p>
                                                {% endif %}
                                                <div class="product__price__Ratings">
                                                    <div class="price__box">
                                                        <span class="regular-price">{{ product.price|number_format(0, '', ' ') }} <span
                                                                    class="currency">{% trans %}DZD{% endtrans %}</span> </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> <!-- end single grid item-->

                                        <div class="product-list-item mb-30">
                                            <div class="product__list__thumb">
                                                <a href="{{ path('product_details', { id: product.id }) }}">
                                                    <img class="pri-img" src="{{ product.image }}"
                                                         alt="">
                                                    <img class="sec-img" src="{{ product.image2 }}"
                                                         alt="">
                                                </a>
                                            </div>
                                            <div class="product__List__content">
                                                <h2><a href="{{ path('product_details', { id: product.id }) }}">{{ product.label }}</a></h2>
                                                {% if product.brandId is not null %}
                                                    <h6><a href="{{ path('product_details', { id: product.id }) }}"> {{ product.brandId.label }}</a></h6>
                                                {% endif %}
                                                <h6><a href="{{ path('shop', {"route":"cat","id":product.categoryId.id}) }}" > <span class="b-category">{{ product.categoryId.label|trans }}</span> </a></h6>
                                                <div class="product__price__ratings mb-30">
                                                    <div class="price__box">
                                                <span class="regular-price">{{ product.price |number_format(0, '', ' ')}} <span
                                                            class="currency">{% trans %}DZD{% endtrans %}</span></span>
                                                    </div>
                                                </div>
                                                {#                                        <p class="mb-40">other board in the K2 line-up pops harder or slashes heavier #}
                                                {#                                            while offering the perfect balance of power and finesse. Bambooyah/Honeycomb #}
                                                {#                                            Blended Core is the power-plant to this All Mountain Freestyle board blended #}
                                                {#                                            with Carbon Ollie Bar and Carbon Web additives to</p> #}
                                                <div class="action_link">
                                                    <a href="{{ path('product_details', { id: product.id }) }}" class="add_btn add_cart"><i class="pe-7s-cart"></i>
                                                        {% trans %}Ajouter au panier{% endtrans %}</a>
                                                    {#                                            <div class="product-action-link"> #}
                                                    {#                                                <a title="Add to Wishlist" href="#"><i class="pe-7s-like"></i></a> #}
                                                    {#                                                <a title="Quick View" href="#" data-bs-target="#quick_view" #}
                                                    {#                                                   data-bs-toggle="modal"><i class="pe-7s-look"></i></a> #}
                                                    {#                                                <a title="Details" href="#"><i class="pe-7s-copy-file"></i></a> #}
                                                    {#                                            </div> #}
                                                </div>
                                            </div>
                                        </div>
                                    </div> <!-- product single column end -->
                            {% endfor %}
                            <div class="no-product-found hidden align-content-center"  style="text-align: center; padding: 10%" ><h6>{% trans %}Aucun produit correspondant aux filtres sélectionnés{% endtrans%}</h6></div>
                        </div>
                    </div>
                </div>
                <!-- shop main wrapper end -->
                <!-- shop sidebar start -->
                <div class="col-lg-3 order-lg-1">
                    <div class="shop-sidebar-wrap clearfix pb-md-65">
                        <br>
                        <br>
                        <br>
                        <div class="shop-sidebar mb-30">
                            <h4 class="title mb-20">{% trans %}catégories{% endtrans%}</h4>
                            <ul class="sidebar-category">
                                {% for items in catProducts %}
                                    <li class="cat-list" data-cat="{{ items["cat"].id }}"><a
                                                href="javascript: void(0)">{{ items["cat"].label|trans }}</a>
                                        <ul class="children">
                                            {% for subs in items["sub"] %}
                                                <li class="subcat-list" data-cat="{{ items["cat"].id }}"  data-sub="{{ subs.id }}"><a
                                                            href="javascript: void(0)">{{ subs.label }}</a></li>
                                            {% endfor %}
                                        </ul>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div> <!-- single sidebar end -->
                        <br>
                        <div class="shop-sidebar mb-30">
                            <h4 class="title mb-20">{% trans %}Marques{% endtrans%}</h4>
                            <ul class="sidebar-category">
                                {% for brand in brands %}
                                    <li class="brand-list" data-brand="{{ brand.id }}"><a
                                                href="javascript: void(0)">{{ brand.label }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div> <!-- single sidebar end -->
{#                        <div class="shop-sidebar mb-30">#}
{#                            <h4 class="title mb-30">Prix</h4>#}
{#                            <ul class="price-container">#}
{#                                {% for range in priceRanges %}#}
{#                                    <li>#}
{#                                        <label class="radio-container">#}
{#                                            {{ range.min |number_format(0, '', ' ') }}#}
{#                                            --- {{ range.max |number_format(0, '', ' ') }} - ({{ range.count }})#}
{#                                            <input class="price_range" type="radio" name="radio"#}
{#                                                   data-min="{{ range.min }}"#}
{#                                                   data-max="{{ range.max }}"#}
{#                                            >#}
{#                                            <span class="checkmark"></span>#}
{#                                        </label>#}
{#                                    </li>#}
{#                                {% endfor %}#}
{#                            </ul>#}
{#                        </div> <!-- single sidebar end -->#}
                        {#                        <div class="shop-sidebar mb-30 mb-sm-25"> #}
                        {#                            <div class="advertising1"> #}
                        {#                                <a href={{ path('shop') }}> #}
                        {#                                <img src="build/front/img/product/product-4.jpg" alt=""> #}
                        {#                                </a> #}
                        {#                            </div> #}
                        {#                        </div> <!-- single sidebar end --> #}
                    </div>
                </div>
                <!-- shop sidebar end -->
            </div>
        </div>
    </div>
    <input type="hidden" id="route" value="{{ route }}">
    <input type="hidden" id="target" value="{{ target }}">

{% endblock %}