<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="Add 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">
					<div class="text-inside">
						<mat-form-field class="example-full-width">
							<mat-label>Category</mat-label>
							<mat-select formControlName="categoryId">
								<mat-option *ngFor="let category of categories" [value]="category.id">
									{{category.name}}
								</mat-option>
							</mat-select>
						</mat-form-field>
					</div>
				</div>
			</div>
		</app-dialog-chrome>
	</form>
</div>
