<div class="project-editor">

	<form *ngIf="formGroup" [formGroup]="formGroup">
		<mat-card>
			<mat-card-header></mat-card-header>
			<mat-card-content>
				<div class="row" *ngIf="!isNew">
					<p class="col-md-12"><b>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.ABOUT-PROJECT' | translate}}</b></p>
					<mat-form-field class="col-md-12 mt-2">
						<app-single-auto-complete [formControl]="formGroup.get('existProject')" placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.SELECT-PROJECT' | translate}}" [configuration]="projectAutoCompleteConfiguration">
						</app-single-auto-complete>
						<mat-hint>{{'DMP-EDITOR.FIELDS.EXTERNAL-SOURCE-HINT' | translate}}</mat-hint>
					</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-PROJECT' | translate}}</b></p>
					<mat-form-field class="col-md-12">
						<input matInput placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.PROJECT-LABEL' | translate}}" type="text" name="label" [formControl]="formGroup.get('label')" required>
						<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
							{{formGroup.get('label').getError('backendError').message}}</mat-error>
						<mat-error *ngIf="formGroup.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]="formGroup.get('description')" required></textarea>
						<mat-error *ngIf="formGroup.get('description').hasError('backendError')">
							{{formGroup.get('description').getError('backendError').message}}</mat-error>
						<mat-error *ngIf="formGroup.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" (click)="create()">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.CREATE-NEW-PROJECT' | translate}}</button>
					<button mat-raised-button class="col-auto" color="primary" type="button" *ngIf="isNew" (click)="create()">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST-PROJECT' | translate}}</button>

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

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