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

<span *ngIf="items">
 <ecm-breadcrumbs [pageName]="'ITEMS'"> </ecm-breadcrumbs>
</span>

<div class="loading" *ngIf="items?.length == 0">
 <div class="ecm-progress-bar">
  <div class="ecm-progress-title"> Loading </div>
  <md-progress-spinner
        class="ecm-spinner"
        [color]="'primary'"
        [mode]="'indeterminate'"
        [value]="50">
  </md-progress-spinner>
 </div> 
</div>

<div *ngIf="items?.length > 0">
	<section class="products-section">
		<div class="row">
			<md-card class="product-list-card">
			<div class="small-12 medium-3 large-3 column ecm-filter-details">
				<div class="filter-pane">
					<div class="filter-header">
						<span class="filter-hader-title">Filter By</span>
					</div>
					<!--	
					<div class="container">
						<div class="price-title" (click)="showHide();">Price</div>
						<div *ngIf="show">
							<md-slider min="500" max="35000" class="price-slider" (input)="onInputChange($event);"></md-slider>
							<div class="amount-range">
								<span class="min-value">Rs. {{minVal}}</span>
								<span class="max-value">Rs. {{maxVal}}</span>
							</div>
							<div class="ecm-input-container">
								<input type="text" class="min-val-input" placeholder="500" [(ngModel)]="minVal">
								<span class="value-divider">-</span>
								<input type="text" class="max-val-input" placeholder="35000" [(ngModel)]="maxVal">	
								<button md-button class="find-button">Find</button>
							</div>
						</div>
					</div>
					-->
					<mat-expansion-panel> 
						<mat-expansion-panel-header>
							<mat-panel-title>
								<div class="price-title">Price</div>
							</mat-panel-title> 
						</mat-expansion-panel-header> 
						<!-- TODO Range Component -->
						<md-slider class="price-slider" min="500" max="35000" (input)="onInputChange($event);"></md-slider>
						<div class="amount-range">
							<span class="min-value">Rs. {{minVal}}</span> 
							<span class="max-value">Rs. {{maxVal}}</span>
						</div>
						<div class="ecm-input-container">
							<input type="text" class="min-val-input" placeholder="500" [(ngModel)]="minVal"> 
							<span class="value-divider">-</span>
							<input type="text" class="max-val-input" placeholder="35000" [(ngModel)]="maxVal">
							<button md-button class="find-button">Find</button>
						</div>
					</mat-expansion-panel>
					<mat-expansion-panel *ngFor="let filterOption of filterOptions.filterOptions">
						<mat-expansion-panel-header> 
							<mat-panel-title>
								<div class="price-title">{{filterOption.label}}</div>
							</mat-panel-title> 
						</mat-expansion-panel-header> 
						<span class="variant-container" *ngFor="let filterOptionVal of filterOption.facetData; let i = index  ">
							<span *ngIf=" i%2 == 0 "> 
								<bb-checkbox class="check-text">
									<span [ngClass]=" filterOption.label === 'Color' ? 'circle' : ''" [ngStyle]="{'color':getColor(filterOptionVal)}"></span> 
									<span>{{filterOptionVal}}</span> 
								</bb-checkbox> 
								<span class="variant-count"> {{filterOption.facetData[i+1]}} </span>
							</span>
						</span> 
					</mat-expansion-panel>
				</div>
			</div>


			<div class="small-12 medium-9 large-9 column end ecm-items-details">
				<div class="row">
					<div class="ecm-section-info">
						<span class="ecm-section-info-title">{{subcategory?.shDescr}}</span>
						<span class="ecm-total-items">( {{items?.length - 1}} Items )</span>
					</div>
					<div class="ecm-item-card-detail">
						<div *ngFor="let _item of items | slice:0:show;" class="small-12 medium-6 large-4 column end item-card" >
							<div class="item-card-overlay" (click)="isInCart(_item.itemCode) ? goToCart() : addToCart(_item) ">
								<span class="item-card-overlay-action"> 
									<i class="material-icons">shopping_cart</i> 
									{{ (_item.itemCode.toString().indexOf('L2D014') == 0 ) ? 
									   ( isInCart(_item.itemCode) ? 'Go To Cart' : 'Add to Cart') :
									   'Enroll Now'
									}}
								</span>
							</div>
							<ecm-card (addToWishlist)="addToWishlist(_item);"
								(removeFromWishlist)="removeFromWishlist(_item);"
								(storeData)="storeItem(_item)" 
								[itemData]="_item"
								[extraParam]="extra_param">
							</ecm-card>
						</div>
					</div>
				</div>
			</div>
			</md-card>
		</div>
	</section>
</div>

<ecm-footer> </ecm-footer>

