<div class="main-content">
	<div class="container-fluid dataset-wizard">
		<form *ngIf="formGroup" [formGroup]="formGroup">
			<!-- <form *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()"> -->
			<!-- Dataset Header -->
			<div class="fixed-editor-header">
				<div class="card dataset-editor-header">
					<div class="col">
						<div class="row">
							<div class="col info">
								<ng-container *ngIf="!viewOnly else viewOnlyTemplate">
									<div *ngIf="isNew" class="dataset-title">{{'DMP-EDITOR.TITLE.ADD-DATASET' | translate}}</div>
									<div *ngIf="!isNew" class="dataset-title">{{'DMP-EDITOR.TITLE.EDIT-DATASET' | translate}}</div>
									<div class="dataset-subtitle">{{ formGroup.get('label').value }} <span *ngIf="isDirty()" class="dataset-changes">({{'DMP-EDITOR.CHANGES' | translate}})</span></div>
								</ng-container>
								<ng-template #viewOnlyTemplate>
									<div class="dataset-title">{{'DMP-EDITOR.TITLE.PREVIEW-DATASET' | translate}}</div>
								</ng-template>
								<div class="d-flex flex-direction-row dmp-info">
									<div class="col-auto dataset-to-dmp">{{'DATASET-LISTING.TOOLTIP.TO-DMP' | translate}}</div>
									<div class="dmp-title p-0">:&nbsp;{{ formGroup.get('dmp').value.label }}</div>
									<div class="col-auto d-flex align-items-center">
										<a [routerLink]="['/overview/' + formGroup.get('dmp').value.id]" target="_blank" class="pointer open-in-new-icon">
											<mat-icon class="size-18">open_in_new</mat-icon>
										</a>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-auto d-flex align-items-center p-0" *ngIf="!viewOnly">
									<button [disabled]="saving" *ngIf="isDirty()" type="button" mat-raised-button class="dataset-discard-btn" (click)="discardChanges()">
										{{'DMP-EDITOR.ACTIONS.DISCARD' | translate}}
									</button>
								</div>
								<div class="col-auto d-flex align-items-center">
									<button [disabled]="saving" *ngIf="!lockStatus && !viewOnly" mat-raised-button class="dataset-save-btn mr-2" type="button" (click)="save()">
										{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}
										<mat-icon [disabled]="saving" (click)="$event.stopPropagation();" style="width: 14px;" [matMenuTriggerFor]="menu">expand_more</mat-icon>
									</button>
									<mat-menu #menu="matMenu">
										<button [disabled]="saving" mat-menu-item (click)="save(saveAnd.close)" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-CLOSE' | translate }}</button>
										<button [disabled]="saving" mat-menu-item (click)="save(saveAnd.addNew)" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}</button>
										<button [disabled]="saving" mat-menu-item (click)="save()" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
									</mat-menu>

									<button [disabled]="saving" *ngIf="!lockStatus && !viewOnly" mat-raised-button class="dataset-save-btn mr-2" type="button" (click)="saveFinalize()">{{ 'DATASET-WIZARD.ACTIONS.FINALIZE' | translate }}</button>
									<!-- <button *ngIf="!lockStatus && !viewOnly" mat-raised-button class="dataset-save-btn mr-2" (click)="save()" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
									<button *ngIf="!lockStatus && !viewOnly" mat-raised-button class="dataset-save-btn mr-2" (click)="save(saveAnd.close)" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-CLOSE' | translate }}</button>
									<button *ngIf="!lockStatus && !viewOnly" mat-raised-button class="dataset-save-btn mr-2" (click)="save(saveAnd.addNew)">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}</button> -->
									<button [disabled]="saving" *ngIf="lockStatus" mat-raised-button disabled class="dataset-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button>
									<button [disabled]="saving" *ngIf="hasReversableStatus() && !lockStatus" mat-raised-button class="dataset-save-btn mr-2" (click)="reverse()" type="button">{{ 'DATASET-WIZARD.ACTIONS.REVERSE' | translate }}</button>
									<!-- <button *ngIf="!lockStatus" mat-raised-button class="dataset-save-btn mr-2" (click)="touchForm()" type="button">{{ 'DATASET-WIZARD.ACTIONS.VALIDATE' | translate }}</button> -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row editor-content">
				<div class="col-auto dataset-stepper">
					<div class="stepper-back d-flex flex-direction-row">
						<div class="d-flex align-items-center pr-2 back-to-dmp" (click)="backToDmp(formGroup.get('dmp').value.id)">
							<mat-icon class="back-icon pointer">chevron_left</mat-icon>
							<span class="pointer">{{'DATASET-WIZARD.ACTIONS.BACK-TO' | translate}}</span>
						</div>
						<div class="col-auto dmp-label ml-3">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div>
					</div>
					<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
					<div class="stepper-options" id="stepper-options">
						<div class="col stepper-list">
							<div (click)="table0fContents.onToCentrySelected()" *ngIf="!datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</div>
							<div (click)="table0fContents.onToCentrySelected()" *ngIf="datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
							<div class="row toc-pane-container" #boundary>
								<div #spacer></div>
								<table-of-contents [visibilityRulesService]="visRulesService" [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents
												   [showErrors]="showtocentriesErrors" [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hasFocus]="step > 0"
												   [formGroup]="formGroup" *ngIf="formGroup && formGroup.get('datasetProfileDefinition')" [links]="links"
												   [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)"
												   (currentLinks)="getLinks($event)" (entrySelected)="changeStep($event.entry, $event.execute)"
												   [visibilityRules]="formGroup.get('datasetProfileDefinition').get('rules').value"></table-of-contents>
							</div>
						</div>
					</div>
					<div class="stepper-actions">
						<div mat-raised-button type="button" class="col-auto previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
							<span class="material-icons">chevron_left</span>
							<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
						</div>

						<div *ngIf="this.step < this.maxStep" mat-raised-button type="button" class="col-auto stepper-btn dataset-next ml-auto" (click)="nextStep()">
							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
							<span class="material-icons">chevron_right</span>
						</div>
						<div *ngIf="!formGroup.get('profile').value" mat-raised-button type="button" class="col-auto stepper-btn dataset-next next-disabled ml-auto">
							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
							<span class="material-icons">chevron_right</span>
						</div>
						<button [disabled]="saving" (click)="save(saveAnd.addNew)" *ngIf="(step === maxStep) && !lockStatus && formGroup.get('profile').value && !viewOnly" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto">
							{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}
						</button>
					</div>
					<div class="col-auto pr-0">
						<app-form-progress-indication class="col-12" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [isDatasetEditor]="true"></app-form-progress-indication>
					</div>
				</div>
				<div class="col-auto form" id="dataset-editor-form">
					<app-dataset-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [dmpId]="formGroup.get('dmp').value.id" [availableProfiles]="formGroup.get('dmp').value.profiles" (formChanged)="formChanged()"></app-dataset-editor-component>
					<app-dataset-description (visibilityRulesInstance)="visRulesService = $event" [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hidden]="this.step === 0" *ngIf="formGroup && formGroup.get('datasetProfileDefinition')" [form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="formGroup.get('datasetProfileDefinition').get('rules').value" [datasetProfileId]="formGroup.get('profile').value" [linkToScroll]="linkToScroll" (fieldsetFocusChange)="fieldsetIdWithFocus = $event"></app-dataset-description>
				</div>
			</div>
		</form>
	</div>
</div>

<!-- <mat-slide-toggle [(ngModel)]="showtocentriesErrors">

</mat-slide-toggle> -->

<!-- <div class="row">
	<div class="col-12">
		<button (click)="printForm()">Print form</button>
	</div>
	<div class="col-12">
		<button (click)="printFormValue()">Print form value</button>
	</div>
</div> -->

<!-- <div class="main-content">
	<div class="container-fluid">
		<div class="card dataset-wizard">
			<div class="row card-header card-header-plain d-flex">
				<div class="col-12 card-desc d-flex flex-column justify-content-center">
					<div class="row">
						<div class="col d-flex align-items-center flex-wrap-nowrap">
							<h4 *ngIf="!isNew" class="card-title">{{datasetWizardModel?.label}}
								<span *ngIf="this.formGroup && this.formGroup.dirty"> -
									{{ 'GENERAL.STATUSES.EDIT' | translate }}</span>
							</h4>
							<div *ngIf="isNew" class="card-desc new-dataset d-flex flex-column justify-content-center">
								<h4 class="card-title">{{ 'DATASET-WIZARD.TITLE.NEW' | translate }}</h4>
							</div>

							<div *ngIf="datasetWizardModel && !isNew" class="ml-auto">
								<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="more-icon" *ngIf="!publicMode" (click)="$event.stopImmediatePropagation();">
									<mat-icon class="more-horiz">more_horiz</mat-icon>
								</button>
								<mat-menu #actionsMenu="matMenu">
									<button mat-menu-item (click)="openDmpSearchDialogue()" class="menu-item">
										<mat-icon>file_copy</mat-icon>{{'DATASET-WIZARD.ACTIONS.COPY-DATASET' | translate}}
									</button>
									<button mat-menu-item *ngIf="!viewOnly && !isCopy" (click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)" class="menu-item">
										<mat-icon>delete</mat-icon>{{ 'DATASET-WIZARD.ACTIONS.DELETE' | translate }}
									</button>
									<button mat-menu-item *ngIf="needsUpdate()" class="menu-item" (click)="openUpdateDatasetProfileDialogue();">{{ 'DATASET-WIZARD.ACTIONS.UPDATE-DATASET-PROFILE' | translate }}</button>
								</mat-menu>
							</div>
						</div>
						<div class="col-auto d-flex flex-wrap p-2" *ngIf="datasetWizardModel && !isNew">
							<button mat-raised-button [matMenuTriggerFor]="exportMenu" color="primary" class="lightblue-btn ml-2 export-btn">
								{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }} <mat-icon>arrow_drop_down</mat-icon>
							</button>
							<mat-menu #exportMenu="matMenu" xPosition="before">
								<button mat-menu-item (click)="downloadPDF()">
									<i class="fa fa-file-pdf-o pr-2"></i>
									<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
								</button>
								<button mat-menu-item (click)="downloadDOCX()">
									<i class="fa fa-file-word-o pr-2"></i>
									<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
								</button>
								<button mat-menu-item (click)="downloadXML()">
									<i class="fa fa-file-code-o pr-2"></i>
									<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
								</button>
							</mat-menu>
						</div>
					</div>
				</div>
			</div>
			<form *ngIf="formGroup">
				<div class="d-flex flex-column">
					<mat-tab-group class="mt-3">
						<mat-tab>
							<ng-template mat-tab-label class="tab-label">
								<i class="material-icons-outlined mr-2">view_agenda</i>
								{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.DATASET-DETAILS' | translate}}
							</ng-template>
							<form *ngIf="formGroup" [formGroup]="formGroup" class="p-3">
								<mat-form-field class="col-md-6">
									<app-single-auto-complete [required]="true" [formControl]="formGroup.get('dmp')" placeholder="{{'DATASET-EDITOR.FIELDS.DMP' | translate}}" [configuration]="dmpAutoCompleteConfiguration">
									</app-single-auto-complete>
								</mat-form-field>
								<mat-form-field class="col-md-6">
									<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" 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-form-field>
								<app-dataset-editor-component [formGroup]="formGroup"></app-dataset-editor-component>
							</form>
						</mat-tab>
						<mat-tab>
							<ng-template mat-tab-label>
								<mat-icon class="mr-2">work_outline</mat-icon>
								{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.EXTERNAL-REFERENCES' | translate}}
							</ng-template>
							<form *ngIf="formGroup" [formGroup]="formGroup" class="p-3">
								<app-dataset-external-references-editor-component [formGroup]="formGroup" [viewOnly]="viewOnly"></app-dataset-external-references-editor-component>
							</form>
						</mat-tab>
						<mat-tab [disabled]="isNew && (formGroup.get('profile').disabled || !(formGroup.get('profile').valid))">
							<ng-template mat-tab-label>
								<div class="d-flex">
									<mat-icon class="mr-2">library_books</mat-icon>
									{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.DESCRIPTION' | translate}}
								</div>
							</ng-template>
							<div class="col">
								<div class="row toc-pane-container" #boundary>
									<div class="col-md-8 h-100 ">
										<app-dataset-description-form class="w-100 h-100" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition" [form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="datasetWizardModel.datasetProfileDefinition.rules" [datasetProfileId]="formGroup.get('profile').value" [linkToScroll]="linkToScroll">
										</app-dataset-description-form>
									</div>
									<div #spacer></div>
									<div class="col-md-4">
										<table-of-contents class="toc-pane-container" [boundary]="boundary" [spacer]="spacer" stickyThing (stepFound)="onStepFound($event)"></table-of-contents>
									</div>
								</div>
							</div>
						</mat-tab>
					</mat-tab-group>

					<div class="actions">
						<mat-icon *ngIf="hasNotReversableStatus() || lockStatus" color="accent" class="align-self-center mr-1">info_outlined</mat-icon>
						<div *ngIf="hasNotReversableStatus()" class="align-self-center mr-3">{{'DATASET-WIZARD.ACTIONS.INFO' | translate}}</div>
						<div *ngIf="lockStatus" class="align-self-center mr-3">{{'DATASET-WIZARD.ACTIONS.LOCK' | translate}}</div>
						<button mat-raised-button (click)="cancel()" type="button" class="cancelButton" color="primary">
							{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}
						</button>
						<button *ngIf="(datasetWizardModel.status == 0 || isNew) && !lockStatus" mat-raised-button class="saveButton" color="primary" (click)="save();" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
						<button *ngIf="(datasetWizardModel.status == 0 || isNew) && !lockStatus" mat-raised-button class="finalizeButton" color="primary" (click)="saveFinalize();" type="button">{{ 'DATASET-WIZARD.ACTIONS.FINALIZE' | translate }}</button>
						<div class="fill-space"></div>
						<button *ngIf="hasReversableStatus() && !lockStatus" mat-raised-button class="reverseButton" color="primary" (click)="reverse()" type="button">{{ 'DATASET-WIZARD.ACTIONS.REVERSE' | translate }}</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div> -->
