<div class="app-card-title mb-4">
	<anglo-title-component title="Cart"></anglo-title-component>
</div>
<div fxLayout="row wrap">
	<div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
		<div class="cart-wrapper ecommerce-wrapper">
			<mat-card class="p-0" *ngIf="coreService.localStorageCart && coreService.cartLength>0">
				<mat-card-content class="mb-0">
					<div class="overflow-hidden">	
						<div class="table-responsive">		
							<table mat-table [dataSource]="coreService.localStorageCart">
								<ng-container matColumnDef="image">
								   <th mat-header-cell *matHeaderCellDef>Prdouct</th>
                           <td mat-cell *matCellDef="let element"><img src="{{element.image}}" width="100" height="100"></td>
                           <td mat-footer-cell *matFooterCellDef colspan="2">
                              <mat-form-field floatLabel="never" class="full-wid">
                                 <input matInput placeholder="Add Promo Code">
                              </mat-form-field>
                           </td>
								</ng-container>
								<ng-container matColumnDef="name">
								   <th mat-header-cell *matHeaderCellDef></th>
                           <td mat-cell *matCellDef="let element">{{element.name}} </td>
                           <td mat-footer-cell *matFooterCellDef>
                              <div class="form-group p-2">
                                 <button type="button" mat-raised-button color="accent">APPLY</button>
                              </div>
                           </td>
								</ng-container>
								<ng-container matColumnDef="quantity">
								   <th mat-header-cell *matHeaderCellDef>Quantity</th>
                           <td mat-cell *matCellDef="let element"><input matInput type="number" min="1" [(ngModel)]="element.quantity"></td>
                           <td mat-footer-cell *matFooterCellDef>
                              <div class="form-group p-2 font-bold">
                                 <label>Total</label>
                              </div>
                           </td>
								</ng-container> 
								<ng-container class="warn-color" matColumnDef="price">
									<th mat-header-cell *matHeaderCellDef>Price</th>
								   <td mat-cell *matCellDef="let element"> 
								   	<span class="warn-color {{element.color}}">{{element.price|currency}}
								   	</span> 
                           </td>
                           <td mat-footer-cell *matFooterCellDef> 
                              <div class="form-group font-bold">
                                 {{calculate()|currency}}
                              </div>
                           </td>
								</ng-container>
								<ng-container matColumnDef="total">
								   <th mat-header-cell *matHeaderCellDef>{{'Total'|translate}}</th>
								   <td mat-cell *matCellDef="let element"> 
								   	<span>{{onQuantityClick(element) |currency}}
								   	</span> 
                           </td>
                           <td mat-footer-cell *matFooterCellDef>
                              <div class="form-group">
                                 <button type="button" mat-raised-button color="primary" (click)="checkout()">Checkout</button>
                              </div>
                           </td>
								</ng-container>
								<ng-container matColumnDef="icon">
								   <th mat-header-cell *matHeaderCellDef>Remove</th>
								   <td mat-cell *matCellDef="let element"> 
								     <button mat-button (click)="removeCartProduct(element)"><mat-icon>close</mat-icon></button>
                           </td>
                           <td mat-footer-cell *matFooterCellDef colspan="0" style="display:none;"></td>
								</ng-container>
								<tr mat-header-row *matHeaderRowDef="displayedColumnsData"></tr>
                        <tr mat-row *matRowDef="let row; columns: displayedColumnsData;"></tr>
                        <tr mat-footer-row *matFooterRowDef="displayedColumnsData;sticky:true;"></tr>
							</table>
						</div>	
					</div>		
				</mat-card-content>
				<div class="card-spinner" [ngClass] = "{'reload' : cartShowSpinner}" fxLayoutAlign="center center">
					<mat-spinner *ngIf="cartShowSpinner" mode="indeterminate" diameter="39"></mat-spinner>
				</div>
			</mat-card>
		</div>
	</div>
</div>		
