<form class="dataset-editor" *ngIf="formGroup" [formGroup]="formGroup">
	<div class="col-12 intro">
		<p>{{'DATASET-EDITOR.TITLE.INTRO' | translate}}</p>
		<span>{{'DATASET-EDITOR.TITLE.INTRO-TIP' | translate}}</span>
	</div>
	<div class="col-12 card">
		<!-- Title Field -->
		<div class="row">
			<div class="col-12">
				<div class="heading">1.1 {{'DATASET-EDITOR.FIELDS.TITLE' | translate}}*</div>
				<!-- <span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span> -->
				<!-- <a class="dmp-link dmp-tour-{{ formGroup.get('id').value + 1 }}" (click)="restartTour(formGroup.get('id').value + 1)">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a>
				<span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span> -->
				<div class="title-form">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" formControlName="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>
				</div>
			</div>
		</div>
		<!-- Description field -->
		<div class="row">
			<div class="col-12">
				<div class="heading">1.2 {{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}</div>
				<span class="hint">{{'DATASET-EDITOR.HINT.DESCRIPTION' | translate}}</span>
				<!-- <span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span>
				<a class="dmp-link dmp-tour-{{ formGroup.get('id').value + 2 }}" (click)="restartTour(formGroup.get('id').value + 2)">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a>
				<span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span> -->
				<div class="description-form">
					<rich-text-editor-component	[parentFormGroup]="formGroup" [controlName]="'description'"
												[placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'"
												[wrapperClasses]="'full-width editor ' +
													((formGroup.get('description').touched && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'required' : '')">
					</rich-text-editor-component>
					<div [class]="(formGroup.get('description').touched && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
						<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>
					</div>
				</div>
			</div>
		</div>
		<!-- Uri field -->
		<!-- <div class="row">
			<div class="col-12">
				<div class="heading">1.3 {{'DATASET-EDITOR.FIELDS.EXTERNAL-LINK' | translate}}</div>
				<span class="hint"></span>
				<div class="uri-form">
					<mat-form-field>
						<input matInput placeholder="{{'DATASET-EDITOR.PLACEHOLDER.EXTERNAL-LINK' | translate}}" type="text" name="uri" formControlName="uri">
						<mat-error *ngIf="formGroup.get('uri').hasError('backendError')">{{formGroup.get('uri').getError('backendError').message}}</mat-error>
						<mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
					</mat-form-field>
				</div>
			</div>
		</div> -->
		<!-- External Fields -->
		<app-dataset-external-references-editor-component [formGroup]="formGroup" [viewOnly]="viewOnly"></app-dataset-external-references-editor-component>
		<!-- Template Field -->
		<div class="heading">1.4 {{'DATASET-EDITOR.FIELDS.PROFILE' | translate}}*</div>
		<div class="profile-form">
			<mat-form-field>
				<mat-select placeholder="{{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" [compareWith]="compareWith" formControlName="profile">
					<mat-option *ngFor="let profile of availableProfiles" [value]="profile">
						{{profile.label}}
					</mat-option>
				</mat-select>
				<mat-error *ngIf="formGroup.get('profile').hasError('backendError')">{{formGroup.get('profile').getError('backendError').message}}</mat-error>
				<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
			</mat-form-field>
		</div>
	</div>
</form>



<!-- <div class="container-fluid">
	<div class="row dataset-editor" [formGroup]="formGroup">
		<div class="col-12">
			<div class="row">
				<mat-form-field class="col-sm-12 col-md-6">
					<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="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>
			</div>
			<div class="row" *ngIf="showUri">
				<mat-form-field class="col-sm-12 col-md-6">
					<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri">
					<mat-error *ngIf="formGroup.get('uri').hasError('backendError')">{{formGroup.get('uri').getError('backendError').message}}</mat-error>
					<mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
				</mat-form-field>
			</div>
			<div class="row">
				<mat-form-field class="col-sm-12 col-md-6">
					<textarea matInput class="description-area" placeholder="{{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"></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>
	</div>
</div> -->
