{% extends 'base.html.twig' %}
{% block body %}
   <main class="main">
        	<div class="page-header text-center" style="background-image: url('../../assets/images/page-header-bg.jpg')">
        		<div class="container">
        			<h1 class="page-title">Products<span style="color: #f5cc43; font-weight: 600;" id="pname_title">{{bname}}</span></h1>
        		</div><!-- End .container -->
        	</div><!-- End .page-header -->
            <nav aria-label="breadcrumb" class="breadcrumb-nav mb-2">
                <div class="container">
                    <ol class="breadcrumb" id="bc_lists" >
                        <li class="breadcrumb-item"><a href="/index">Home</a></li>
                        {{blinks | raw}} 
                    </ol>
                </div><!-- End .container -->
            </nav><!-- End .breadcrumb-nav -->

            <div class="page-content">
                <div class="container">
                	<div class="row">
                		<div class="col-lg-9">
                			<div class="toolbox">
                				<div class="toolbox-left">
                					<div class="toolbox-info">
                						Showing <span style="color: #f5cc43; font-weight: 400;" id="rec_count">1 of {{FTCHProd | length}}</span> Products
                					</div><!-- End .toolbox-info -->
                				</div><!-- End .toolbox-left -->

                				<div class="toolbox-right">
                					<div class="toolbox-sort">
                						<label for="sortby">Sort by:</label>
                						<div class="select-custom">
											<select name="sortby" id="sortby" class="form-control">
												<option value="popularity" selected="selected">Most Popular</option>
												<option value="rating">Most Rated</option>
												<option value="date">Date</option>
											</select>
										</div>
                					</div><!-- End .toolbox-sort -->
                					<div class="toolbox-layout">
                						<a href="javascript:void(0);" class="btn-layout active">
                							<svg width="16" height="10">
                								<rect x="0" y="0" width="4" height="4" />
                								<rect x="6" y="0" width="10" height="4" />
                								<rect x="0" y="6" width="4" height="4" />
                								<rect x="6" y="6" width="10" height="4" />
                							</svg>
                						</a>

                						<a href="javascript:void(0);" class="btn-layout">
                							<svg width="10" height="10">
                								<rect x="0" y="0" width="4" height="4" />
                								<rect x="6" y="0" width="4" height="4" />
                								<rect x="0" y="6" width="4" height="4" />
                								<rect x="6" y="6" width="4" height="4" />
                							</svg>
                						</a>
                						<a href="javascript:void(0);" class="btn-layout">
                							<svg width="16" height="10">
                								<rect x="0" y="0" width="4" height="4" />
                								<rect x="6" y="0" width="4" height="4" />
                								<rect x="12" y="0" width="4" height="4" />
                								<rect x="0" y="6" width="4" height="4" />
                								<rect x="6" y="6" width="4" height="4" />
                								<rect x="12" y="6" width="4" height="4" />
                							</svg>
                						</a>
                						<a href="javascript:void(0);" class="btn-layout">
                							<svg width="22" height="10">
                								<rect x="0" y="0" width="4" height="4" />
                								<rect x="6" y="0" width="4" height="4" />
                								<rect x="12" y="0" width="4" height="4" />
                								<rect x="18" y="0" width="4" height="4" />
                								<rect x="0" y="6" width="4" height="4" />
                								<rect x="6" y="6" width="4" height="4" />
                								<rect x="12" y="6" width="4" height="4" />
                								<rect x="18" y="6" width="4" height="4" />
                							</svg>
                						</a>
                					</div>
                				</div>
                			</div>

                            <div class="products mb-3" id="plists">
							{% for prod in FTCHProd %}
			<div class="product product-list">
				<div class="row">
					<div class="col-6 col-lg-3">
						<figure class="product-media">
							<span class="product-label label-out" id="out_stock{{prod.product_id}}" {% if(stock_det[prod.product_id]==0)%} style="display:block;"
						{% else %}
						style="display:none;"
						{% endif %}>Out of Stock</span>
						<a href= "/product/{{prod.product_name}}/{{prod.product_id}}">
						 <img src="{{pro_img_url}}{{prod.prd_image}}" alt="Product image" class="product-image" width="200" height="200">
								</a>
							</figure>
						</div>
					<div class="col-6 col-lg-3 order-lg-last">
						<div class="product-list-action">
						<input type="hidden" id="prd_wgt{{prod.product_id}}" value="{{weight_id[prod.product_id]}}">
					<div class="product-price"> Rs.<span id="prd_price{{prod.product_id}}">{{pr_price[prod.product_id]}}</span>
						</div>
						<div class="ratings-container">
							<div class="ratings">
							<div class="ratings-val" style="width: 20%;"></div>
							</div><!-- End .ratings -->
							<span class="ratings-text">( 2 Reviews )</span>
						</div>
						<div class="product-action">
							{% if(prod.prd_video !='') %}
							<a href="javascript:;" onclick="open_video('{{prod.prd_video}}');" class="btn-product btn-quickview1" title="Quick view"><span>Video</span></a>
							{% else %}
							<a href="javascript:;" style="width:20%;" title="">&nbsp;</a>
                            
							{% endif %}
							<a href="javascript:;" class="btn-product btn-compare" title="Compare"><span>Share</span></a>
                            </div>
							{% if(stock_det[prod.product_id]==0)%}
							{% set st_cart = 'disabled' %}
							{% else %}
							{% set st_cart = '' %}
							{% endif %}
							<div class="details-filter-row details-row-size">
						<!--<label for="size">Weight:</label>-->
						<div class="select-custom">
							<span style="float:left; width: 43%; margin-top: 6px; text-align:right; ">Weight&nbsp;:&nbsp;</span>
							<span style="float:left;width: 50%;">{{prod_wgt[prod.product_id] | raw}}</span>
						</div>
					</div>
							<span id="plist{{prod.product_id}}">
						{% if(app.session.get('loginId')!='')%}
							{% if(cart_pr[prod.product_id]==1)%}
							<a href="javascript:;" id="add_cart{{prod.product_id}}" onclick="add_uncartp({{prod.product_id}},'1','{{pr_weight_id[prod.product_id]}}');" class="btn-product btn-uncart {{st_cart}}"><span>added to cart</span></a>
							{% else %}
							<a  href="javascript:;" id="add_cart{{prod.product_id}}" onclick="add_cartp({{prod.product_id}},'1','{{pr_weight_id[prod.product_id]}}');" class="btn-product btn-cart {{st_cart}}"><span>add to cart</span></a>
							{% endif %}
						{% else %}
						<a href="javascript:;" onclick="add_cart_login();" class="btn-product btn-cart {{st_cart}}"><span>add to cart</span></a>
						{% endif %}
						</span>
                        </div>
                    </div>

					<div class="col-lg-6">
						<div class="product-body product-action-inner">
						<a id="prd_{{prod.product_id}}" href="javascript:;"
						{% if(app.session.get('loginId')!='')%} 
						{% if(cart_wish[prod.product_id]==1)%}
                         onclick="add_unwishlist({{prod.product_id}});"
						 style="color:red; font-weight:bold;"
						{% else %}
						onclick="add_wishlist({{prod.product_id}});"
						{% endif %}
						{% else %}
						 onclick="add_wish_login();"
						{% endif %}
						 class="btn-product btn-wishlist">
							<span>add to wishlist</span></a>
							<div class="product-cat">
							<a href="/category/{{prod.cat_name}}">
							{{prod.cat_name}}</a>
							</div>
						   <h3 class="product-title"><a href="/product/{{prod.product_name}}/{{prod.product_id}}">{{prod.product_name}}&nbsp;<!--({{pr_weight[prod.product_id]}})--></a></h3>
							<div class="product-content">
								<a href="/product/{{prod.product_name}}/{{prod.product_id}}"><p>
								{% set dc = prdc[prod.product_id] | raw %}
								{{  ((dc|slice(0,255)) |raw)}} </p></a>
							</div>
		<div class="product-nav product-nav-thumbs">
			{% if(prod.prd_image1 !='') %}
	<a href="/product/{{prod.product_name}}/{{prod.product_id}}" class="active"> <img src="{{pro_img_small}}{{prod.prd_image1}}" alt="product desc"></a>
			{% endif %}
			{% if(prod.prd_image2 !='') %}
	<a href="/product/{{prod.product_name}}/{{prod.product_id}}">
	<img src="{{pro_img_small}}{{prod.prd_image2}}" alt="product desc">
	</a>
		{% endif %}
			{% if(prod.prd_image3 !='') %}
			<a href="/product/{{prod.product_name}}/{{prod.product_id}}">
				<img src="{{pro_img_small}}{{prod.prd_image3}}" alt="product desc">
			</a>
			{% endif %}
							</div><!-- End .product-nav -->
                                            </div><!-- End .product-body -->
                                        </div><!-- End .col-lg-6 -->
                                    </div><!-- End .row -->
                                </div><!-- End .product -->
						{% endfor %}
                            </div>
                		</div><!-- End .col-lg-9 -->
                		<aside class="col-lg-3 order-lg-first">
                			<div class="sidebar sidebar-shop">
                				<div class="widget widget-clean" style="height:10px;">
                					<label>Filters:</label>
                					<a href="javascript:;" onclick="search_list();" class="sidebar-filter-clear"><span id="spin_load" class="sidebar-filter-clear">Search</span></a>
                				</div>
                				<div class="widget widget-collapsible">
    								<h3 class="widget-title">
									    <a data-toggle="collapse" href="#widget-1" role="button" aria-expanded="true" aria-controls="widget-1">
									        Category
									    </a>
									</h3><!-- End .widget-title -->
		<div class="collapse show" id="widget-1">
			<div class="widget-body">
			
				<div class="filter-items filter-items-count">
				
						{% set p=1 %}
						{% for ct in browse_cat %}

						<div class="filter-item">

							<div class="">
								<input type="checkbox" {% if cat_name is defined %}
								{% if(cat_name==ct.cat_name) %} checked {% endif %} {% endif %} name="catid[]" class="catid" id="cat{{p}}" value="{{ct.cat_id}}" onclick="change_weight(this.value);">
								<label class="" for="cat-1">{{ct.cat_name}}</label>
							</div>
							<span class="item-count">
							{{prdcat[ct.cat_id]}}
							</span>
						</div>
						{% set p=p+1 %}
						{% endfor %}
											</div><!-- End .filter-items -->
										</div><!-- End .widget-body -->
									</div><!-- End .collapse -->
        						</div><!-- End .widget -->
	
        						<div class="widget widget-collapsible">
    								<h3 class="widget-title">
									    <a data-toggle="collapse" href="#widget-2" role="button" aria-expanded="true" aria-controls="widget-2">
									        Weight <small>(ml/grams)</small>
									    </a>
									</h3><!-- End .widget-title -->

									<div class="collapse show" id="widget-2">
										<div class="widget-body" style="margin-left:-9%;">
										<div class="filter-items" id="filter-weights">
									{% set w=1 %}
									{% for pweigh in FTCHweigh %}
								<div class="filter-item">
								<div class="custom-control custom-checkbox">
									<input type="checkbox" name="weightid[]" class="weightid" id="weight{{w}}" value="{{pweigh.wgt_grms | trim }} ">&nbsp;&nbsp;{{pweigh.wgt_grms}}
								</div>
										</div>
										{% set w=w+1 %}
										{% endfor %}
											</div><!-- End .filter-items -->
										</div><!-- End .widget-body -->
									</div><!-- End .collapse -->
        						</div><!-- End .widget -->

                			</div><!-- End .sidebar sidebar-shop -->
                		</aside><!-- End .col-lg-3 -->
                	</div><!-- End .row -->
                </div><!-- End .container -->
            </div><!-- End .page-content -->
        </main><!-- End .main -->
{% endblock %}