<div>
	<h2 mat-dialog-title>Add currency</h2>
	<div mat-dialog-content>
		<form [formGroup]="addForm!" (ngSubmit)="onSubmitClick()">
			<div class="row">
				<div class="col-md-6">
					<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-6">
					<div class="text-inside">
						<mat-form-field class="example-full-width">
							<mat-label>Code</mat-label>
							<input matInput value={{currency.id}} formControlName="id" readonly="">
						</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={{currency.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>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: currency.symbol, precision: 4 }" 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>YYYY/MM/DD</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>
			<mat-dialog-actions class="mat-dialog-actions">
				<div class="mat-dialog-left">
					<div class="alert alert-danger mat-dialog-error" *ngIf="errorMessage">
						{{errorMessage}}
					</div>
				</div>
				<div class="mat-dialog-right">
					<div class="button-bottom">
						<button type="button" mat-button (click)="closeDialog()">Cancel</button>
						<button class="btn-space" mat-raised-button color="primary">Save</button>
					</div>
				</div>
			</mat-dialog-actions>
		</form>
	</div>
</div>
