<div>
	<form [formGroup]="addForm!" (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 currency" [error]="error" [actions]="dialogActions">
			<div class="row">
				<div class="col-md-3">
					<div class="text-inside">
						<mat-form-field class="example-full-width">
							<mat-label>Symbol</mat-label>
							<input matInput value={{currency.symbol}} formControlName="symbol" readonly="">
						</mat-form-field>
					</div>
				</div>
				<div class="col-md-3">
					<div class="text-inside">
						<mat-form-field class="example-full-width">
							<mat-label>Code</mat-label>
							<input matInput value={{currency.code}} formControlName="code" readonly="">
						</mat-form-field>
					</div>
				</div>
				<div class="col-md-3">
					<div class="text-inside">
						<mat-form-field class="example-full-width">
							<mat-label>Name</mat-label>
							<input matInput value={{currency.name}} formControlName="name">
						</mat-form-field>
					</div>
				</div>
				<div class="col-md-3">
					<div class="text-inside">
						<mat-form-field class="example-full-width">
							<mat-label>Short name</mat-label>
							<input matInput value={{currency.shortName}} formControlName="shortName">
						</mat-form-field>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<div class="text-inside">
						<mat-form-field class="example-full-width" appearance="fill">
							<mat-label>Rate</mat-label>
							<input matInput [value]="currency.rate | number:'0.2-2'" formControlName="rate" currencyMask
								[options]="{ prefix: '', precision: 4, inputMode: 1 }" required>
							<mat-error *ngIf="addForm.controls?.['rate']?.hasError('required')">
								Please enter rate
							</mat-error>
						</mat-form-field>
					</div>
				</div>
				<div class="col-md-4">
					<div class="text-inside">
						<mat-form-field class="example-full-width" appearance="fill">
							<mat-label>Quantity</mat-label>
							<input matInput [value]="currency.rate | number:'0.0-0'" formControlName="quantity"
								currencyMask [options]="{ prefix: '', precision: 0 }" required>
							<mat-error *ngIf="addForm.controls?.['rate']?.hasError('required')">
								Please enter rate
							</mat-error>
						</mat-form-field>
					</div>
				</div>
				<div class="col-md-4">
					<div class="text-inside">
						<mat-form-field class="example-full-width">
							<mat-label>Rate Date</mat-label>
							<input matInput [matDatepicker]="picker3" (focus)="picker3.open()"
								value={{currency.rateDate}} formControlName="rateDate" required>
							<mat-hint>DD/MM/YYYY</mat-hint>
							<mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
							<mat-datepicker #picker3></mat-datepicker>
							<mat-error *ngIf="addForm.controls?.['rateDate']?.hasError('required')">
								Please enter rate date
							</mat-error>
						</mat-form-field>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6">
					<div class="text-inside">
						<mat-checkbox class="example-margin" formControlName="isPrimary">
							Primary currency
						</mat-checkbox>
					</div>
				</div>
			</div>
		</app-dialog-chrome>
	</form>
</div>
