<mat-card *ngIf = "invoicesVisible" id="invoiceList">
	<div fxLayoutAlign="space-between center">
		<div class="card-title">
			<h3 class="mb-0 text-capitalize">{{title|translate}}</h3>
		</div>
		<div class="a-icon">
			<TopsideMenu (isCloseEvent) = "getCloseValue($event)" (isFullScreen)= "showFullScreen('invoiceList')" (isShowSpinner)="spinnerShow('invoiceList')"></TopsideMenu>
		</div>
	</div>	
	<mat-card-content>
		<div class="overflow-hidden">	
			<div class="table-responsive">
				<table class="full-wid" mat-table [dataSource]="invoicesData">
					<ng-container matColumnDef="code">
					   <th mat-header-cell *matHeaderCellDef>{{tableHeadingData.heading_1}}</th>
					   <td mat-cell *matCellDef="let element"> {{element.code}} </td>
					</ng-container>
				   <ng-container matColumnDef="buyer">
					   <th mat-header-cell *matHeaderCellDef>{{tableHeadingData.heading_2}}</th>
					   <td mat-cell *matCellDef="let element"> {{element.buyer}} </td>
					</ng-container>
					<ng-container matColumnDef="date">
					   <th mat-header-cell *matHeaderCellDef> {{tableHeadingData.heading_3}}</th>
					   <td mat-cell *matCellDef="let element"> {{element.date|date:'shortDate'}} </td>
					</ng-container>
					<ng-container matColumnDef="status">
					   <th mat-header-cell *matHeaderCellDef> {{tableHeadingData.heading_4}} </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> {{tableHeadingData.heading_5}} </th>
					   <td mat-cell *matCellDef="let element"> {{element.amount}} </td>
					</ng-container>
					<ng-container matColumnDef="duration">
					   <th mat-header-cell *matHeaderCellDef> {{tableHeadingData.heading_6}} </th>
					   <td mat-cell *matCellDef="let element"> {{element.duration}} </td>
					</ng-container>
					<tr mat-header-row *matHeaderRowDef="displayedColumnsData"></tr>
					<tr mat-row  *matRowDef="let row; columns: displayedColumnsData;"></tr>
				</table>
			</div>
		</div>		
	</mat-card-content>
	<div class="app-footer">
		<div class="grey-text fs-12" fxLayoutAlign="end center">
			<mat-icon class="update-list">replay</mat-icon>
			<span>Updated 10 min ago</span>
		</div>	
	</div>
	<div class="card-spinner" [ngClass] = "{'reload' : invoicesShowSpinner}" fxLayoutAlign="center center">
		<mat-spinner *ngIf="invoicesShowSpinner" mode="indeterminate" diameter="39"></mat-spinner>
	</div>	
</mat-card>