<div class="main-content dataset-overview pl-5 pr-5">
	<div class="container-fluid pl-0 pr-0">
		<div *ngIf="dataset">
			<a class="row mb-2 pl-1" (click)="goBack()" role="button">
				<mat-icon class="back-icon pointer">chevron_left</mat-icon>
				<p class="label-txt pointer">{{'DMP-WIZARD.ACTIONS.BACK' | translate}}</p>
			</a>
			<div class="row">
				<div class="col-md-8 col-lg-8 pl-4">
					<div class="row">
						<span class="col-auto dataset-logo">{{ 'NAV-BAR.DATASET' | translate }}</span>
						<p class="col dataset-label p-0 ml-3 mb-0">{{ dataset.label }}</p>
					</div>
					<div class="row d-flex align-items-center mt-3 mb-4 label-txt">
						<div *ngIf="isUserDatasetRelated()" class="d-flex">
							<p class="ml-0 mb-0 label2-txt">
								{{ roleDisplayFromList(dataset.users) }}
							</p>
						</div>
						<span *ngIf="isUserDatasetRelated()" class="ml-2 mr-2">.</span>
						<!-- UNCOMMENT TO ADD PRIVATE ICON -->
						<!-- <span *ngIf="isUserDatasetRelated() && (dataset.public || !dataset.public || lockStatus)" class="ml-2 mr-2">.</span> -->
						<div *ngIf="dataset.public" class="d-flex flex-row">
							<mat-icon class="status-icon">public</mat-icon>
							{{'DMP-OVERVIEW.PUBLIC' | translate}}
						</div>
						<span *ngIf="dataset.public" class="ml-2 mr-2">.</span>
						<!-- UNCOMMENT TO ADD PRIVATE ICON -->
						<!-- <div *ngIf="!dataset.public" class="d-flex flex-row">
							<mat-icon class="status-icon">public_off</mat-icon>
							{{'DMP-OVERVIEW.PRIVATE' | translate}}
						</div>
						<span *ngIf="!dataset.public" class="ml-2 mr-2">.</span> -->
						<div *ngIf="lockStatus" class="d-flex flex-row">
							<mat-icon class="status-icon">lock_outline</mat-icon>
							{{'DMP-OVERVIEW.LOCKED' | translate}}
						</div>
						<span *ngIf="lockStatus" class="ml-2 mr-2">.</span>
						<div class="d-flex mr-2">{{'GENERAL.STATUSES.EDIT' | translate}} :
							<!-- {{dataset.modified | date:'longDate':'+0200': this.language.store.currentLang }} -->
							{{dataset.modified | dateTimeCultureFormatter: "d MMMM y"}}
						</div>
						<div class="d-flex ml-2 mr-4">
							<div *ngIf="dataset.status" class="d-flex flex-row uppercase">
								<mat-icon class="status-icon check-icon">check</mat-icon>
								{{'TYPES.DATASET-STATUS.FINALISED' | translate}}
							</div>
						</div>
					</div>
					<div class="row mb-4 pb-3">
						<button *ngIf="isDraftDataset(dataset) && !lockStatus" (click)="editClicked(dataset)" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DMP-LISTING.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
							<mat-icon class="mat-mini-fab-icon">create</mat-icon>
						</button>
						<button *ngIf="isAuthenticated()" (click)="openDmpSearchDialogue()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
							<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
						</button>
						<button *ngIf="isUserDatasetRelated() && !lockStatus" (click)="deleteClicked()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DMP-LISTING.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
							<mat-icon class="mat-mini-fab-icon">delete</mat-icon>
						</button>
					</div>
					<div class="row header">{{'DATASET-LISTING.TOOLTIP.PART-OF' | translate}}</div>
					<div class="row ">
						<button class="dmp-btn" (click)="dmpClicked(dataset.dmp)">
							<div class="dmp-btn-label">
								{{ this.dataset.dmp.label }}
							</div>
							<mat-icon>launch</mat-icon>
						</button>
					</div>

					<div class="row header">{{'DMP-OVERVIEW.GRANT' | translate}}</div>
					<div class="row dataset-label">{{ dataset.grant.label }}</div>

					<div class="row header">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div>
					<div class="row">
						<div *ngFor="let researcher of researchers; let last = last">
							<span *ngIf="isOrcid(researcher.reference)">
								<a href="{{ getOrcidPathForResearcher(researcher.reference) }}" target="blank" class="researcher">
									<div class="id-btn">&nbsp;</div>
									<div *ngIf="!last">{{ researcher.name }}, </div>
									<div *ngIf="last">{{ researcher.name }}</div>
								</a>
							</span>
							<span *ngIf="!isOrcid(researcher.reference)">
								<div *ngIf="!last">{{ researcher.name }}, </div>
								<div *ngIf="last">{{ researcher.name }}</div>
							</span>
						</div>
						<span *ngIf="!researchers || researchers.length === 0" class="material-icons">horizontal_rule</span>
					</div>

					<div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
					<div class="row" *ngIf="dataset.description">
						<p class="desc-txt" [innerHTML]="dataset.description"></p>
					</div>
					<div class="row" *ngIf="!dataset.description">
						<span class="material-icons">horizontal_rule</span>
					</div>
				</div>
				<div class="col-md-4 col-lg-4 p-0">
					<div class="frame mb-3 pt-4 pl-3 pr-5 pb-1">
						<div *ngIf="!dataset.status && isDraftDataset(dataset) && !lockStatus">
							<div class="row ml-0 mr-0 pl-4 d-flex align-items-center" (click)="finalize(dataset)">
								<button mat-mini-fab class="finalize-btn">
									<mat-icon class="mat-mini-fab-icon check-icon">check</mat-icon>
								</button>
								<p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.FINALIZE' | translate }}</p>
							</div>
							<div class="row ml-0 mr-0 pl-4 d-flex align-items-center">
								<hr class="hr-line">
							</div>
						</div>
						<div *ngIf="hasReversableStatus(dataset)" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center" (click)="reverse(dataset)">
							<button mat-mini-fab class="frame-btn">
								<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
							</button>
							<p class="mb-0 mr-0 pl-2 frame-txt">{{ 'DATASET-WIZARD.ACTIONS.REVERSE' | translate }}</p>
						</div>
						<div class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center">
							<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
								<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
							</button>
							<p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">
								{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}</p>
						</div>
						<!-- <div *ngIf="!dataset.public && showPublishButton(dataset) && isUserOwner" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center" (click)="publish(dataset.id)">
							<button mat-mini-fab class="frame-btn">
								<mat-icon class="mat-mini-fab-icon">public</mat-icon>
							</button>
							<p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.MAKE-PUBLIC' | translate }}</p>
						</div> -->
						<mat-menu #exportMenu="matMenu" xPosition="before">
							<button mat-menu-item (click)="downloadPDF(dataset.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(dataset.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(dataset.id)">
								<i class="fa fa-file-code-o pr-2"></i>
								<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
							</button>
							<!-- GK: NO-->
							<!-- <button mat-menu-item (click)="downloadJson(dataset.id)">
								<i class="fa fa-file-o pr-2"></i>
								<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
							</button> -->
						</mat-menu>
					</div>
					<div class="frame mb-3 pt-4 pl-3 pr-3 pb-1">
						<div class="row ml-0 mr-0 pl-4 pb-3">
							<p class="header">{{ 'DATASET-OVERVIEW.DATASET-AUTHORS' | translate }}</p>
						</div>
						<div class="row ml-0 mr-0 pl-4 ml-2 pb-3 d-flex align-items-center">
							<div *ngFor="let user of dataset.users" class="row authors">
								<div class="d-flex flex-row">
									<button class="account_btn mr-3 pl-0">
										<mat-icon class="account-icon">account_circle</mat-icon>
									</button>
									<div>
										<p class="authors-label">{{ user.name }}
											<span *ngIf="isUserAuthor(user.id)">
												({{ 'DMP-OVERVIEW.YOU' | translate }})</span>
										</p>
										<p class="authors-role">{{ roleDisplay(user) }}</p>
									</div>
								</div>
								<button *ngIf="isUserOwner && !dataset.status && user.role" (click)="removeUserFromDmp(user)" class="remove-btn">{{ 'GENERAL.CONFIRMATION-DIALOG.ACTIONS.REMOVE' | translate}}</button>
							</div>
						</div>
						<div *ngIf="isUserOwner" class="row mt-3 mb-3 d-flex align-items-center justify-content-center">
							<button mat-raised-button class="invite-btn" (click)="openShareDialog(dataset.dmp.id, dataset.dmp.label)">
								<mat-icon>group_add</mat-icon>
								{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
