<div class="container-fluid">
	<div class="row" [formGroup]="formGroup">
		<div class="col-sm-12 col-md-9 pt-4 pb-4 pl-4">
			<div class="row pt-2">
				<mat-form-field class="col-sm-12 col-md-8">
					<input matInput placeholder="{{'DMP-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 pt-2">
				<mat-form-field class="col-sm-12 col-md-8">
					<!-- <textarea matInput class="description-area" -->
					<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-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 class="row pt-2">
				<mat-form-field class="col-sm-12 col-md-8">
					<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration">
					</app-multiple-auto-complete>
					<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
						{{formGroup.get('profiles').getError('backendError').message}}</mat-error>
					<mat-error *ngIf="formGroup.get('profiles').hasError('required')">
						{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
					<button matSuffix class="input-btn" [disabled]="formGroup.get('profiles').disabled" (click)="availableProfiles($event)">
						<mat-icon class="icon-btn">view_list</mat-icon>
					</button>
				</mat-form-field>
				<!-- <button mat-button (click)="availableProfiles()">View All</button> -->
			</div>
			<div class="row pt-1">
				<mat-form-field class="col-sm-12 col-md-8">
					<app-multiple-auto-complete [formControl]="formGroup.get('organisations')" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}" [configuration]="organisationsAutoCompleteConfiguration">
					</app-multiple-auto-complete>
					<mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">
						{{formGroup.get('organisations').getError('backendError').message}}</mat-error>
					<mat-error *ngIf="formGroup.get('organisations').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
												translate}}</mat-error>
					<mat-hint>{{'DMP-EDITOR.FIELDS.ORGANISATIONS-HINT' | translate}}</mat-hint>
					<button *ngIf="showOrganizationCreator()" matSuffix class="input-btn" [disabled]="canAddOrganizations()" type="button" (click)="addOrganization($event)">
						<mat-icon class="icon-btn">add_circle</mat-icon>
					</button>
				</mat-form-field>
			</div>
			<div class="row pt-3">
				<mat-form-field class="col-sm-12 col-md-8">
					<app-multiple-auto-complete [formControl]="formGroup.get('researchers')" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
					</app-multiple-auto-complete>
					<mat-error *ngIf="formGroup.get('researchers').hasError('backendError')">
						{{formGroup.get('researchers').getError('backendError').message}}</mat-error>
					<mat-error *ngIf="formGroup.get('researchers').hasError('required')">
						{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
					<button matSuffix class="input-btn" [disabled]="formGroup.get('researchers').disabled" type="button" (click)="addResearcher($event)">
						<mat-icon class="icon-btn">add_circle</mat-icon>
					</button>
				</mat-form-field>
				<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
			</div>
			<div class="row pt-3">
				<mat-form-field class="col-sm-12 col-md-8">
					<!-- <app-multiple-auto-complete [formControl]="formGroup.get('extraProperties').get('language')" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
					</app-multiple-auto-complete> -->
					<mat-select [formControl]="formGroup.get('extraProperties').get('language')" placeholder="{{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}">
						<mat-option *ngFor="let lang of getLanguageInfos()" [value]="lang.code">
							{{ lang.name }}
						</mat-option>
					</mat-select>
					<mat-error *ngIf="formGroup.get('extraProperties').get('language').hasError('backendError')">
						{{formGroup.get('extraProperties').get('language').getError('backendError').message}}</mat-error>
					<mat-error *ngIf="formGroup.get('extraProperties').get('language').hasError('required')">
						{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
				</mat-form-field>
				<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
			</div>
			<div class="row pt-3">
				<mat-form-field class="col-sm-12 col-md-8">
					<!-- <app-multiple-auto-complete [formControl]="formGroup.get('extraProperties').get('language')" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
					</app-multiple-auto-complete> -->
					<app-single-auto-complete [formControl]="formGroup.get('extraProperties').get('license')" placeholder="{{'DMP-EDITOR.FIELDS.LICENSE' | translate}}" [configuration]="licenseAutoCompleteConfiguration">
					</app-single-auto-complete>
					<mat-error *ngIf="formGroup.get('extraProperties').get('license').hasError('backendError')">
						{{formGroup.get('extraProperties').get('license').getError('backendError').message}}</mat-error>
					<mat-error *ngIf="formGroup.get('extraProperties').get('license').hasError('required')">
						{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
				</mat-form-field>
				<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
			</div>
			<div class="row pt-3">
				<mat-form-field class="col-sm-12 col-md-8">
					<!-- <app-multiple-auto-complete [formControl]="formGroup.get('extraProperties').get('language')" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
					</app-multiple-auto-complete> -->
					<mat-select [formControl]="formGroup.get('extraProperties').get('visible')" placeholder="{{'DMP-EDITOR.FIELDS.VISIBILITY' | translate}}">
						<mat-option *ngFor="let vis of visibles" [value]="vis.value">
							{{vis.name | translate}}
						</mat-option>
					</mat-select>
					<mat-error *ngIf="formGroup.get('extraProperties').get('visible').hasError('backendError')">
						{{formGroup.get('extraProperties').get('visible').getError('backendError').message}}</mat-error>
					<mat-error *ngIf="formGroup.get('extraProperties').get('visible').hasError('required')">
						{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
				</mat-form-field>
				<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
			</div>
			<div class="row pt-3" *ngIf="formGroup.get('extraProperties').get('visible').value">
				<mat-form-field class="col-sm-12 col-md-8">
					<!-- <app-multiple-auto-complete [formControl]="formGroup.get('extraProperties').get('language')" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
					</app-multiple-auto-complete> -->
					<input matInput [matDatepicker]="picker" [formControl]="formGroup.get('extraProperties').get('publicDate')" placeholder="{{'DMP-EDITOR.FIELDS.PUBLICATION' | translate}}">
  					<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  					<mat-datepicker #picker></mat-datepicker>
					<mat-error *ngIf="formGroup.get('extraProperties').get('publicDate').hasError('backendError')">
						{{formGroup.get('extraProperties').get('publicDate').getError('backendError').message}}</mat-error>
					<mat-error *ngIf="formGroup.get('extraProperties').get('publicDate').hasError('required')">
						{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
				</mat-form-field>
				<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
			</div>
			<div class="row pt-3">
				<mat-form-field class="col-sm-12 col-md-8">
					<!-- <app-multiple-auto-complete [formControl]="formGroup.get('extraProperties').get('language')" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
					</app-multiple-auto-complete> -->
					<mat-select [formControl]="formGroup.get('extraProperties').get('contact')" placeholder="{{'DMP-EDITOR.FIELDS.CONTACT' | translate}}">
						<mat-option *ngFor="let vis of getAssociates()" [value]="vis.id">
							{{vis.name | translate}}
						</mat-option>
					</mat-select>
					<mat-error *ngIf="formGroup.get('extraProperties').get('contact').hasError('backendError')">
						{{formGroup.get('extraProperties').get('contact').getError('backendError').message}}</mat-error>
					<mat-error *ngIf="formGroup.get('extraProperties').get('contact').hasError('required')">
						{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
				</mat-form-field>
				<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
			</div>
			<div class="row pt-3">
				<mat-label class="col-12 cost-placeholder">Costs</mat-label>
				<app-cost-listing class="col-12" [form] = "formGroup.get('extraProperties').get('costs')"></app-cost-listing>
				<button class="col-12 cost-add" matSuffix class="input-btn" type="button" (click)="addCost($event)">
					<mat-icon class="icon-btn">add_circle</mat-icon>
				</button>
			</div>
			<div class="row pt-2">
				<mat-form-field class="col-sm-12 col-md-8">
					<app-single-auto-complete [required]="false" [formControl]="formGroup.get('profile')" placeholder="{{'DMP-EDITOR.FIELDS.TEMPLATE' | translate}}" [configuration]="dmpProfileAutoCompleteConfiguration">
					</app-single-auto-complete>
				</mat-form-field>
			</div>
			<app-dynamic-dmp-field-resolver *ngIf="selectedDmpProfileDefinition" [formGroup]="formGroup" [dmpProfileDefinition]="selectedDmpProfileDefinition" [dmpProfileId]="formGroup.get('profile').value.id" [isUserOwner]="isUserOwner">
			</app-dynamic-dmp-field-resolver>
		</div>

		<!-- Versioning Container-->
		<div class="col-sm-12 col-md-2">
			<div class="version-menu">
				<mat-form-field class="col-auto">
					<input matInput placeholder="Version" disabled [value]="formGroup.get('version').value == undefined ?0 :formGroup.get('version').value">
				</mat-form-field>
				<!-- <app-dynamic-dmp-field-resolver *ngIf="dmp.definition" class="col-md-12" [formGroup]="formGroup" [dmpProfileDefinition]=dmp.definition></app-dynamic-dmp-field-resolver> -->
				<div class="col-auto mb-2">
					{{ 'DATASET-EDITOR.VERSION-DIALOG.ABOUT' | translate }}
				</div>
				<!-- Versioning Actions -->
				<!-- <div class="col-auto d-flex align-content-center mb-1" style="cursor: pointer;">
					<mat-icon>edit</mat-icon>
					<span>Click here to edit</span>
				</div>
				<div class="col-auto d-flex align-content-center mb-3" style="cursor: pointer;">
					<mat-icon>history</mat-icon>
					Click here to view previous versions
				</div> -->
			</div>
		</div>
	</div>
</div>
