<div ng-if="query" class="hide bg-white" ng-class="query ? 'active' : 'inactive'">
    {form->hidden name="selectedProductOption" value=""}
    
   <div class="container">
      <div class="catalog overflow row m-0">
      <div class="col-lg-3 sort_blk left-content-block mt-3 mt-lg-0 p-0" ng-if="nbHits > 0">

           <div class="row prdctFilterMo d-lg-none" >
                <div class="col-6 rmv-padding FltrIco">
                    <span class="padding-right icon-filter"></span><span>{$language.lblFilter}</span>
                </div>
                <div class="col-6 rmv-padding FltrSort">
                    <span ng-if="sortby ==''">{$language.lblSortBy}</span>
                    <span ng-if="sortby !=''" ng-bind-html='sortby'></span>
                </div>
            </div>
			<div class="col-xs-12 mob_sort algl prdctFilter algl-filter d-lg-none sorToggle">
                <div class="Fitlersort TopFilterSort  clps-cnt-mob">
                    <div class="sorting-pane">
                        <div class="tabs">
                           <ul>
                    <li>
                       <span class="circle_icon "></span>
                       <a class="sort_item" href="Javascript:void(0);"   ng-click="sort('products_popularity_{$AjaxCurrLanguage}','Popularity')" >{$language.lblPopularity}</a>
                    </li>
                    <li>
                       <span class="circle_icon visible"></span>
                       <a class="sort_item" href="Javascript:void(0);"  ng-click="sort('products_newlylisted_{$AjaxCurrLanguage}','Newly Listed')">{$language.lblNewlyListed}</a>
                    </li>
                    <li>
                       <span class="circle_icon "></span>
                       <a class="sort_item" href="Javascript:void(0);"  ng-click="sort('products_price_desc_{$AjaxCurrLanguage}','Price - High to Low')">{$language.lblPriceHightoLow}</a>
                    </li>
                    <li>
                       <span class="circle_icon "></span>
                       <a class="sort_item" href="Javascript:void(0);"  ng-click="sort('products_price_asc_{$AjaxCurrLanguage}','Price - Low to High')">{$language.lblPriceLowtoHigh}</a>
                    </li>
                    <li>
                       <span class="circle_icon "></span>
                       <a class="sort_item" href="Javascript:void(0);" ng-click="sort('products_discount_{$AjaxCurrLanguage}','Discount')">{$language.lblDiscount}</a>
                    </li>
                 </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="prdctFilter sorToggle" id="fx-me0">
            <div class="leftlistBx padding-horizontal"  ng-if="products.length>0">
            <div class="refine-search">
                      <div class="filter-head p-3 d-lg-none">
                  <span class="clearAllSearch d-lg-none icon-cross-fill mfillter" ng-click="resetAllFilter()" id="mfillter">{$language.lblClearAll}</span>
                      <h4 class="d-lg-none m-0">{$language.lblFilterBy}</h4></div>
				  <div class="clearfix FltrSctn alg-search border-0"  ng-if="! (brand | isEmpty) ">
					  <a href="Javascript:void(0);" id="clearBrands" class="float-right" ng-click="reset('brand')">{$language.lblReset}</a>
					  <h6 class="expand-clsps plus-ico">
						 <span class="openListing"></span>{$language.lblBrands}						
					  </h6>
						<div class="showBox sort_collapse">
							<div class="listMenu listMenuScroll slip" 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"  ng-model="brands[item]"  id="brands_[[$index]]" class="brandIDs_class " ng-change="filter()"> <label for="brands_[[$index]]" class="text-ellipsis">[[item]] <span class="count">([[key]])</span></label>
									 </li>
								</ul>
							</div>
						</div>
				  </div>
				  <div class="clearfix margin-vertical FltrSctn alg-search"  ng-if="! (categories | isEmpty) ">
					  <a href="Javascript:void(0);" id="clearCategories" class="float-right" ng-click="reset('categories')">{$language.lblReset}</a>
					  <h6 class="expand-clsps plus-ico">
						 <span class="openListing"></span>{$language.lblCategories}						
              </h6>

						<div class="showBox sort_collapse">
							<div class="listMenu listMenuScroll slip" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
								<ul>
									 <li class="li_categoriesIDs" ng-repeat="(item,key) in categories">
										<input type="checkbox"  ng-model="categorieses[item]"  id="categorieses_[[$index]]" class="categoriesIDs_class " ng-change="filter()"> <label for="categorieses_[[$index]]" class="text-ellipsis">[[ item.split("~*")[0] ]] <span class="count">([[key]])</span></label>
									 </li>
								</ul>
							</div>
						</div>
				  </div>
				  <div class="clearfix margin-vertical FltrSctn alg-search"  ng-if="! (business | isEmpty) ">
					  <a href="Javascript:void(0);" id="clearBrands" class="float-right" ng-click="reset('business')">{$language.lblReset}</a>
					  <h6 class="expand-clsps plus-ico">
						 <span class="openListing"></span>{$language.lblSoldBy}						
            </h6>
						<div class="showBox sort_collapse">
							<div class="listMenu listMenuScroll slip" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
								<ul>
									 <li class="li_businessIDs" ng-repeat="(item,key) in business">
										<input type="checkbox"  ng-model="businesses[item]"  id="businesses_[[$index]]" class="businessIDs_class " ng-change="filter()"> <label for="businesses_[[$index]]" class="text-ellipsis">[[item]] <span class="count">([[key]])</span></label>
									 </li>
								</ul>
							</div>
						</div>
				  </div>
				  <div class="clearfix margin-vertical FltrSctn alg-search"  ng-if="! (availability | isEmpty) ">
					  <a href="Javascript:void(0);" class="float-right" ng-click="reset('availability')">{$language.lblReset}</a>
					 <h6 class="expand-clsps plus-ico h6style">
						 <span class="openListing"></span>{$language.lblAvailability}						
                      </h6>
						<div class="showBox sort_collapse">
							<div class="listMenu listMenuScroll slip" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
								<ul>
									 <li class="li_availabilityIDs" ng-repeat="(item,key) in availability">
										<input type="checkbox"  ng-model="availabilitys[item]"  id="availabilitys_[[$index]]" class="availabilityIDs_class " ng-change="filter()"> <label for="availabilitys_[[$index]]" class="text-ellipsis">[[item]] <span class="count">([[key]])</span></label>
									 </li>
								</ul>
							</div>
						</div>
				  </div>

				  <div class="clearfix margin-vertical FltrSctn alg-search"  ng-if="! (gender | isEmpty) ">
				  <a href="Javascript:void(0);"  class="float-right" ng-click="reset('gender')">{$language.lblReset}</a>
                  <h6 class="expand-clsps plus-ico h6style">
                     <span class="openListing"></span>{$language.lblGender}						
                      </h6>
                    <div class="showBox sort_collapse" custom-scroll>
						<div class="listMenu listMenuScroll slip" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
							<ul>
                                 <li class="li_brandIDs" ng-repeat="(item,key) in gender">
                                    <input type="checkbox"  ng-model="genders[item]"  id="genders_[[$index]]"  ng-change="filter()"> <label for="genders_[[$index]]" class="text-ellipsis">[[item]] <span class="count">([[key]])</span></label>
                                 </li>
                            </ul>
                        </div>
					</div>
				  </div>
				  <div class="clearfix margin-vertical FltrSctn alg-search"  ng-if="! (colour | isEmpty) ">
				  <a href="Javascript:void(0);"  class="float-right" ng-click="reset('colour')">{$language.lblReset}</a>
                  <h6 class="expand-clsps plus-ico h6style">
                     <span class="openListing"></span>{$language.lblColor}						
                      </h6>
                    <div class="showBox sort_collapse">
						<div class="listMenu listMenuScroll slip" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
							<ul>
                                 <li class="li_brandIDs" ng-repeat="(item,key) in colour">
                                    <input type="checkbox"  ng-model="colours[item]"  id="colours_[[$index]]"  ng-change="filter()"> <label for="colours_[[$index]]" class="text-ellipsis">[[item]] <span class="count">([[key]])</span></label>
                                 </li>
                            </ul>
                        </div>
					</div>
				  </div>
				  <div class="clearfix margin-vertical FltrSctn alg-search"  ng-if="! (idealfor | isEmpty) ">
				  <a href="Javascript:void(0);"  class="float-right" ng-click="reset('idealfor')">{$language.lblReset}</a>
                 <h6 class="expand-clsps plus-ico">
                     <span class="openListing"></span>{$language.lblIdealfor}						
                  </h6>
                    <div class="showBox sort_collapse">
						<div class="listMenu listMenuScroll slip" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
							<ul>
                                 <li class="li_brandIDs" ng-repeat="(item,key) in idealfor">
                                    <input type="checkbox"  ng-model="idealfors[item]"  id="idealfors_[[$index]]"  ng-change="filter()"> <label for="idealfors_[[$index]]" class="text-ellipsis">[[item]] <span class="count">([[key]])</span></label>
                                 </li>
                            </ul>
                        </div>
					</div>
				  </div>
				  <div class="clearfix margin-vertical FltrSctn alg-search"  ng-if="! (women_clothing_category | isEmpty) ">
				  <a href="Javascript:void(0);"  class="float-right" ng-click="reset('women_clothing_category')">{$language.lblReset}</a>
                 <h6 class="expand-clsps plus-ico">
                     <span class="openListing"></span>{$language.lblClothCategory}						
                  </h6>
                    <div class="showBox sort_collapse">
						<div class="listMenu listMenuScroll slip" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
							<ul>
                                 <li class="li_brandIDs" ng-repeat="(item,key) in idealfor">
                                    <input type="checkbox"  ng-model="women_clothing_categorys[item]"  id="women_clothing_categorys_[[$index]]"  ng-change="filter()"> <label for="women_clothing_categorys_[[$index]]" class="text-ellipsis">[[item]] <span class="count">([[key]])</span></label>
                                 </li>
                            </ul>
                        </div>
					</div>
				  </div>
				  <div class="clearfix margin-vertical FltrSctn alg-search"  ng-if="! (discount | isEmpty) ">
					  <div class="sep02"></div>
					  <a href="Javascript:void(0);" class="clearDiscountRange float-right" ng-click="reset('discount')" >{$language.lblReset}</a>
					 <h6 class="expand-clsps plus-ico">
						 <span class="openListing spriteImg"></span>{$language.lblDiscount}						
					  </h6>
					  <div class="showBox sort_collapse" class="listMenu" custom-scroll="{ 'theme': ['minimal-dark', 'dark', 'inset-3-dark', 'rounded-dark'], 'autoHide': false }">
						 <ul>
							<li ng-repeat="(item,key) in discount">
								<input type="checkbox" name="discounts[]" ng-model="discounts[item]"  id="discount_[[$index]]" ng-change="filter()"> <label for="discount_[[$index]]" class="text-ellipsis"> [[item]] <span class="count">([[key]])</span></label>
							</li>
						 </ul>
					  </div>
                 </div>
                <div class="btn-fix clearfix">
                  <div class="apply-fillter btn btn-primary d-lg-none" id="applyfltr">{$language.lblApplyFilter}</div></div>
                 </div>
               </div>

            </div>
         </div>
        <div class="col-lg-9 col-12 p-0 right-content-block">
            <div class="list-block pt-3">
              <div class="pl-3">
               <div class="font-small">								
                  {$language.lblSearchResults}	 			
               </div>
			    <div class="font-small mb-3">								
                   {$language.lblWeFound} <span class="text-secondary font-medium">[[nbHits]]</span> {$language.lblResultsMatching} <span class="bpfc font-semibold">"[[query]]"</span> {$language.lblIn} <span class="text-secondary font-medium">[[processingTimeMS]]</span> {$language.lblms}
               </div>
            </div>
			   
               <div class="fixing-element00 sorting-pane clearfix d-none d-lg-block" ng-if="products.length>0">
                <div class="pl-3">
                  <div class="sort-left col-xs-10">
                     <div class="sortBuy">{$language.lblSortby}
                     </div>
                     <ul>
                        <li>
                           <span class="circle_icon "></span>
                           <a href="Javascript:void(0);"   ng-click="sort('products_popularity_{$AjaxCurrLanguage}')" >{$language.lblPopularity}</a>
                        </li>
                        <li>
                           <span class="circle_icon visible"></span>
                           <a href="Javascript:void(0);"  ng-click="sort('products_newlylisted_{$AjaxCurrLanguage}')">{$language.lblNewlyListed}</a>
                        </li>
                        <li>
                           <span class="circle_icon "></span>
                           <a href="Javascript:void(0);"  ng-click="sort('products_price_desc_{$AjaxCurrLanguage}')">{$language.lblPriceHightoLow}</a>
                        </li>
                        <li>
                           <span class="circle_icon "></span>
                           <a href="Javascript:void(0);"  ng-click="sort('products_price_asc_{$AjaxCurrLanguage}')">{$language.lblPriceLowtoHigh}</a>
                        </li>
                        <li>
                           <span class="circle_icon "></span>
                           <a href="Javascript:void(0);" ng-click="sort('products_discount_{$AjaxCurrLanguage}')">{$language.lblDiscount}</a>
                        </li>
                     </ul>
                  </div>
                 </div>
               </div>
              
               
              
               <div id="refined-box-content"></div>
            
               <div class="productListing pl-3">
                
                  <ul class="cateListing gridBg row" ng-class="listType=='list' ? 'list-view' : ''">
                     <li class="col-6 col-sm-4 col-lg-3" rel="product_[[product.productID]]" ng-repeat="product in products">
                        <div class="bx-contr">
                           <div class="imageBox p-2 p-lg-3">
                           <div class="free-gift" data-toggle="modal" data-target="#myModal" ng-if="product.freeProductGifts>0"><i class="icon-gift"></i> <span class="d-none d-md-inline-block">{$language.lblFreeGift}</span></div>
                           <div class="image-thumb"> 
                               <div class="discont" ng-if="product.productOptionDiscount > 0"><span class="off">{$language.lblOff}</span>
        				[[product.productOptionDiscount]]<span>%</span>
      				</div>
                           
                           <figure>	
						   {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]]'>"}
						   </figure>
							</div>
                           <div class="deatils alg-dta">
                           <div class="productTitle  clearfix">
							{html->anchor href="[[product.requestPath]]" content="[[product.productTitle]]" class="slip"}
                              </div>
                              <div class="price-box mb-1">
                            {*    {html->anchor href="brand/[[product.brandKey]]" class="bpfc brandkey" title='[[product.brand]]' content='[[product.brand]]'} *}
                                <del ng-if="product.productOptionRegularPrice!=product.offerPrice">{$_defaultCurrencySymbolLeft} [[product.productOptionRegularPrice]] {$_defaultCurrencySymbolRight}</del> <strong class="price dark">{$_defaultCurrencySymbolLeft} [[product.offerPrice]] {$_defaultCurrencySymbolRight}</strong> 
                                 <div class="ratingBx" ng-if="findAvg(product.reviews) > 0">
             				<div class="starRating"><div class="rated" style="width:[[findAvgNew(product.ratingTotal,product.reviews)*20]]%"></div></div>[ [[product.reviews.length]] {$language.lblReviewss}  ] 
							 </div>
                              </div>

                           </div>

                
                        <div class="more-option">
                           <div class="btn btn-secondary btn-link soldout" ng-if="product.productOptionQuantitySum <1 && (product.InventoryTrackLevel=='Product' || product.InventoryTrackLevel=='Combination')">{$language.lblSoldOut}</div>
                          {*{if $resProduct.customOptionCount|default:'' > 0}*}
                           {html->anchor href="[[product.requestPath]]" class="btn btn-secondary btn-link search-view" caption="{$language.lblViewDetails}"}
                           {*{else}
                               {assign var="relData" value=$product.productID|cat:"-"|cat:$product.productOptionID|cat:$redeemslotID|default:''}                        
                                        {html->anchor id="addfromlist" class="btn btn-default buynow buynow_link pull-right" caption="<span class='icon-shopping-cart'></span>{$language.lblAddtoCart}" rel="[[product.productID]]-[[product.productOptionID]]"}
                           {/if}*}
                      </div>

                        </div>
                        </div>
                        </li>
                  </ul>
				 
					<div class="text-center" ng-if="totalPages > page">
						<a href="javascript:void(0)" id="view_more_products" class="btn btn-secondary mt-4 mb-5" ng-click="infiniteScroll()">{$language.lblShowMoreItems}</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>

