{% extends "@Flexy/FrontBundle/Themes/" ~ settings.get.assetFolderName|capitalize ~ "/templates/layout.html.twig"  %}

{% block body %}

       <div class="body-wrapper">

            <!-- Begin Li's Breadcrumb Area -->
            <div class="breadcrumb-area d-none">
                <div class="container">
                    <div class="breadcrumb-content">
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li class="active">Shop List Right Sidebar</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Li's Breadcrumb Area End Here -->
            <!-- Begin Li's Content Wraper Area -->
            <div class="content-wraper pt-60 pb-60">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-9 order-2 order-lg-1">
                            <!-- Begin Li's Banner Area -->
                            <div class="single-banner shop-page-banner">

                                {% if vendor.coverImage %}
                                <a href="#">
                                    <img src="{{asset('uploads/'~vendor.coverImage)}}" alt="Li's Static Banner">
                                </a>
                                {% endif %}
                            </div>
                            <!-- Li's Banner Area End Here -->
                            <!-- shop-top-bar start -->
                            <div class="shop-top-bar mt-30">
                                <div class="shop-bar-inner">
                                    <div class="product-view-mode">
                                        <!-- shop-item-filter-list start -->
                                        <ul class="nav shop-item-filter-list" role="tablist">
                                            <li role="presentation"><a data-toggle="tab" role="tab" aria-controls="grid-view" href="#grid-view"><i class="fa fa-th"></i></a></li>
                                            <li class="active" role="presentation"><a aria-selected="true" class="active show" data-toggle="tab" role="tab" aria-controls="list-view" href="#list-view"><i class="fa fa-th-list"></i></a></li>
                                        </ul>
                                        <!-- shop-item-filter-list end -->
                                    </div>
                                    <div class="toolbar-amount">
                                        <span>1 sur 9</span>
                                    </div>
                                </div>
                                <!-- product-select-box start -->
                                <div class="product-select-box">
                                    <div class="product-short">
                                        <p>Lister par:</p>
                                        <select class="nice-select">
                                            <option value="trending">Les nouveaux</option>
                                            <option value="sales">Nom (A - Z)</option>
                                            <option value="sales">Nom (Z - A)</option>
                                            <option value="rating">Prix (Low &gt; High)</option>
                                            <option value="date">Avis (Lowest)</option>
                                            <option value="price-asc">Model (A - Z)</option>
                                            <option value="price-asc">Model (Z - A)</option>
                                        </select>
                                    </div>
                                </div>
                                <!-- product-select-box end -->
                            </div>
                            <!-- shop-top-bar end -->
                            <!-- shop-products-wrapper start -->
                            <div class="shop-products-wrapper">
                                <div class="tab-content">
                                    <div id="grid-view" class="tab-pane fade" role="tabpanel">
                                        <div class="product-area shop-product-area">
                                            <div class="row">
                                               {% for singleProduct in products %}
                                                <div class="col-lg-4 col-md-4 col-sm-6 mt-40">
                                                    <!-- single-product-wrap start -->
                                                    
                                               

                                                        
                                                {% include "@Flexy/FrontBundle/Themes/" ~ settings.get.assetFolderName|capitalize ~ "/templates/products/includes/_singleProduct.html.twig" with {singleProduct:singleProduct} %}

  

                                               
                                                    <!-- single-product-wrap end -->
                                                </div>
                                                 {% endfor %}

                                            </div>
                                        </div>
                                    </div>
                                    <div id="list-view" class="tab-pane fade product-list-view active show" role="tabpanel">
                                        <div class="row">
                                            <div class="col">
                                                  {% for singleProduct in products %}
                                               

                                                        
                                                {% include "@Flexy/FrontBundle/Themes/" ~ settings.get.assetFolderName|capitalize ~ "/templates/products/includes/_singleProductListView.html.twig" with {singleProduct:singleProduct} %}

  

                                                {% endfor %}

                                            </div>
                                        </div>
                                    </div>
                                    <div class="paginatoin-area">
                                        <div class="row">
                                            <div class="col-lg-6 col-md-6">
                                                <p> {{ products.getTotalItemCount }} (Produits)</p>
                                            </div>
                                            <div class="col-lg-6 col-md-6 menu-item">
                                                {{ knp_pagination_render(products) }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- shop-products-wrapper end -->
                        </div>
                        <div class="col-lg-3 order-1 order-lg-2">


                            <div class="vendor_shop text-center">
                                    <div class="single-banner shop-page-banner">
                                        <a href="#">
                                        <img style="width:100%;" src="{{asset("uploads/"~vendor.image)}}" />
                                        </a>
                                    </div>
                                
                                    <br>
                                    <br>
                                    <h4>{{vendor.name}}</h4>
                                    <p>{{vendor.description|raw}}</p>
                            </div>

                            
                            {{render(path('front_sideBarFilter',
                            {
                                filter:app.request.get("filter"),
                                vendor:vendor.id
                                
                                }))}}
                        </div>
                    </div>
                </div>
            </div>
            <!-- Content Wraper Area End Here -->


        </div>

{% endblock %}

   {% block javascripts %}
        {{parent()}}
        <script>
            $(".shop-item-filter-list a").click(function(){
                var cible = $(this).attr("aria-controls");
                $(".tab-pane").removeClass("active show");
                $("#"+cible).addClass("active show");

            });
        </script>


    {% endblock %}