{% extends "@Flexy/FrontBundle/templates/layout.html.twig" %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{asset('bundles/flexyfront/assets/css/chosen.css')}}">
<style>
.chosen-container-single .chosen-single {
padding: 5px 8px 30px 13px !important;
border: 1px solid #f5f5f5 !important;
font-size: 16px !important;
color: #a0a0a0 !important;
}
</style>
{% endblock %}
{% 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">
{% set colBody = "col-lg-9" %}
{% if categoryProduct.id == 75 %}
{% set colBody = "col-lg-12" %}
{% endif %}
<div class="{{colBody}} order-2 order-lg-1">
<!-- Begin Li's Banner Area -->
{% if categoryProduct.id == 75 %}
<div class="text-center p-3" >
<h2><i class="fa fa-hamburger"></i> O'MALL FOOD</h2>
</div>
{% endif %}
{% if categoryProduct.image %}
<div class="single-banner shop-page-banner">
<a href="#">
<img src="/uploads/{{asset(categoryProduct.image)}}" alt="">
</a>
</div>
{% endif %}
<!-- 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">
<p> {{ products.getTotalItemCount }} (Produits)</p>
</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 categoryProduct.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>
{% if categoryProduct.id != 75 %}
<div class="col-lg-3 order-1 order-lg-2">
{{render(path('front_sideBarFilter',{filter:app.request.get("filter")}))}}
</div>
{% endif %}
</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 %}