<form class="dataset-editor-details" *ngIf="formGroup" [formGroup]="formGroup">
	<div class="col-12 intro">
		{{'DATASET-EDITOR.TITLE.INTRO' | translate}}
	</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">
					<mat-form-field>
						<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.PLACEHOLDER.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>
		<!-- Uri field -->
		<!-- <div class="row">
			<div class="col-12">
				<div class="heading">1.3 {{'DATASET-EDITOR.FIELDS.EXTERNAL-LINK' | translate}}</div>
				<span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span><a class="dmp-link" target="_blank" [routerLink]="['/overview/' + dmpId]">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a><span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</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 (formChanged)="onFormChanged($event)" [formGroup]="formGroup" [viewOnly]="viewOnly"></app-dataset-external-references-editor-component>
		<!-- Template Field -->
		<div class="heading">1.5 {{'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" [formControl]="formGroup.get('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>
		<!-- Template Form -->
		<div *ngIf="hasProfileId() && formGroup.get('datasetProfileDefinition') !== null">
			<app-dataset-description [form]="formGroup.get('datasetProfileDefinition')" [visibilityRules]="formGroup.get('datasetProfileDefinition').get('rules').value" [datasetProfileId]="getProfileId()" (formChanged)="onFormChanged($event)"></app-dataset-description>
		</div>

		<!-- Tags field -->
		<!-- <div class="row">
			<div class="col-12">
				<div class="heading">1.4 {{'DATASET-EDITOR.FIELDS.TAGS' | translate}}</div>
				<span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span><a class="dmp-link" target="_blank" [routerLink]="['/overview/' + this.datasetWizardModel.dmp.id]">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a><span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span>
				<div class="tags-form">
					<mat-form-field appearance="outline">
						<mat-chip-list #chipList [disabled]="viewOnly">
							<mat-chip *ngFor="let tag of formGroup.get('tags').value"
								[removable]="true" (removed)="removeTag(tag)">
								{{tag.name}}
								<mat-icon  matChipRemove *ngIf="!viewOnly">cancel</mat-icon>
							</mat-chip>
							<input  matInput [disabled]="viewOnly" placeholder="{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}"
						[matChipInputFor]="chipList"
						[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
						[matChipInputAddOnBlur]="true"
						(matChipInputTokenEnd)="addTag($event)">
						</mat-chip-list>
					</mat-form-field>

					<ng-template #tagsTemplate let-suggestion let-i="index" let-callback="function">
						<div class="col-12 row align-items-center">
							<div class="col">
								<p>
									{{i+1}}) {{suggestion.get('name').value}}
								</p>
							</div>
							<div class="col-auto">
								<button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
									<mat-icon>close</mat-icon>
								</button>
							</div>
						</div>
					</ng-template>
				</div>
			</div>
		</div> -->
	</div>
</form>
