<div *ngIf="isMiniCart then miniCart; else fullCart;"></div>

<ng-template #miniCart>
	<div *ngIf="(cartItems | async)?.length == 0" style="text-align: center; margin: 3rem;">
		<img class="empty-cart-img" src="/ecm/assets/images/svg/Empty Cart.svg">
		<span class="empty-cart-title">Empty Cart</span> <span
			class="border-line"></span> <span class="empty-cart-msg">Looks
			like you haven't made your choice yet...</span>
	</div>
	
	<!-- <div *ngIf="cartCount > 0">
		<div class="cartItemsDetail"
			*ngFor="let item of cartItemsDetail  | slice:0:displayItem; let i=index">
			<table style="width: 100%;">
				<tr>
					<td class="itemImage"><bb-image [refId]='item.itemCode'
							[refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true"
							[isThumbnail]="true"></bb-image></td>
					<td class="itemdescription" (click)="closePanel.emit(viewItem(item.itemCode))">
						<span class="item-descr-span">{{item.descr}}</span>
					</td>
					<td style="padding: 10px;">Rs. {{item.costRate}}</td>
					<td (click)="confirmDialog(item)" style="cursor: pointer;"><span
						class="delete-icon" md-ripple>x</span></td>
				</tr>
			</table>
		</div>
		<div *ngIf="cartCount > displayItem" (click)="showTotalCartItems()">
			<a md-button class="checkout-button" [routerLink]="['/cart']"
				(click)="closePanel.emit();">( {{cartCount}} ) My Cart</a>
		</div>
		<!-- <button md-button class="checkout-button" [routerLink]="['/checkout']">Checkout</button> 
		<!-- <button md-button class="checkout-button" [routerLink]="['/checkout']">Checkout
				<i class="material-icons" style="position: relative; left: 8px;">trending_flat</i>
			  </button> 
	</div>  -->
	<div class="mini-cart-section">
	<div class="scrollMe" #scrollMe *ngIf="(cartItems | async)?.length > 0">
		<div class="cartItemsDetail"
			*ngFor="let item of cartItems | async">
			<table style="width: 100%;">
				<tr>
					<td class="itemImage"><bb-image [refId]='item.itemCode'
							[refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true"
							[isThumbnail]="true"></bb-image></td>
					<td class="itemdescription" (click)="closePanel.emit(viewItem(item.itemCode))">
						<span class="item-descr-span">{{item.itemHeader.itemShDescr}}</span>
					</td>
					<td style="padding: 10px;">Rs. {{item.itemHeader.itemDiscountedRate}}</td>
					<td (click)="confirmDialog(item)" style="cursor: pointer;">
					 <span class="delete-icon" md-ripple>x</span>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<div *ngIf="(cartItems | async)?.length > displayItem" (click)="showTotalCartItems()">
		<a md-button class="edit-cart-button" [routerLink]="['/cart']"
				(click)="closePanel.emit();">Edit Cart</a>
	</div>
	</div>
</ng-template>
<!-- ---------================ MiniCart Ends==============================---------------------------- -->


<!-- ---------================ detailCart start==============================---------------------------- -->

<ng-template #fullCart>

	<ecm-header #header [isFixedHeader]=true> </ecm-header>
	<ecm-breadcrumbs [pageName]="'CART'"></ecm-breadcrumbs>
	<div *ngIf="(cartItems | async)?.length == 0" style="min-height: calc(100% - 120px);">
		<div class="row">
		<div class="medium-12 large-12 columns"  style="text-align: center; margin-top: 120px;">
		<img class="empty-cart-img" src="/ecm/assets/images/svg/Empty Cart.svg">
		<span class="empty-cart-title">Empty Cart</span> <span
			class="border-line"></span> <span class="empty-cart-msg">Looks like you haven't made your choice yet...</span>
		</div>	
		</div>
	</div>
	
	<div *ngIf="(cartItems | async)?.length > 0" class="cart-items-section row" style="min-height: calc(100% - 120px);">
		<md-card class="large-8 columns">
		
		<div class="cart-header">
			My Cart ( {{(cartItems | async)?.length}} )
		</div>
		
		<div *ngFor="let item of cartItems | async" class="ecm-item-container row">
			<div class="large-2 columns ecm-item-img">
					<bb-image [refId]='item.itemCode' [refSer]="'M-ITEM'"
			                   [object]="'ITEM'" [isSingleImage]="true" [isThumbnail]="true"></bb-image>
			</div>
		
			<div class="large-6 columns ecm-item-info">
				<span style="display: block;font-size: 16px;"> {{item.itemHeader.itemDescr}} </span>
				<div>
<!-- 					<span class="seller-info"> -->
<!-- 						<span class="seller-title">Sold By </span> <span class="seller-name">{{item.itemDetail1.sellerInfo.name}}</span> -->
<!-- 					</span> -->
					<span *ngIf="item == 'occassion'" class="location-info">
						<span class="location-title">Location:</span> <span class="location-name">{{item.itemDetail1.location}}</span><i class="material-icons location-icon">&#xE0C8;</i>
					</span>
				</div>
				<div *ngIf="item == 'occassion'" class="select-date-section">
					<md-select class="date-select" [required]="false" [placeholder]="'Select Date'" name="option_selection" [(ngModel)]="option_selected">
						<md-option [value]="'ind'">25 Sept 2017 - Monday</md-option>
						<md-option [value]="'aus'">26 Sept 2017 - Tuesday</md-option>
						<md-option [value]="'pak'" [disabled]="true">27 Sept 2017 - Wednesday</md-option>
						<md-option [value]="'usa'">28 Sept 2017 - Thursday</md-option>
					</md-select>
				</div>
				
				<div *ngIf="item == 'occassion'" class="time-slot-section">
					<span class="time-slot-title">Time Slot</span>
					<md-chip-list class="small-6 large-12 columns time-slot-chips">
						<md-chip class="time-slot-chip" *ngFor="let timeslot of timeslots">
							{{timeslot}}
						</md-chip>
					</md-chip-list>
				</div>
	
				<div *ngIf="item == 'occassion'" class="venue-section">
					<span class="venue-title">Venue</span>
					<span class="venue-name">Ghatkoper East, Mumbai, Ghatkoper East, Mumbai, Maharashtra 400705</span>
				</div>
				
				<div *ngIf="item.itemCategory.catCode == 'CAT0000004'" class="delivery-offers">
					<span>FREE Delivery in 5 to 6 days <span class="help-btn">?</span> </span>
			    	   <button type="button" class="md-button link_button">
			    	     More Offers
			     	     <i class="material-icons arrow ">&#xE313;</i>
			     	   </button>
				</div>
			</div>
	
			<counter [quantity]="item.itemQuantity" (decrement)="decrement(item);" (increment)="increment(item);">
				<tags *ngIf="item == 'occassion'">
					<span class="small-6 large-12 columns package-content-title">Package Includes</span>
					<md-chip-list class="small-6 large-12 columns package-chip-list">
						<md-chip class="mat-basic-chip" *ngFor="let tag of tags">{{tag}}</md-chip>
					</md-chip-list>
				</tags>
				
				<price>
					<div *ngIf="item.itemCategory.catCode == 'CAT0000004'" class="product-price">
						<span style="display: block;" class="total-cost">Rs {{item.itemHeader.itemDiscountedRate}}</span>
						<span class="discounted-price"><s>Rs {{item.itemHeader.itemCostRate}}</s> <span class="discount-rate">{{item.itemHeader.itemDiscount}}% Off</span></span>
					</div>
					<span *ngIf="item == 'occassion'" class="individual-price">Rs 500 per person (Inclusive GST)</span>
				</price>
				
				<total *ngIf="item == 'occassion'">
					<div class="columns total-cost-detail">
						<span class="small-6 large-12 columns no-of-individuals">Tickets x 4</span>
						<span class="small-6 large-12 columns total-cost">Rs. 2000</span>
					</div>
				</total>
			</counter>
			
			<div class="columns move-to-wishlist">
				<button md-button class="move-to-wishlist-btn" (click)="moveToWishList(item);">Move to wishlist</button>
				<i class="material-icons cart-remove-icon" (click)="confirmDialog(item)">&#xE872;</i>
			</div>
			
		</div>
		<div class="detail-Continue-Shopping-button">
			<button md-button class="continue-shopping" [routerLink]="['/home']">Continue Shopping</button>
		</div>
		</md-card>
		
		
		<div class="large-4 columns ecm-productDetails">
				<md-card class="totalPriceDetails">
				<div
					style="text-align: center; position: relative; padding: 0px 20px 15px 20px;">
					<span class="priceDetails">Price Details</span>
				</div>
				<div class="totalProductsInfo">
					<div class="priceItems">
						<span style="font-size: 15px;">Price ( {{(cartItems | async)?.length}} Items )</span>
						<span class="price-info">Rs. {{totalPrice}}</span>
					</div>
					<div class="shipping">
						<span style="font-size: 15px;">Shipping</span> <span
							class="shippingFree">FREE</span>
					</div>
					<br>
					<div class="total-amount-section">
						<div class="amount">
							<span class="amountPayable">Amount Payable</span> 
							<span class="total-amountPrice">Rs. {{totalPrice}}</span>
						</div>
						<div class="ecm-payments">
							<i class="material-icons secure-icon">&#xE8E8;</i> 
							<span class="ecm-Info">Safe and Secure Payments. 100% Authentic products</span>
						</div>
						<br>
						<button md-button class="hide-for-small-only detail-checkout-button"
							[routerLink]="['/checkout']">
							Checkout <i class="material-icons"
								style="position: relative; left: 8px;">trending_flat</i>
						</button>
					</div>
				</div>
				</md-card>
				<button md-button class="show-for-small-only new-checkout-button" [routerLink]="['/checkout']">
					Checkout <i class="material-icons" style="position: relative; left: 8px;">trending_flat</i>
				</button>
			</div>
	</div>
	
	<ecm-footer></ecm-footer>
</ng-template>