<div class="grant-editor">

	<form *ngIf="grantformGroup" [formGroup]="grantformGroup">
		<mat-card>
			<mat-card-header></mat-card-header>
			<mat-card-content>
				<!-- <div *ngIf="funderFormGroup">
					<app-quick-wizard-funder-editor-component class="col-12" [formGroup]="funderFormGroup"></app-quick-wizard-funder-editor-component>
				</div> -->
				<div class="row" *ngIf="!isNew">
					<p class="col-md-12"><b>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.ABOUT-GRANT' | translate}}</b></p>
					<mat-form-field class="col-md-12 mt-2">
						<app-single-auto-complete [required]='true' [formControl]="grantformGroup.get('existGrant')" placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.SELECT-GRANT' | translate}}" [configuration]="grantAutoCompleteConfiguration">
						</app-single-auto-complete>
						<mat-hint>{{'DMP-EDITOR.FIELDS.EXTERNAL-SOURCE-HINT' | translate}}</mat-hint>
						<mat-error *ngIf="grantformGroup.hasError('backendError')">
							{{grantformGroup.get('grant').getError('backendError').message}}</mat-error>
						<mat-error *ngIf="grantformGroup.hasError('required')">
							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
					</mat-form-field>
				</div>

				<div class="row" *ngIf="isNew">
					<p class="col-md-12"><b>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.ABOUT-NEW-GRANT' | translate}}</b></p>
					<mat-form-field class="col-md-12">
						<input matInput placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.GRANT-LABEL' | translate}}" type="text" name="label" [formControl]="grantformGroup.get('label')" required>
						<mat-hint>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.LABEL-HINT' | translate}}</mat-hint>
						<mat-error *ngIf="grantformGroup.get('label').hasError('backendError')">
							{{grantformGroup.get('label').getError('backendError').message}}</mat-error>
						<mat-error *ngIf="grantformGroup.get('label').hasError('required')">
							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
					</mat-form-field>
					<mat-form-field class="col-md-12 mt-2">
						<textarea matInput class="description-area" placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.DESCRIPTION' | translate}}" [formControl]="grantformGroup.get('description')" required></textarea>
						<mat-hint>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.DESCRIPTION-HINT' | translate}}</mat-hint>
						<mat-error *ngIf="grantformGroup.get('description').hasError('backendError')">
							{{grantformGroup.get('description').getError('backendError').message}}</mat-error>
						<mat-error *ngIf="grantformGroup.get('description').hasError('required')">
							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
					</mat-form-field>
				</div>

				<div class="row">
					<div class="align-self-center mt-2 col">
						<hr>
					</div>
					<h3 class="col-auto">
						{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate}}
					</h3>
					<div class="align-self-center mt-2 col">
						<hr>
					</div>
				</div>
				<div class="row">
					<div class="col"></div>
					<button mat-raised-button class="col-auto" color="primary" type="button" *ngIf="!isNew" [disabled]="isFunderFormInvalid()" (click)="create()">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.CREATE-NEW-GRANT' | translate}}</button>
					<button mat-raised-button class="col-auto" color="primary" type="button" *ngIf="isNew" [disabled]="isFunderFormInvalid()" (click)="create()">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST-GRANT' | translate}}</button>

					<div class="col"></div>
				</div>

			</mat-card-content>
		</mat-card>
	</form>
</div>
