{% extends "@Flexy/FrontBundle/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 > 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/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/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 %}