<section class="content">
	<div class="content-block">
		<div class="block-header">
			<!-- breadcrumb -->
			<app-breadcrumb [title]="'MENUITEMS.DASHBOARD.LIST.DASHBOARD'" [items]="['HOME']" [active_item]="'MENUITEMS.DASHBOARD.LIST.DASHBOARD'"></app-breadcrumb>
		</div>

		<div class="row">

			<div class="col-4 col-sm-4 col-md-4">
				<div class="card">
					<div class="card-body">
						<div class="d-flex justify-content-between">
							<div>
								<h5>{{'BALANCE' | translate}}</h5>
							</div>
							<h3 class="text-danger">{{dashboardModel?.balance | number: '0.2-2'}}</h3>
						</div>
					</div>
				</div>
			</div>

			<div class="col-4 col-sm-4 col-md-4">
				<div class="card">
					<div class="card-body">
						<div class="d-flex justify-content-between">
							<div>
								<h5>{{'DEBIT.BALANCE' | translate}}</h5>
								<p class="text-muted"></p>
							</div>
							<h3 class="text-success">{{dashboardModel?.balanceDebit | number: '0.2-2'}}</h3>
						</div>
					</div>
				</div>
			</div>

			<div class="col-4 col-sm-4 col-md-4">
				<div class="card">
					<div class="card-body">
						<div class="d-flex justify-content-between">
							<div>
								<h5>{{'CREDIT.BALANCE' | translate}}</h5>
							</div>
							<h3 class="text-danger">{{dashboardModel?.balanceCredit | number: '0.2-2'}}</h3>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row clearfix">
			<!-- Bar chart with line -->
			<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
				<div class="card">
					<div class="header">
						<h2>{{'CURRENT.BALANCE' | translate}}</h2>
						<button mat-icon-button [matMenuTriggerFor]="menu" class="header-dropdown">
							<mat-icon>more_vert</mat-icon>
						</button>
						<mat-menu #menu="matMenu">
							<button mat-menu-item>Action</button>
							<button mat-menu-item>Another action</button>
							<button mat-menu-item>Something else here</button>
						</mat-menu>
					</div>
					<div class="body">
						<div id="chart">
							<apx-chart #chart *ngIf="pieChartOptions" class="apex-pie-center"
									   [series]="pieChartOptions.series2!"
									   [chart]="pieChartOptions.chart!"
									   [labels]="pieChartOptions.labels!"
									   [responsive]="pieChartOptions.responsive!"
									   [tooltip]="pieChartOptions.tooltip!"
									   >
							</apx-chart>
						</div>
						<div class="table-responsive m-t-15">
							<table class="table align-items-center">
								<tbody>
									<tr *ngFor="let item of top10Balance">
										<td><i class="fa fa-circle col-cyan msr-2"></i> {{item.name}}</td>
										<td class="col-green" style="text-align: right;">{{item.balance | number: '1.2'}} ({{item.currencyShortName}})</td>
										<td class="col-green" style="text-align: right;">{{item.balanceAtRate | number: '1.2'}}</td>
									</tr>
									<tr>
										<td><i class="fa fa-circle col-green msr-2"></i> {{'OTHER' | translate}}</td>
										<td></td>
										<td class="col-green" style="text-align: right;">{{top10BalanceOther | number: '1.2'}}</td>
									</tr>
									<tr>
										<td style="text-align: right; font-size: 16px;"><i class="fa fa-circle col-orange msr-2"></i> {{'TOTAL' | translate}}</td>
										<td></td>
										<td class="col-green" style="text-align: right; font-size: 16px;">{{top10BalanceTotal | number: '1.2'}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
