<div class="funding-info">
	<form *ngIf="grantformGroup" [formGroup]="grantformGroup">
		<div class="col-12 intro">
			{{'DMP-EDITOR.FUNDING-INFO.INTRO' | translate}}
		</div>
		<div class="col-12 card">
			<!-- Funder Field -->
			<div class="row">
				<div class="col-12">
					<div class="heading">2.1 {{'DMP-EDITOR.FIELDS.FUNDING-ORGANIZATIONS' | translate}}*</div>
					<div class="hint">
						<!-- <div class="pb-1">{{'DMP-EDITOR.FIELDS.EXTERNAL-SOURCE-HINT' | translate}}</div> -->
						<div class="pb-1">{{'DMP-EDITOR.FIELDS.FUNDER-HINT' | translate}}</div>
						<div><span class="material-icons-outlined align-bottom">info</span> {{'DMP-EDITOR.MAIN-INFO.TYPING' | translate}}</div>
					</div>
					<div class="funder-form">
						<div *ngIf="!isCreateNewFunder">
							<mat-form-field appearance="outline">
								<app-single-auto-complete required='true' [formControl]="funderFormGroup.get('existFunder')" placeholder="{{'DMP-EDITOR.FIELDS.FUNDER' | translate}}" [configuration]="funderAutoCompleteConfiguration">
								</app-single-auto-complete>
							</mat-form-field>
						</div>
						<!-- Create New Funder -->
						<div *ngIf="isCreateNewFunder">
							<mat-form-field appearance="outline">
								<input matInput [placeholder]="'DMP-EDITOR.FUNDING-INFO.UNIQUE-IDENTIFIER' | translate" type="text" [formControl]="funderFormGroup.get('reference')">
								<i matSuffix class="fa fa-spinner fa-spin" *ngIf="isFunderPending"></i>
								<mat-error *ngIf="funderFormGroup.get('reference').hasError('funderIdentifierExists')">{{'DMP-EDITOR.FUNDING-INFO.IDENTIFIER-FUNDER-EXISTS' | translate}}</mat-error>
								<mat-error *ngIf="funderFormGroup.get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
								<mat-icon *ngIf="!isFunderPending && funderFormGroup.get('reference').dirty && funderFormGroup.get('reference').valid" class="text-success" matSuffix>check</mat-icon>
								<mat-icon *ngIf="!isFunderPending && funderFormGroup.get('reference').dirty && funderFormGroup.get('reference').invalid" class="text-danger" matSuffix>clear</mat-icon>
							</mat-form-field>
							<mat-form-field appearance="outline">
								<input matInput placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.FUNDER-LABEL' | translate}}" type="text" name="label" [formControl]="funderFormGroup.get('label')" required>
								<mat-error *ngIf="funderFormGroup.get('label').hasError('backendError')">
									{{funderFormGroup.get('label').getError('backendError').message}}</mat-error>
								<mat-error *ngIf="funderFormGroup.get('label').hasError('required')">
									{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
							</mat-form-field>
						</div>
					</div>
					<!-- Toggle Between Add Funder or Use Existing -->
					<div class="col d-flex">
						<div class="row" *ngIf="showToggleButton()">
							<div *ngIf="isCreateNewFunder" (click)="createFunder()">
								<span class="insert">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST-FUNDER' | translate}}</span>
							</div>
							<div *ngIf="!isCreateNewFunder">
								<span [ngClass]="isNewVersion?'disabled-toggle':'not-found'">{{'DMP-EDITOR.FUNDING-INFO.FIND' | translate}}</span>
								<span [ngClass]="isNewVersion?'disabled-toggle':'insert'" (click)="createFunder()">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Grant field -->
			<div class="row">
				<div class="col-12">
					<div class="heading">2.2 {{'DMP-EDITOR.FIELDS.GRANTS' | translate}}*</div>
					<div class="hint">
						<!-- <div class="pb-1">{{'DMP-EDITOR.FIELDS.EXTERNAL-SOURCE-HINT' | translate}}</div> -->
						<div class="pb-1">{{'DMP-EDITOR.FIELDS.GRANTS-HINT' | translate}}</div>
						<div><span class="material-icons-outlined align-bottom">info</span> {{'DMP-EDITOR.MAIN-INFO.TYPING' | translate}}</div>
					</div>
					<div class="grant-form">
						<div *ngIf="!isCreateNew">
							<mat-form-field appearance="outline">
								<app-single-auto-complete required='true' [formControl]="grantformGroup.get('existGrant')" placeholder="{{'DMP-EDITOR.FIELDS.GRANT' | translate}}" [configuration]="grantAutoCompleteConfiguration">
								</app-single-auto-complete>
							</mat-form-field>
						</div>
						<!-- Create New Grant -->
						<div *ngIf="isCreateNew">
							<mat-form-field appearance="outline">
								<input matInput [placeholder]="'DMP-EDITOR.FUNDING-INFO.UNIQUE-IDENTIFIER' | translate" [formControl]="grantformGroup.get('reference')" type="text">
								<i matSuffix class="fa fa-spinner fa-spin" *ngIf="isGrantPending"></i>
								<mat-error *ngIf="grantformGroup.get('reference').hasError('grantIdentifierExists')">{{'DMP-EDITOR.FUNDING-INFO.IDENTIFIER-GRANT-EXISTS' | translate}}</mat-error>
								<mat-error *ngIf="grantformGroup.get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
								<mat-icon *ngIf="!isGrantPending && grantformGroup.get('reference').dirty && grantformGroup.get('reference').valid" class="text-success" matSuffix>check</mat-icon>
								<mat-icon *ngIf="!isGrantPending && grantformGroup.get('reference').dirty && grantformGroup.get('reference').invalid" class="text-danger" matSuffix>clear</mat-icon>
							</mat-form-field>
							<mat-form-field appearance="outline">
								<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-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 appearance="outline">
								<textarea matInput class="description-area" placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.DESCRIPTION' | translate}}" [formControl]="grantformGroup.get('description')" [required]="true"></textarea>
								<mat-error *ngIf="grantformGroup.get('description').hasError('backendError')">
									{{projectFormGroup.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>
						<!-- Toggle Between Add Grant or Use Existing -->
						<div class="col d-flex">
							<div class="row" *ngIf="showToggleButton()">
								<div *ngIf="isCreateNew" (click)="createGrant()">
									<span class="insert">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST-GRANT' | translate}}</span>
								</div>
								<div *ngIf="!isCreateNew">
									<span [ngClass]="isNewVersion || isGrantDisabled()?'disabled-toggle':'not-found'">{{'DMP-EDITOR.FUNDING-INFO.FIND' | translate}}</span>
									<span [ngClass]="isNewVersion || isGrantDisabled()?'disabled-toggle':'insert'" (click)="createGrant()">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Project field-->
			<div class="row">
				<div class="col-12">
					<div class="heading">2.3 {{'DMP-EDITOR.FIELDS.PROJECT' | translate}}</div>
					<div class="hint">
						<!-- <div class="pb-1">{{'DMP-EDITOR.FIELDS.EXTERNAL-SOURCE-HINT' | translate}}</div> -->
						<div class="pb-1">{{'DMP-EDITOR.FIELDS.PROJECT-HINT' | translate}}</div>
						<div><span class="material-icons-outlined align-bottom">info</span> {{'DMP-EDITOR.MAIN-INFO.TYPING' | translate}}</div>
					</div>
					<div class="project-form">
						<div *ngIf="!isCreateNewProject">
							<mat-form-field appearance="outline">
								<app-single-auto-complete [formControl]="projectFormGroup.get('existProject')" placeholder="{{'DMP-EDITOR.FIELDS.PROJECT' | translate}}" [configuration]="projectAutoCompleteConfiguration">
								</app-single-auto-complete>
							</mat-form-field>
						</div>
						<!-- Create New Project -->
						<div *ngIf="isCreateNewProject">
							<mat-form-field appearance="outline">
								<input matInput [placeholder]="'DMP-EDITOR.FUNDING-INFO.UNIQUE-IDENTIFIER' | translate" type="text"  [formControl]="projectFormGroup.get('reference')">
								<i matSuffix class="fa fa-spinner fa-spin" *ngIf="isProjectPending"></i>
								<mat-error *ngIf="projectFormGroup.get('reference').hasError('projectIdentifierExists')">{{'DMP-EDITOR.FUNDING-INFO.IDENTIFIER-PROJECT-EXISTS' | translate}}</mat-error>
								<mat-icon *ngIf="!isProjectPending && projectFormGroup.get('reference').dirty && projectFormGroup.get('reference').valid" class="text-success" matSuffix>check</mat-icon>
								<mat-icon *ngIf="!isProjectPending && projectFormGroup.get('reference').dirty && projectFormGroup.get('reference').invalid" class="text-danger" matSuffix>clear</mat-icon>
							</mat-form-field>
							<mat-form-field appearance="outline">
								<input matInput placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.PROJECT-LABEL' | translate}}" type="text" name="label" [formControl]="projectFormGroup.get('label')">
								<mat-error *ngIf="projectFormGroup.get('label').hasError('backendError')">
									{{projectFormGroup.get('label').getError('backendError').message}}</mat-error>
								<mat-error *ngIf="projectFormGroup.get('label').hasError('required')">
									{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
							</mat-form-field>
							<mat-form-field appearance="outline">
								<textarea matInput class="description-area" placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.DESCRIPTION' | translate}}" [formControl]="projectFormGroup.get('description')"></textarea>
								<mat-error *ngIf="projectFormGroup.get('description').hasError('backendError')">
									{{projectFormGroup.get('description').getError('backendError').message}}</mat-error>
								<mat-error *ngIf="projectFormGroup.get('description').hasError('required')">
									{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
							</mat-form-field>
						</div>
						<!-- Toggle Between Add Project or Use Existing -->
						<div class="col pb-3 d-flex">
							<div class="row" *ngIf="showToggleButton()">
								<div *ngIf="isCreateNewProject" (click)="createProject()">
									<span class="insert">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST-PROJECT' | translate}}</span>
								</div>
								<div *ngIf="!isCreateNewProject" (click)="createProject()">
									<span [ngClass]="isNewVersion?'disabled-toggle':'not-found'">{{'DMP-EDITOR.FUNDING-INFO.FIND' | translate}}</span>
									<span [ngClass]="isNewVersion?'disabled-toggle':'insert'">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
	<!-- <button (click)="consoleForm()" type="button">consoleForm</button> -->
</div>
