<div class="main-content">
	<div class="container-fluid">
		<form *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
			<!-- DMP Header -->
			<div [hidden]="this.step >= stepsBeforeDatasets" class="fixed-editor-header">
				<div class="card editor-header">
					<div class="col">
						<div class="row">
							<div class="col-auto info">
								<div class="title">{{'DMP-EDITOR.TITLE.CLONE-DMP' | translate}}</div>
								<div class="subtitle">{{ formGroup.get('label').value }} <span *ngIf="isDirty()" class="changes">({{'DMP-EDITOR.CHANGES' | translate}})</span></div>
							</div>
							<div class="ml-auto d-flex flex-row">
								<button *ngIf="isDirty()" type="button" mat-raised-button class="discard-btn mr-3" (click)="discardChanges()">
									{{'DMP-EDITOR.ACTIONS.DISCARD' | translate}}
								</button>
								<div *ngIf="formGroup.enabled">
									<button *ngIf="!isFinalized" mat-raised-button type="submit" (click)="formSubmit()" [disabled]="!isFormValid()" class="save-btn">
										{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Dataset Header -->
			<div *ngFor="let dataset of datasets.controls; let i = index" [hidden]="(this.step !== i + stepsBeforeDatasets)" class="fixed-editor-header">
				<div class="card dataset-editor-header">
					<div class="col">
						<div class="row">
							<div class="col info">
								<!-- <div class="dataset-title">{{'DMP-EDITOR.TITLE.EDIT-DATASET' | translate}}</div> -->
								<div class="dataset-title">{{'DATASET-LISTING.SELECT-DATASETS-TO-CLONE' | translate}}</div>
								<div class="dataset-subtitle">{{ dataset.value.label }} <span *ngIf="isDirty()" class="dataset-changes">({{'DMP-EDITOR.CHANGES' | translate}})</span></div>
								<div class="d-flex flex-direction-row pt-2">
									<div class="col-auto dataset-part-of">{{'DATASET-LISTING.TOOLTIP.PART-OF' | translate}}
										<div class="col-auto dmp-label ml-3">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div>
									</div>
									<div class="col-auto dmp-title">{{ formGroup.get('label').value }}</div>
									<div class="col d-flex align-items-center">
										<a [routerLink]="['/overview/' + formGroup.get('id').value]" target="_blank" class="pointer"><span class="material-icons">open_in_new</span></a>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-auto d-flex align-items-center p-0">
									<button *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 mat-raised-button class="dataset-save-btn" type="submit" (click)="formSubmit()" [disabled]="!isFormValid()">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row editor-content">
				<div class="col-auto" [ngClass]="{'dmp-stepper': this.step < stepsBeforeDatasets, 'dataset-stepper': this.step >= stepsBeforeDatasets}">
					<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
					<div class="stepper-options" id="stepper-options">
						<ol class="stepper-list">
							<li (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (4)</li>
							<li (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)</li>
							<li (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}} (6)</li>
							<li (click)="changeStep(3)" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
							<li *ngFor="let dataset of datasets.controls; let i = index" #selectedItems (click)="editDataset(dataset.get('id').value)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}">
								<div class="dataset-tag">{{'DMP-EDITOR.STEPPER.DATASET' | translate}}</div>
								<span class="d-flex">
									<div class="label" matTooltip="{{dataset.get('label').value}}">{{'DMP-EDITOR.STEPPER.DATASET' | translate}}: {{ dataset.get('label').value }}</div>
									<mat-icon *ngIf="dataset.get('status').value !== 1" class="ml-2 mr-2 remove-dataset size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}" (click)="$event.stopPropagation(); removeDataset(dataset.get('id').value, i)">close</mat-icon>
									<div *ngIf="dataset.value.status === 1" class="finalized-label">
										<mat-icon class="status-icon check-icon">check</mat-icon>{{'TYPES.DATASET-STATUS.FINALISED' | translate}}
									</div>
									<!-- <mat-checkbox class="col-auto pl-0 pt-1" checked="true" [value]="dataset.value.id" color="accent" (change)="selectionChanged($event, dataset)">
										Include in clone
									</mat-checkbox> -->
								</span>
								<!-- <ul class="dataset-list">
									<li [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }} (8)</li>
								</ul> -->
							</li>
						</ol>
					</div>
					<div class="stepper-actions">
						<div *ngIf="this.step < 3" mat-raised-button type="button" class="col-auto previous stepper-btn mr-2 ml-auto" [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 < 3" mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep, 'next': this.step < stepsBeforeDatasets, 'dataset-next': this.step >= stepsBeforeDatasets }" (click)="nextStep()">
							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
							<span class="material-icons">chevron_right</span>
						</div>
						<div *ngIf="this.step >= 3 && hasProfile() && !isFinalized" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset()" target="_blank">
							<mat-icon>add</mat-icon>
							<div>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}</div>
						</div>
					</div>
				</div>
				<div class="col-auto form">
					<main-info [hidden]="this.step !== 0" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewVersion]="isNewVersion" [isClone]="isClone" (onFormChanged)="formChanged()"></main-info>
					<funding-info [hidden]="this.step !== 1" [formGroup]="formGroup" [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized" [isNewVersion]="isNewVersion" [isClone]="isClone" [isNew]="isNew" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></funding-info>
					<license-info [hidden]="this.step !== 2" [formGroup]="formGroup" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></license-info>
					<dataset-info [hidden]="this.step !== 3" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></dataset-info>

					<div *ngFor="let dataset of datasets.controls; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets">
						<dataset-editor-details [formGroup]="dataset" [dmpId]="formGroup.get('id').value" (formChanged)="formChanged($event)"></dataset-editor-details>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>

<!-- <div class="main-content">
	<div class="container-fluid">
		<div *ngIf="dmp" class="card">
			<div class="card-header card-header-plain d-flex">
				<div class="card-desc clone-dmp d-flex flex-column justify-content-center">
					<h4 class="card-title">{{ formGroup.get('label').value }}</h4>
				</div>
				<div class="d-flex ml-auto p-2">
					<span *ngIf="!isNewVersion" class="clone-mode">{{ 'DMP-LISTING.ACTIONS.CLONE' | translate}} &nbsp;</span>
					<span *ngIf="isNewVersion" class="clone-mode">{{ 'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}} &nbsp;</span>
					<span class="clone-mode-text"> {{ 'GENERAL.PREPOSITIONS.OF' | translate}} {{ parentDmpLabel }}</span>
				</div>
			</div>
			<form *ngIf="formGroup" (ngSubmit)="formSubmit()">
				<div class="d-flex flex-column">
					<mat-tab-group [(selectedIndex)]="selectedTab" class="mt-3">
						<mat-tab>
							<ng-template mat-tab-label>
								<i class="material-icons-outlined mr-2">view_agenda</i>
								{{ 'SIDE-BAR.GENERAL' | translate }}
							</ng-template>
							<app-general-tab [formGroup]="formGroup" [isNewVersion]="isNewVersion" [isClone]="isClone"></app-general-tab>
						</mat-tab>
						<mat-tab>
							<ng-template mat-tab-label>
								<mat-icon class="mr-2">work_outline</mat-icon>
								{{ 'DMP-LISTING.COLUMNS.GRANT' | translate }}
							</ng-template>
							<app-grant-tab [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized" [isNewVersion]="isNewVersion" [isClone]="isClone" [isNew]="isNew"></app-grant-tab>
						</mat-tab>
						<mat-tab>
							<ng-template mat-tab-label>
								<mat-icon class="mr-2">library_books</mat-icon>
								{{ 'DMP-LISTING.COLUMNS.DATASETS' | translate }}
							</ng-template>
							<app-dmp-wizard-dataset-listing-component *ngIf="formGroup" [formGroup]="formGroup" [dmpId]="formGroup.get('id').value"></app-dmp-wizard-dataset-listing-component>
						</mat-tab>
						<mat-tab disabled>
							<ng-template mat-tab-label></ng-template>
						</mat-tab>
					</mat-tab-group>

					<div class="d-flex justify-content-end pt-2 pb-4 pl-2 pr-2">
						<div>
							<button mat-raised-button color="primary" (click)="cancel(dmp.id)" type="button" class="text-uppercase mr-2">
								{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}
							</button>
						</div>
						<div *ngIf="formGroup.enabled">
							<button mat-raised-button type="button" (click)="formSubmit()" [disabled]="!isFormValid()" class="text-uppercase dark-theme mr-2" color="primary">
								{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
							</button>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div> -->
