<div class="app-card-title mb-4">
	<anglo-title-component title="Search Row"></anglo-title-component>
</div>
<div class=" app-card search-row-wrapper">
	<mat-card>
		<div class="card-title p-2">
			<h3>{{'Search Row'|translate}}</h3>
		</div>
		<div class="card-content p-2">
			<div class="a-card-title" fxLayoutAlign="space-between center">
				<div class="title">
					<h4>Nutrition</h4>
				</div>
				<div class="form-field">	
					<mat-form-field >
						<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
					</mat-form-field>
				</div>
			</div>
			<div class="table-responsive overflow-hidden">	
				<table #table mat-table [dataSource]="dataSource">
					<ng-container matColumnDef="name">
						<th mat-header-cell *matHeaderCellDef>Dessert (100g)</th>
						<td mat-cell *matCellDef="let element"> {{element.name}} </td>
					</ng-container>

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

					<ng-container matColumnDef="fat">
						<th mat-header-cell *matHeaderCellDef>Fat (g)</th>
						<td mat-cell *matCellDef="let element"> {{element.fat}} </td>
					</ng-container>

					<ng-container matColumnDef="carbs">
						<th mat-header-cell *matHeaderCellDef>Carbs (g)</th>
						<td mat-cell *matCellDef="let element"> {{element.carbs}} </td>
					</ng-container>

					<ng-container matColumnDef="protein">
						<th mat-header-cell *matHeaderCellDef>Protein (g)</th>
						<td mat-cell *matCellDef="let element"> {{element.protein}} </td>
					</ng-container>

					<ng-container matColumnDef="sodium">
						<th mat-header-cell *matHeaderCellDef>Sodium (mg)</th>
						<td mat-cell *matCellDef="let element"> {{element.sodium}} </td>
					</ng-container>

					<ng-container matColumnDef="calcium">
						<th mat-header-cell *matHeaderCellDef>Calcium (%)</th>
						<td mat-cell *matCellDef="let element"> {{element.calcium}}% </td>
					</ng-container>

					<ng-container matColumnDef="iron">
						<th mat-header-cell *matHeaderCellDef>Iron (%)</th>
						<td mat-cell *matCellDef="let element"> {{element.iron}}% </td>
					</ng-container>

					<tr mat-header-row *matHeaderRowDef="displayCoulmns"></tr>
		 			<tr mat-row *matRowDef="let row; columns: displayCoulmns;"></tr>
		 		</table>
		 	</div>	
			<mat-paginator [pageSizeOptions]="[5, 10, 25]" ></mat-paginator>
		</div>
	</mat-card>	
</div>