<div class="main-content">
	<div class="container-fluid">
		<div *ngIf="dmp" class="card">
			<div class="card-header card-header-plain d-flex">
				<div *ngIf="!isNew" class="card-desc d-flex flex-column justify-content-center">
					<h4 class="card-title">{{ formGroup.get('label').value }}</h4>
				</div>
				<div *ngIf="isNew" class="card-desc new-dmp d-flex flex-column justify-content-center">
					<h4 class="card-title">{{ 'DMP-EDITOR.TITLE.NEW' | translate }}</h4>
				</div>
				<div class="d-flex ml-auto p-2" *ngIf="!isNew">
					<button *ngIf="!isFinalized" mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto more-icon" (click)="$event.stopImmediatePropagation();">
						<mat-icon class="more-horiz">more_horiz</mat-icon>
					</button>
					<mat-menu #actionsMenu="matMenu">
						<button mat-menu-item *ngIf="!isPublic && isUserOwner" (click)="newVersion(dmp.id, dmp.label)">
							<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
						</button>
						<button mat-menu-item *ngIf="!isPublic" (click)="viewVersions(dmp.groupId, dmp.label)">
							<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
						</button>
						<button mat-menu-item *ngIf="!isPublic" (click)="clone(dmp.id)" class="menu-item">
							<mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }}
						</button>
						<button mat-menu-item *ngIf="!isPublic && isUserOwner" (click)="delete()" class="menu-item">
							<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
						</button>
					</mat-menu>

					<button mat-raised-button [matMenuTriggerFor]="exportMenu" color="primary" class="lightblue-btn export-btn ml-2">
						{{ '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(dmp.id)">
							<i class="fa fa-file-pdf-o pr-2"></i>
							<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
						</button>
						<button mat-menu-item (click)="downloadDocx(dmp.id)">
							<i class="fa fa-file-word-o pr-2"></i>
							<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
						</button>
						<button mat-menu-item (click)="downloadXml(dmp.id)">
							<i class="fa fa-file-code-o pr-2"></i>
							<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
						</button>
						<button mat-menu-item (click)="downloadJson(dmp.id)">
							<i class="fa fa-file-o pr-2"></i>
							<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
						</button>
					</mat-menu>
				</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" [isUserOwner]="isUserOwner"></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" [isNew]="isNew" [isUserOwner]="isUserOwner"></app-grant-tab>
						</mat-tab>
						<mat-tab *ngIf="!isNew">
							<ng-template mat-tab-label>
								<mat-icon class="mr-2">library_books</mat-icon>
								{{ 'DMP-LISTING.COLUMNS.DATASETS' | translate }}
							</ng-template>
							<app-datasets-tab [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized"></app-datasets-tab>
						</mat-tab>
						<mat-tab *ngIf="!isNew">
							<ng-template mat-tab-label>
								<mat-icon class="mr-2">person</mat-icon>
								{{ 'DMP-LISTING.COLUMNS.PEOPLE' | translate }}
							</ng-template>
							<app-people-tab [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized"></app-people-tab>
						</mat-tab>
						<mat-tab *ngIf="isNew" disabled>
							<ng-template mat-tab-label></ng-template>
						</mat-tab>
						<mat-tab *ngIf="isNew" disabled>
							<ng-template mat-tab-label></ng-template>
						</mat-tab>
						<!-- <mat-tab>
							<ng-template mat-tab-label>
								<mat-icon class="mr-2">settings</mat-icon>
								{{ 'DMP-LISTING.ACTIONS.SETTINGS' | translate }}
							</ng-template>
						</mat-tab>   -->
					</mat-tab-group>

					<div *ngIf="!isFinalized" class="d-flex justify-content-end pt-2 pb-4 pl-2">
						<div *ngIf="!isNew">
							<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="isNew">
							<button mat-raised-button color="primary" (click)="cancel()" type="button" class="text-uppercase mr-2">
								{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}
							</button>
						</div>
						<div *ngIf="formGroup.enabled">
							<button *ngIf="!isNew" mat-raised-button type="submit" class="text-uppercase dark-theme mr-2" color="primary">
								{{'DMP-EDITOR.ACTIONS.SAVE-CHANGES' | translate}}
							</button>
							<button *ngIf="isNew" mat-raised-button type="button" (click)="addDataset()" class="text-uppercase dark-theme mr-2" color="primary">
								{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
							</button>
						</div>
						<div *ngIf="formGroup.enabled && !isNew">
							<button type="button" mat-raised-button color="primary" class="text-uppercase mr-2" (click)="saveAndFinalize()">{{'DMP-EDITOR.ACTIONS.FINALISE' | translate}}
							</button>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
