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

{% block title %}{% endblock %}

{% block body %}
    <!-- slider area start -->
    <div class="slider-area">
        <div class="hero-slider-active hero__1 slick-arrow-style">
            <div class="single-slider d-flex align-items-center" style="background-image: url('build/front/img/slider/home1-slider1.jpg');">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="slider-text slider-style-1 text-center">
                                <h4>{% trans %}Vêtements & équipements de {% endtrans %} <span>{% trans %}sport{% endtrans %}</span></h4>
                                {% if maxPromo != null %}
                                    <h1>{% trans %}Des réductions jusqu'à{% endtrans %}  <span>{{ maxPromo != null ? maxPromo }}{% trans %}%{% endtrans %}</span> </h1>
                                    <p>{% trans %}sur Adidas, nike, reebok, under armour{% endtrans %}</p>
                                {% else %}
                                    <h1>{% trans %}Des réductions{% endtrans %}  <span>{% trans %}sur une grande sélection{% endtrans %}</span> </h1>
                                    <p>{% trans %}sur Adidas, nike, reebok, under armour{% endtrans %}</p>
                                {% endif %}
                                <a class="home-btn" href="{{ path('shop') }}">{% trans %}Découvrir la boutique{% endtrans %}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="herobanner-progress"></span>
            </div>
            <div class="single-slider d-flex align-items-center" style="background-image: url('build/front/img/slider/home1-slider2.jpg');">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="slider-text slider-style-1 text-center">
                                <h4>{% trans %}Vêtements & équipements de {% endtrans %}<span>{% trans %}sport{% endtrans %}</span></h4>
                                {% if maxPromo != null %}
                                    <h1>{% trans %}Des réductions jusqu'à{% endtrans %}  <span>{{ maxPromo != null ? maxPromo }}{% trans %}%{% endtrans %}</span> </h1>
                                    <p>{% trans %}sur Adidas, nike, reebok, under armour{% endtrans %}</p>
                                {% endif %}
                                <a class="home-btn" href="{{ path('shop') }}">{% trans %}Découvrir la boutique{% endtrans %}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="herobanner-progress"></span>
            </div>
        </div>
    </div>
    <!-- slider area end -->

    <!-- features item area start -->
    <div class="features-item-area pt-100 pt-sm-55">
        <div class="container-fluid">
            <div class="custom-row d-flex">
                {% for categorie in categories %}
                    {% if categorie.image is defined %}
                        <div class="col-lg-4">
                            <div class="feature-single-item">
                                <div class="feature__img">
                                    <div class="feature__thum">
                                        <img src={{ categorie.image }} alt="">
                                    </div>
                                    <div class="feature__des">
                                        <div class="feature__content">
                                            <h3>{{ categorie.label|trans }}</h3>
                                            <a href="{{ path('shop', {"route":"cat","id":categorie.id}) }}">{% trans %}Découvrir la boutique{% endtrans %}</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="text__left">
                                    <span>{{ categorie.label|trans }}</span>
                                </div>
                            </div> <!-- features single item end -->
                        </div> <!-- features single column end -->
                    {% endif %}
                {% endfor %}
{#                <div class="col-lg-4">#}
{#                    <div class="feature-single-item">#}
{#                        <div class="feature__thum">#}
{#                            <img src="build/front/img/features/cms_1.2.jpg" alt="">#}
{#                        </div>#}
{#                        <div class="feature__des">#}
{#                            <div class="feature__content">#}
{#                                <h3>Hommes</h3>#}
{#                                <a href="{{ path('shop') }}">Découvrir la boutique</a>#}
{#                            </div>#}
{#                        </div>#}
{#                        <div class="text__left">#}
{#                            <span>Hommes</span>#}
{#                        </div>#}
{#                    </div> <!-- features single item end -->#}
{#                </div> <!-- features single column end -->#}
{#                <div class="col-lg-4">#}
{#                    <div class="feature-single-item">#}
{#                        <div class="feature__thum">#}
{#                            <img src="build/front/img/features/cms_1.3.jpg" alt="">#}
{#                        </div>#}
{#                        <div class="feature__des">#}
{#                            <div class="feature__content">#}
{#                                <h3>Équipements</h3>#}
{#                                <a href="{{ path('shop') }}">Découvrir la boutique</a>#}
{#                            </div>#}
{#                        </div>#}
{#                        <div class="text__left">#}
{#                            <span>Équipements</span>#}
{#                        </div>#}
{#                    </div> <!-- features single item end -->#}
{#                </div> <!-- features single column end -->#}
            </div>
        </div>
    </div>

    <!-- our product area start -->
    <div class="section-wrapper pt-98 pb-43 pt-sm-50 pb-sm-17">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section__title text-center mb-30">
                        <h2>{% trans %}Nouvautés & <span>Promos</span>{% endtrans %}</h2>
                        <p>{% trans %}Découvrez les <span>nouveaux articles</span>, ainsi que les meilleures <span>promotions</span> sur une large séléction.{% endtrans %}</p>
                    </div>
                </div>
            </div> <!-- section title end -->
            <div class="row">
                <div class="col-12">
                    <div class="product-tab d-flex justify-content-center mb-45">
                        <ul class="nav d-flex justify-content-center">
                            <li>
                                <a class="active" data-bs-toggle="tab" href="#tab_one">{% trans %}Nouveautés{% endtrans %}</a>
                            </li>
                            <li>
                                <a data-bs-toggle="tab" href="#tab_two">{% trans %}Promotions{% endtrans %}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="tab_one">
                            <div class="product-carousel-active2 row slick-arrow-style2">
                                {% for product in newProducts %}
                                    <div class="col">
                                        <div class="product__item mb-50">
                                            <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="Add to Cart" href="{{ path('product_details', { id: product.id }) }}"><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>#}
                                                </div>
                                            </div>
                                            <div class="product__content">
                                                <h6><a href="{{ path('product_details', { id: product.id }) }}">{{ product.label|trans }}</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|trans }}</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> <!-- product single item end -->
                                    </div> <!-- product single column end -->
                                {% endfor %}
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab_two">
                            <div class="product-carousel-active2 row slick-arrow-style2">
                                {% for promo,promoProducts in promosProducts %}
                                    {% for prod in promoProducts %}
                                    <div class="col">
                                        <div class="product__item mb-50">
                                            <div class="product__thumb mb-20">
                                                <a class="img-overlay" href="{{ path('product_details', { id: prod.id }) }}">
                                                    <img class="pri-img" src="{{ prod.image }}" alt="">
                                                    <img class="sec-img" src="{{ prod.image2 }}" alt="">
                                                    <span class="taux-promo">-{{ promo }} %</span>
                                                </a>
                                                <div class="action_link">
                                                    <a title="Add to Cart" href="{{ path('product_details', { id: prod.id }) }}"><i class="pe-7s-cart"></i></a>
                                                    {#                                                    <a title="Add to Wishlist" href="javascript:void(0);"><i class="pe-7s-like"></i></a>#}
                                                    {#                                                    <a title="Quick View" href="javascript:void(0);" data-bs-target="#quick_view" data-bs-toggle="modal"><i class="pe-7s-look"></i></a>#}
                                                </div>
                                            </div>
                                            <div class="product__content">
                                                <h6>
                                                    <a href="{{ path('product_details', { id: prod.id }) }}">{{ prod.label }}</a>
                                                    <a href="{{ path('shop', {"route":"cat","id":prod.categoryId.id}) }}" > <span class="b-category">{{ prod.categoryId.label }}</span></a>

                                                </h6>

                                                {% if prod.brandId is not null %}
                                                    <p><a href="{{ path('product_details', { id: prod.id }) }}"> {{ prod.brandId.label }}</a></p>
                                                {% endif %}

                                                <div class="product__price__Ratings">
                                                    <div class="price__box">
                                                        <span class="regular-price"><span class="special-price">{{ prod.discountPrice |number_format(0, '', ' ')}}</span> <span class="currency">{% trans %}DZD{% endtrans %}</span></span>
                                                        <span class="old-price"><del>{{ prod.price |number_format(0, '', ' ')}}</del> <span class="currency">{% trans %}DZD{% endtrans %}</span></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> <!-- product single item end -->
                                    </div> <!-- product single column end -->
                                {% endfor %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- our product area end -->

    <!-- Quick view modal start -->
    <div class="modal fade" id="quick_view">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-bs-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="error">
                            <h1>404</h1>
                            <h2>OPPS! Cette page est en cours de création</h2>
                            <hr>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Quick view modal end -->






{% endblock %}
{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
    {{ encore_entry_script_tags('tools') }}
{% endblock %}