<ecm-header [isFixedHeader]=true> </ecm-header>

<ecm-breadcrumbs [pageName]="'SEARCH'"> </ecm-breadcrumbs>

<div class="ecm-progress-bar" *ngIf="loading && !serverError">
<div class="ecm-progress-title"> Loading </div>
  <md-progress-spinner
        class="ecm-spinner"
        [color]="color"
        [mode]="mode"
        [value]="spinnerValue">
  </md-progress-spinner>
</div>

	<section class="search-result-section">
		<div class="ecm-error-info" *ngIf="serverError">
			<h2>Something goes wrong. Please try searching for something else </h2>
		</div>
	<div *ngIf="!resultFound && !serverError" >	
	 <md-card class="product-detail-card row">
		<div class="ecm-error-info row">
			   <div class="small-12 medium-6 large-6 columns no-result-found-icon">
			      <img class="no-result-img" src="{{hostUrl}}/ecm/assets/images/svg/No search found.svg">
			   </div>
			   
			   <div class="small-12 medium-6 large-6 columns no-result-details">
			     <span class="no-result-title">Sorry! Couldn't find the product you were looking for.</span>
			     <span class="border-line"></span>
			     <span class="warning-msg">Please check if you have misspelt something or try searching with other words.</span>
			   </div>
		</div>
	 </md-card>
	</div> 
		<div  *ngIf="items && resultFound" class="row row-category">
			<div class="ecm-result-header">
				<span class="ecm-result-info" *ngIf="myCity">{{numFound}} Results Found for {{value}} in {{myCity}}</span> 
				<span class="ecm-result-info" *ngIf="!myCity">{{numFound}} Results Found for {{value}}</span> 
				<select (change)="sortBy($event.target.value)">
					<option>Rating</option>
					<option>Price: High to Low</option>
					<option>Price: Low to High</option>
				</select> 
				<span class="ecm-sort-by">Sort By &nbsp; </span>
			</div>

			<div class="small-12 medium-6 large-4 column end " *ngFor="let item of items">
				<ecm-card [itemData]="item"> </ecm-card>
			</div>

			<span *ngIf="resultFound">
				<div class="ecm-pagination-section">
					<span class="ecm-pages-info">Page {{activePage}} of
						{{pageCount}}</span> 
					<button md-button [ngClass]="{disabled:activePage === 1}" (click)="loadPrevious()" class="prev-button"> </button>
					
					<span #page>
						<span *ngFor="let a of createPages(); let i = index" [ngClass]="{active:(i+1) === activePage}" class="ecm-page" (click)="goToPage(i)"> 
							<span>{{i+1}}</span>
						</span>
					</span> 
	
					<button md-button [ngClass]="{disabled:activePage === pageCount}" (click)="loadNext()" class="next-button"> </button>
				</div>
			</span>
		</div>
	</section>

		
<ecm-footer> </ecm-footer>
