<mat-card class="p-0" *ngIf = "recentOrderVisible" id="recentOrder">
	<div class="p-3" fxLayoutAlign="space-between center">
		<div class="card-title">
			<h3 class="mb-0 text-capitalize">{{'Recent Orders'|translate}}</h3>
		</div>
		<div class="a-icon">
			<TopsideMenu (isCloseEvent) = "getCloseValue($event)" (isFullScreen)= "showFullScreen('recentOrder')" (isShowSpinner)="spinnerShow('recentOrder')"></TopsideMenu>
		</div>
	</div>
	<mat-card-content class="mb-0">
		<div class="overflow-hidden">
			<div class="table-responsive">
				<table mat-table [dataSource]="dataSource" class="full-wid">
				   <ng-container matColumnDef="select">
					   <th mat-header-cell *matHeaderCellDef>
					      <mat-checkbox (change)="$event ? masterToggle() : null"
					                    [checked]="selection.hasValue() && isAllSelected()"
					                    [indeterminate]="selection.hasValue() && !isAllSelected()">
					      </mat-checkbox>
					   </th>
				    	<td mat-cell *matCellDef="let row">
					      <mat-checkbox (click)="$event.stopPropagation()"
					                    (change)="$event ? selection.toggle(row) : null"
					                    [checked]="selection.isSelected(row)">
					      </mat-checkbox>
				    	</td>
				   </ng-container>

					<ng-container matColumnDef="orderId">
						<th mat-header-cell *matHeaderCellDef>Order Id</th>
						<td mat-cell *matCellDef="let element"> {{element.orderId}} </td>
					</ng-container>

					<ng-container matColumnDef="productName">
						<th mat-header-cell *matHeaderCellDef>Product Name</th>
						<td mat-cell *matCellDef="let element"> {{element.productName}} </td>
					</ng-container>

					<ng-container matColumnDef="quantity">
						<th mat-header-cell *matHeaderCellDef>Quantity</th>
						<td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
					</ng-container>

					<ng-container matColumnDef="status">
						<th mat-header-cell *matHeaderCellDef>Status</th>
						<td mat-cell *matCellDef="let element"> <span class="a-badge {{element.color}}">{{element.status}}</span> </td>
					</ng-container>

					<ng-container matColumnDef="amount">
						<th mat-header-cell *matHeaderCellDef>Amount</th>
						<td mat-cell *matCellDef="let element"> {{element.amount}} </td>
					</ng-container>

					<ng-container matColumnDef="delete">
						<th mat-header-cell *matHeaderCellDef></th>
						<td mat-cell *matCellDef="let element; let i = index">
							<button mat-icon-button>
								<mat-icon class="warn-color" (click)="removeSelectedRows(i)">{{element.delete}}</mat-icon>
							</button>
						</td>
					</ng-container>

					<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
		  			<tr mat-row *matRowDef="let row; columns: displayedColumns"
		      		(click)="selection.toggle(row)"></tr>		
		      </table>
		   </div>
		</div>      
	</mat-card-content>
	<div class="p-3">
		<mat-card-actions class="m-0 p-0">
			<div fxLayoutAlign="space-between center">
				<div>
					<button class="px-3" mat-button-sm mat-raised-button color="primary">View All</button>
				</div>	
				<div class="grey-text text-left  fs-12" fxLayoutAlign="end center">
					<mat-icon class="update-list">replay</mat-icon>
					<span>Updated 10 min ago</span>
				</div>	
			</div>	
		</mat-card-actions>
	</div>	
	<div class="card-spinner" [ngClass] = "{'reload' : recentOrderShowSpinner}" fxLayoutAlign="center center">
		<mat-spinner *ngIf="recentOrderShowSpinner" mode="indeterminate" diameter="39"></mat-spinner>
	</div>
</mat-card>
