<div>
	<form [formGroup]="editForm!" (ngSubmit)="onSubmitClick()">
		<ng-template #dialogActions>
			<button type="button" mat-flat-button class="dialog-btn-cancel" (click)="closeDialog()">Cancel</button>
			<button type="submit" class="btn-space" mat-raised-button color="primary">Save</button>
		</ng-template>

		<app-dialog-chrome title="Edit account" [errorMessage]="errorMessage" [actions]="dialogActions">
			<div class="row">
				<div class="col-md-12">
					<div class="text-inside">
						<mat-form-field class="example-full-width">
							<mat-label>Type</mat-label>
							<mat-select formControlName="type">
								<mat-option *ngFor="let type of types | keyvalue" [value]="type.key">
									{{type.key}} ({{type.value}})
								</mat-option>
							</mat-select>
						</mat-form-field>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-6">
					<div class="text-inside">
						<mat-form-field class="example-full-width">
							<mat-label>Name</mat-label>
							<input matInput value={{account.name}} formControlName="name">
						</mat-form-field>
					</div>
				</div>
				<div class="col-md-6">
					<div class="text-inside">
						<mat-form-field class="example-full-width">
							<mat-label>Currency</mat-label>
							<mat-select formControlName="currencyId">
								<mat-option *ngFor="let currency of currencies" [value]="currency.code">
									{{currency.code}} ({{currency.name}})
								</mat-option>
							</mat-select>
						</mat-form-field>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-12">
					<label class="section-label">Categories</label>
					<table class="table" style="table-layout: fixed;" *ngIf="categoriesSorted?.length; else noCategories">
						<tbody>
						<tr *ngFor="let category of categoriesSorted">
							<td style="width: 100%;">{{category.name}}</td>
							<td style="width: 100px;">
								<button type="button" class="btn-space" (click)="removeCategory(category)" mat-raised-button color="warn">
									Delete
								</button>
							</td>
						</tr>
						</tbody>
					</table>
					<ng-template #noCategories>
						<div class="empty-categories">No categories assigned</div>
					</ng-template>
				</div>
			</div>

			<div class="row category-add-block">
				<div class="col-md-12">
					<label class="section-label">Add category</label>
					<div class="category-add-row">
						<mat-form-field class="example-full-width category-add-select">
							<mat-label>Category</mat-label>
							<mat-select formControlName="categoryId">
								<mat-option *ngFor="let category of availableCategories" [value]="category.id">
									{{category.name}}
								</mat-option>
							</mat-select>
						</mat-form-field>
						<button type="button"
						        class="btn-space"
						        mat-raised-button
						        color="primary"
						        [disabled]="!editForm.get('categoryId')?.value"
						        (click)="addCategory()">
							Add
						</button>
					</div>
				</div>
			</div>
		</app-dialog-chrome>
	</form>
</div>
