<div ng-if="query" class="hide" ng-class="query ? 'active' : 'inactive'">
   <div class="container">
      <div class="row margin-vertical affix-top filter-fix" data-spy="affix" data-offset-top="150">
         <div class="sorting-pane rmv-padding col-xs-6">
            <div class="sort-left">
               <a id="sort-by" data-toggle="collapse" class="sprite-bf" data-target="#demo">
                  <h5>{$language.lblSortBy}</h5>
                  <span class="selected_sort" ng-if="sortby==''">None Applied</span>
                  <span class="selected_sort" ng-if="sortby!=''">[[sortby]]</span>
               </a>
            </div>
         </div>
         <div class="sorting-pane rmv-padding filter col-xs-6" ng-if="products.length>0">
            <a  class="sprite-bf filters" ng-click="apply=false">
               <h5>Filter</h5>
               <span class="" ng-if="!filterApplied">None Applied</span>
			   <span class="" ng-if="filterApplied">Applied</span> 
            </a>
         </div>
         <div class="sort-contents col-xs-12 padding collapse" ng-if="products.length>0" id="demo">
            <ul>
               <li>
                  <a href="Javascript:void(0);"  class="sortby"  ng-click="sort('products_popularity','{$language.lblPopularity}')" >{$language.lblPopularity}</a>
               </li>
               <li>
                  <a href="Javascript:void(0);" class="sortby" ng-click="sort('products_newlylisted','{$language.lblNewlyListed}')">{$language.lblNewlyListed}</a>
               </li>
               <li>
                  <a href="Javascript:void(0);" class="sortby" ng-click="sort('products_price_desc','{$language.lblPriceHightoLow}')">{$language.lblPriceHightoLow}</a>
               </li>
               <li>
                  <a href="Javascript:void(0);" class="sortby" ng-click="sort('products_price_asc','{$language.lblPriceLowtoHigh}')">{$language.lblPriceLowtoHigh}</a>
               </li>
               <li>
                  <a href="Javascript:void(0);" class="sortby" ng-click="sort('products_discount','{$language.lblDiscount}')">{$language.lblDiscount}</a>
               </li>
            </ul>
         </div>
      </div>
      <div class="filter-contents col-xs-12 rmv-padding collapse" ng-hide="apply">
            <div class="leftlistBx refine-search">
               <div class="light-bg padding refine-head">
				  <a href="Javascript:void(0);" ng-click="clearAll()" class="clearAllSearch pull-right">Clear all</a>
                  <h6>{$language.lblRefine} 
                  </h6>
                  <div id ="refined-box-content"></div>
               </div>
               <div class="whiteBx refine-content clearfix pos-rel">
                  <ul class="nav">
                     <li class="active"><a data-toggle="tab" href="#brand" ng-if="! (brand | isEmpty)">{$language.lblBrands}</a></li>
                     <li><a data-toggle="tab" href="#categories" ng-if="! (categories | isEmpty)">{$language.lblCategories}</a></li>
                     <li><a data-toggle="tab" href="#business" ng-if="! (business | isEmpty)">{$language.lblSoldBy}</a></li>
                     <li><a data-toggle="tab" href="#availability" ng-if="! (availability | isEmpty)">{$language.lblAvailability}</a></li>
					 
					 
                     <li><a data-toggle="tab" href="#reviews" ng-if="! (reviews | isEmpty)">{$language.lblProductReviews}</a></li>
                     <li><a data-toggle="tab" href="#gender" ng-if="! (gender | isEmpty)">{$language.lblGender}</a></li>
                     <li><a data-toggle="tab" href="#colour" ng-if="! (colour | isEmpty)">{$language.lblColor}</a></li>
                     <li><a data-toggle="tab" href="#idealfor" ng-if="! (idealfor | isEmpty)">{$language.lblIdealfor}</a></li>
                     <li><a data-toggle="tab" href="#women_clothing_category" ng-if="! (women_clothing_category | isEmpty)">{$language.lblClothCategory}</a></li>
                     <li><a data-toggle="tab" href="#discount" ng-if="! (discount | isEmpty)">{$language.lblDiscount}	</a></li>
                  </ul>
                  <div class="tab-content light-bg ">   
					 <div class="listMenu tab-pane active" id="brand" ng-if="! (brand | isEmpty)" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
                        <ul>
                           <li class="li_brandIDs" ng-repeat="(item,key) in brand">
                              <input   type="checkbox" name="brandIDs[]" ng-model="brands[item]"  id="brands_[[$index]]" class="brandIDs_class " > <label for="brands_[[$index]]">[[item]] ([[key]])</label>
                           </li>
                        </ul>
                     </div>
					 
					 
					 
					 <div class="listMenu tab-pane " id="business" ng-if="! (business | isEmpty)" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
                        <ul>
                           <li class="li_genderIDs" ng-repeat="(item,key) in business">
                              <input   type="checkbox" name="businessIDs[]" ng-model="businesses[item]"  id="businesses_[[$index]]" class="businessIDs_class " > <label for="businesses_[[$index]]">[[item]] ([[key]])</label>
                           </li>
                        </ul>
                     </div>
					 
					 
					 <div class="listMenu tab-pane " id="categories" ng-if="! (categories | isEmpty)" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
                        <ul>
                           <li class="li_genderIDs" ng-repeat="(item,key) in categories">
                              <input   type="checkbox" name="categoriesIDs[]" ng-model="categorieses[item]"  id="categorieses_[[$index]]" class="categoriesIDs_class " > <label for="categorieses_[[$index]]">[[ item.split("~*")[0] ]] ([[key]])</label>
                           </li>
                        </ul>
                     </div>
					 
					 <div class="listMenu tab-pane " id="availability" ng-if="! (availability | isEmpty)" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
                        <ul>
                           <li class="li_genderIDs" ng-repeat="(item,key) in availability">
                              <input   type="checkbox" name="availabilityIDs[]" ng-model="availabilitys[item]"  id="availabilitys_[[$index]]" class="availabilityIDs_class " > <label for="availabilitys_[[$index]]">[[item]] ([[key]])</label>
                           </li>
                        </ul>
                     </div>
					 
					 
					 
					<!--  <div class="listMenu tab-pane " id="reviews" ng-if="! (reviews | isEmpty)" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
                        <ul>
                           <li class="li_genderIDs" ng-repeat="(item,key) in reviews">
                              <input   type="checkbox" name="reviewsIDs[]" ng-model="reviewses[item]"  id="reviewses_[[$index]]" class="reviewsIDs_class " > <label for="reviewses_[[$index]]"><div class="starRating"><div class="rated" style="width:[[item*20]]%"></div></div> ([[key]])</label>
                           </li>
                        </ul>
                     </div> -->
					 
					 
					 <div class="listMenu tab-pane " id="gender" ng-if="! (gender | isEmpty)" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
                        <ul>
                           <li class="li_genderIDs" ng-repeat="(item,key) in gender">
                              <input   type="checkbox" name="genderIDs[]" ng-model="genders[item]"  id="genders_[[$index]]" class="genderIDs_class " > <label for="genders_[[$index]]">[[item]] ([[key]])</label>
                           </li>
                        </ul>
                     </div>
					 
					 
					 <div class="listMenu tab-pane " id="colour" ng-if="! (colour | isEmpty)" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
                        <ul>
                           <li class="li_colourIDs" ng-repeat="(item,key) in colour">
                              <input   type="checkbox" name="colourIDs[]" ng-model="colours[item]"  id="colours_[[$index]]" class="colourIDs_class " > <label for="colours_[[$index]]">[[item]] ([[key]])</label>
                           </li>
                        </ul>
                     </div>
					 <div class="listMenu tab-pane " id="idealfor" ng-if="! (idealfor | isEmpty)" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
                        <ul>
                           <li class="li_idealforIDs" ng-repeat="(item,key) in idealfor">
                              <input   type="checkbox" name="idealforIDs[]" ng-model="idealfors[item]"  id="idealfors_[[$index]]" class="idealforIDs_class " > <label for="idealfors_[[$index]]">[[item]] ([[key]])</label>
                           </li>
                        </ul>
                     </div>
					 <div class="listMenu tab-pane " id="women_clothing_category" ng-if="! (women_clothing_category | isEmpty)" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
                        <ul>
                           <li class="li_women_clothing_categoryIDs" ng-repeat="(item,key) in women_clothing_category">
                              <input   type="checkbox" name="women_clothing_categoryIDs[]" ng-model="women_clothing_categorys[item]"  id="women_clothing_categorys_[[$index]]" class="women_clothing_categoryIDs_class " > <label for="women_clothing_categorys_[[$index]]">[[item]] ([[key]])</label>
                           </li>
                        </ul>
                     </div>

                     <div class="listMenu tab-pane" id="discount" ng-if="! (discount | isEmpty)" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
                        <ul>
                           <li ng-repeat="(item,key) in discount">
                              <input type="radio" type="checkbox" name="discounts[]" ng-model="discounts[item]"  id="discount_[[$index]]">
                              <label class="attributeSearchLabel" for="discount_[[$index]]">
                               [[item]] ([[key]])</label>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
               <div class="apply_botton text-center">
    <div class="col-xs-6">
        <a class="btn btn-primary btn-sm applyNow btn-block" ng-click="filter();apply=true">{$language.lblApply}</a> </div>
			   <div class="col-xs-6">
                   <a class="btn btn-default btn-sm applyNow btn-block" ng-click="apply=true">{$language.lblCancel}</a>
                </div>
            </div>
            </div>
         </div>
      <div class="row">
         <div class="right-content-block col-xs-12 pull-right rightPane margin-bottom" >
            <div class="list-block">
             <h6>								
                  We found [[nbHits]] results matching "[[query]]" in [[processingTimeMS]] ms
               </h6>
               <div class="productListing">
                  <ul class="cateListing gridBg clearfix">
                     <li class="col-xs-6 col-sm-3 rmv-padding"  ng-repeat="product in products">
					   <div class="bx-contr">
						  <div class="imageBox">
							 
							 {html->anchor href="[[product.requestPath]]" title=$language.lblViewDetails content="<img class='lazy img-responsive' ng-src='{$view_public_path}/uploads/catalog/product/custom/[[product.productImage]]' src='{$view_images}/loader-small.gif' alt='[[product.productTitle]]'>"}
							 <!-- days left starts -->
							 
							 <!-- days left ends -->
						  </div>
						  <div class="deatils">
						  <div class="productTitle  clearfix">
							 {html->anchor href="[[product.requestPath]]" content="[[product.productTitle]]" class="slip"}</div>
							<div class="clearfix discription" ng-if="product.brand!=''">
							 [[product.brand]]
							 </div>
							  <div class="clearfix" >
								<div class="pull-left">
								   <del ng-if="product.productOptionRegularPrice!=product.offerPrice">{$_defaultCurrencySymbolLeft} [[product.productOptionRegularPrice]] {$_defaultCurrencySymbolRight}</del> 
								   <span class="price">{$_defaultCurrencySymbolLeft} [[product.offerPrice]] {$_defaultCurrencySymbolRight}</span>  
								</div>
								
								<div class="offerPrice pull-left btn-primary" ng-if="product.productOptionDiscount > 0">[[product.productOptionDiscount]]<span>% off</span></div>
								
							 </div>
							 <div class="clearfix discription">
								[[product.productDescription]]{html->anchor href="[[product.productID]]" class="bpfc" content="{$language.lblMore}"}
							 </div>
							 <div class="clearfix discription" ng-if="product.brand!=''">
							{html->anchor href="brand/[[product.brandKey]]" title='[[product.brand]]' content='[[product.brand]]'}
							 </div>
							 
							 <div class="ratingBx" ng-if="findAvg(product.reviews) > 0">
             				<div class="starRating"><div class="rated" style="width:[[findAvg(product.reviews)*20]]%"></div></div>[ [[product.reviews.length]] Review(s)  ] 
							 </div>
							 
							 
							
						  </div>
						  <!-- review starts -->
						  <!-- review ends -->
						  <!-- add to wishlist starts -->
						  <!-- add to wish list ends -->
					   </div>
					</li>
                     
                  </ul>
				  <div class="text-center" ng-if="products.length>0">
						<a href="javascript:void(0)" id="view_more_products" class="btn btn-default" ng-click="infiniteScroll()">Show more items</a>
					</div>
				 <!--  <div infinite-scroll="infiniteScroll()" infinite-scroll-distance="3" infinite-scroll-disabled="false" infinite-scroll-immediate-check="true"></div> -->
               </div>

            </div>
         </div>
      </div>
   </div>
</div>