<section class="content">
	<div class="content-block">
		<div class="block-header">
			<!-- breadcrumb -->
			<app-breadcrumb [title]="'Blank'" [items]="['Home','Settings']" [active_item]="'Currency'">
			</app-breadcrumb>
		</div>
		<div class="row clearfix">
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				<div class="card">
					<div class="header">
						<h2><strong>My currencies</strong></h2>
					</div>
					<div class="body">
						<mat-tab-group [(selectedIndex)]="tabIndex">
							<mat-tab label="My currencies">
								<div class="body table-responsive">
									<table class="table">
										<thead>
											<tr>
												<th>Code</th>
												<th>Name</th>
												<th>Short Name</th>
												<th>Quantity</th>
												<th>Rate</th>
												<th>Rate Date</th>
												<th></th>
											</tr>
										</thead>
										<tbody>
											<tr *ngFor="let item of myCurrencies" [ngClass]="item.isPrimary ? 'bg-purple' : ''">
												<td>{{item.code}}</td>
												<td>{{item.name}}</td>
												<td>{{item.shortName}}</td>
												<td style="text-align: end">
													{{item.quantity}}
												</td>
												<td style="text-align: end">
													{{item.rate | number: '1.2-6'}}
													{{item.symbol}}
												</td>
												<td>{{item.rateDate | date:'yyyy-MM-dd'}}</td>
												<td>
													<button class="btn-space" (click)="setRate(item)" mat-raised-button color="primary">
														Edit
													</button>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</mat-tab>
							<mat-tab label="All currencies">
								<div class="body table-responsive">
									<table class="table">
										<thead>
											<tr>
												<th></th>
												<th></th>
												<th></th>
												<th></th>
											</tr>
										</thead>
										<tbody>
											<tr *ngFor="let item of currencies">
												<td>{{item.symbol}}</td>
												<td>{{item.id}}</td>
												<td>{{item.name}}</td>
												<td>
													<button class="btn-space" (click)="connect(item)" [disabled]="item.isConnected" mat-raised-button color="primary">
														Add
													</button>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</mat-tab>
						</mat-tab-group>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
