<section class="content">
	<div class="content-block">
		<div class="block-header">
			<!-- breadcrumb -->
			<app-breadcrumb [title]="'Blank'" [items]="['Home','Settings']" [active_item]="'Accounts'">
			</app-breadcrumb>
		</div>
		<div class="row clearfix">
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				<mat-card class="card">
					<mat-card-header>
						<mat-card-title-group>
							<mat-card-title>
								Accounts
							</mat-card-title>
							<mat-card-subtitle>
							</mat-card-subtitle>
						</mat-card-title-group>
						<div fxFlex></div>
						<div *ngIf="invites && invites.length > 0" class="m-r-10">
							<button mat-raised-button color="warn" [matMenuTriggerFor]="menu">Invites</button>
							<mat-menu #menu="matMenu">
								<button *ngFor="let invite of invites" mat-menu-item (click)="startInvite(invite)">{{invite.account}}</button>
							</mat-menu>
						</div>
						<button class="btn-space " (click)="add()" mat-raised-button color="primary">
							Add
						</button>
					</mat-card-header>
					<mat-card-content>
						<div class="body table-responsive">
							<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [(selectedIndex)]="tabIndex">
								<mat-tab *ngFor="let category of accountCategories" label="{{category.name}}">
									<table class="table">
										<tbody>
											<tr *ngFor="let account of accountInCategory(category)">
												<td>{{account.name}}</td>
												<td>{{account.currencyId}}</td>
												<td>{{account.type}}</td>
												<td>
													<button class="btn-space" *ngIf="account.allowWrite" (click)="edit(account)" mat-raised-button color="primary">
														Edit
													</button>
													<button class="btn-space" *ngIf="account.allowManage" (click)="access(account)" mat-raised-button color="primary">
														Access
													</button>
													<button class="btn-space" *ngIf="account.allowDelete" (click)="remove(account)" mat-raised-button color="primary">
														Delete
													</button>
												</td>
											</tr>
										</tbody>
									</table>
								</mat-tab>
								<mat-tab *ngIf="accountCategories && accounts" label="Without category">
									<table class="table">
										<tbody>
											<tr *ngFor="let account of accountInCategory()">
												<td>{{account.name}}</td>
												<td>{{account.currencyId}}</td>
												<td>{{account.type}}</td>
												<td>
													<button class="btn-space" (click)="edit(account)" mat-raised-button color="primary">
														Edit
													</button>
													<button class="btn-space" *ngIf="account.allowDelete" (click)="remove(account)" mat-raised-button color="primary">
														Delete
													</button>
												</td>
											</tr>
										</tbody>
									</table>
								</mat-tab>
								<mat-tab *ngIf="accountCategories && accounts" label="All">
									<table class="table">
										<tbody>
										<tr *ngFor="let account of accounts">
											<td>{{account.name}}</td>
											<td>{{account.currencyId}}</td>
											<td>
												<button class="btn-space" (click)="edit(account)" mat-raised-button color="primary">
													Edit
												</button>
												<button class="btn-space" *ngIf="account.allowDelete" (click)="remove(account)" mat-raised-button color="primary">
													Delete
												</button>
											</td>
										</tr>
										</tbody>
									</table>
								</mat-tab>
							</mat-tab-group>
						</div>
					</mat-card-content>
				</mat-card>
			</div>
		</div>
	</div>
</section>