<script type="text/javascript">
    $(document).ready(function(){
        {if $CatalogJS neq "Yes"}
         $(document).on("click", ".FltrIco", function() {
        $("body").addClass("showfilter");
        $(this).hasClass("drop-up") ? ($(".prdctFilter").addClass("sorToggle"), $(".prdctFilterMo").find(".drop-up").addClass("drop-up"), $(this).removeClass("drop-up"), $("header.affix").css("z-index", "9999")) : ($(".prdctFilter").removeClass("sorToggle"), $(".prdctFilterMo").find(".drop-up").removeClass("drop-up"), $(".mob_sort").addClass("sorToggle"), $(this).addClass("drop-up"), $("header.affix").css("z-index", "0"))
    }), $(document).on("click", ".FltrSort", function() {
        $(this).hasClass("drop-up") ? ($(".prdctFilterMo").find(".drop-up").addClass("drop-up"), $(".mob_sort").addClass("sorToggle"), $(this).removeClass("drop-up")) : ($(".prdctFilter").addClass("sorToggle"), $(".prdctFilterMo").find(".drop-up").removeClass("drop-up"), $(".mob_sort").removeClass("hidden-Mob sorToggle"), $(this).addClass("drop-up"))
    }),
    {/if} 
     $(document).on("click", ".algl .sort_item", function() {
        $(".FltrSort").removeClass("drop-up");$(".algl-filter").addClass("sorToggle");
     }),
     
        $(document).on("click", "#applyfltr,#mfillter", function() {
            /* Act on the event */
            $('.prdctFilter').addClass('sorToggle');
            $('.FltrIco').removeClass('drop-up');
            $('.fx-me').removeClass('filter-open');
             $("body").removeClass("showfilter");
            $('header.affix').css("z-index","9999");    
          }), 
           $(document).on("click", ".alg-search .expand-clsps", function() {
            $(this).next(".showBox").toggleClass("sort_collapse"), $(this).next(".showBox").hasClass("sort_collapse") ? $(this).parents(".alg-search").children(".expand-clsps").addClass("plus-ico") : $(this).parents(".alg-search").children(".expand-clsps").removeClass("plus-ico")
        });
        
    });
</script>
