<div class="dmp-card">
	<a [routerLink]="isPublic ? ['/explore-plans/publicOverview/' + dmp.id] : ['/plans/overview/' + dmp.id]" class="pointer">
		<div class="d-flex flex-direction-row">
			<div class="col-auto dmp-label">{{ 'DMP-LISTING.DMP' | translate }}</div>
			<div *ngIf="!isPublic" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ dmp.modifiedTime | dateTimeCultureFormatter: "d MMMM y" }}</div>
			<div *ngIf="isPublic" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.PUBLISHED' | translate }}: {{ dmp.publishedAt | dateTimeCultureFormatter: "d MMMM y" }}</div>
		</div>
		<div class="col-auto" [ngClass]="{'dmp-title': !isDraft, 'dmp-title-draft': isDraft}">{{dmp.label}}</div>
		<div class="dmp-subtitle">
			<span *ngIf="isUserDMPRelated()" class="col-auto">{{ roleDisplay(dmp.users) }}</span>
			<span *ngIf="isUserDMPRelated()">.</span>
			<span class="col-auto" *ngIf="dmp.status === 1 && dmp.public === true"><span class="material-icons icon-align">public</span>{{'TYPES.DMP-VISIBILITY.PUBLIC' | translate}}</span>
			<span *ngIf="dmp.status === 1 && dmp.public === false" class="col-auto"><span class="material-icons icon-align">done</span>{{ enumUtils.toDmpStatusString(dmp.status) }}</span>
			<span *ngIf="dmp.status === 0" class=" col-auto draft"><span class="material-icons icon-align">create</span>{{ enumUtils.toDmpStatusString(dmp.status) }}</span>
			<span>.</span>
			<span class="col-auto">{{'DMP-LISTING.VERSION' | translate}} {{dmp.version}}</span>
			<span>.</span>
			<span class="col">{{ 'DMP-LISTING.GRANT' | translate }}: {{dmp.grant}}</span>
		</div>
		<div class="col-auto dmp-dataset-descriptions-title">{{'DMP-LISTING.CONTAINED-DATASETS' | translate}}: ({{ dmp.datasets.length }})
		</div>
		<div *ngFor="let dataset of dmp.datasets; let i = index; let last = last" [ngClass]="{'pb-3': i === dmp.datasets.length - 1}">
			<div *ngIf="i < 3">
				<div class="col-auto dmp-dataset-descriptions-name" *ngIf="!last && i !== 2">{{dataset.label}},</div>
				<div class="col-auto dmp-dataset-descriptions-name" *ngIf="last || i == 2">{{dataset.label}}</div>
			</div>
		</div>
		<a class="d-flex justify-content-center pb-3 show-more" *ngIf="dmp.datasets.length > 3" [routerLink]="isPublic ? ['/explore-plans/publicOverview/' + dmp.id] : ['/plans/overview/' + dmp.id]"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a>
	</a>
	<div class="dmp-card-actions">
		<a class="col-auto border-right pointer" [matMenuTriggerFor]="exportMenu"><span class="material-icons icon-align pr-2">open_in_new</span>{{'DMP-LISTING.ACTIONS.EXPORT' | translate}}</a>
		<a class="col-auto border-right pointer" *ngIf="isDraftDmp(dmp)" [routerLink]="['/datasets/new/' + dmp.id]" target="_blank"><span class="material-icons icon-align">add</span>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}</a>
		<a class="col-auto border-right pointer" *ngIf="isUserOwner(dmp)" (click)="openShareDialog(dmp.id, dmp.label)"><span class="material-icons icon-align pr-2">group_add</span>{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}</a>
		<a class="col-auto border-right pointer" *ngIf="isAuthenticated()" (click)="cloneOrNewVersionClicked(dmp, false)"><span class="material-icons icon-align pr-2">filter_none</span>{{'DMP-LISTING.ACTIONS.CLONE' | translate}}</a>
		<a class="col-auto border-right pointer" *ngIf="!isAuthenticated()" (click)="viewVersions(dmp.groupId, dmp.label, dmp)"><span class="material-icons icon-align pr-2">library_books</span>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}</a>

		<a class="col-auto border-right pointer" *ngIf="!isDraftDmp(dmp) && isUserOwner(dmp)" (click)="deleteClicked(dmp.id)"><span class="material-icons icon-align pr-2">delete</span>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}</a>
		<a class="col-auto pointer" *ngIf="isAuthenticated()" [matMenuTriggerFor]="actionsMenu"><span class="material-icons icon-align pl-2">more_horiz</span></a>
	</div>

	<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>
	<mat-menu #actionsMenu="matMenu" xPosition="before">
		<button *ngIf="isUserOwner(dmp)" mat-menu-item (click)="cloneOrNewVersionClicked(dmp, true)">
			<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
		</button>
		<button mat-menu-item (click)="viewVersions(dmp.groupId, dmp.label, dmp)">
			<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
		</button>
		<button mat-menu-item *ngIf="isDraftDmp(dmp) && isUserOwner(dmp)" (click)="deleteClicked(dmp.id)" class="menu-item">
			<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
		</button>
	</mat-menu>
</div>

<!-- <div class="listing-item">
	<a [routerLink]="isPublic ? ['/explore-plans/publicOverview/' + dmp.id] : ['/plans/overview/' + dmp.id]">
		<div class="col">
			<div class="row">
				<div class="col-12 gray-container container-header">
					<p>{{dmp.grantAbbreviation}}</p>
					<button *ngIf="isDraft" mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto" (click)="$event.preventDefault(); $event.stopPropagation();">
						<mat-icon class="more-horiz">more_horiz</mat-icon>
					</button>
					<mat-menu #actionsMenu="matMenu">
						<button mat-menu-item (click)="editClicked(dmp.id)" class="menu-item" *ngIf="!isPublic">
							<mat-icon>edit</mat-icon>{{ 'DMP-LISTING.ACTIONS.EDIT' | translate }}
						</button>
						<button mat-menu-item (click)="openShareDialog(dmp.id,dmp.label)" *ngIf="!isPublic">
							<mat-icon>share</mat-icon>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}
						</button>
						<button mat-menu-item (click)="addDataset(dmp.id)" *ngIf="!isPublic">
							<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET' | translate}}
						</button>
						<button mat-menu-item (click)="showDatasets(dmp.id, dmp.label)">
							<mat-icon>list</mat-icon>{{'DMP-LISTING.ACTIONS.DATASETS' | translate}}
						</button>
						<button mat-menu-item (click)="viewVersions(dmp.groupId, dmp.label)">
							<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
						</button>
					</mat-menu>
				</div>
			</div>
			<div class="row">
				<div class="col-auto">
					<mat-icon *ngIf="isDraft" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.DRAFT' | translate}}" class="draft-icon">
						lock_open
					</mat-icon>
					<mat-icon *ngIf="isFinalized && !isPublished" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.FINALIZED' | translate}}" class="lock-icon">
						lock
					</mat-icon>
					<div *ngIf="isPublished" class="outer-circle"><div class="inner-circle" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.PUBLISHED' | translate}}"></div></div>
				</div>
				<div class="col">
					<div class="row d-flex flex-wrap">
						<div class="col pl-0">
							<h4 class="title pl-0" *ngIf="isDraft">
								<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{dmp.label}}
							</h4>
							<h4 class="title pl-0" *ngIf="!isDraft">{{dmp.label}}</h4>
						</div>
					</div>
					<div class="row">
						<div class="col-auto pl-0">
							<p class="mt-1 description">{{dmp.description}}</p>
						</div>
						<div class="col-auto about-item ml-auto">
							<p>{{'DMP-LISTING.COLUMNS.VERSION' | translate}} : {{dmp.version}}</p>
						</div>
					</div>
					<div class="row">
						<div class="col-auto about-item pl-0" *ngIf="!isPublic">
							<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.LEVEL-OF-ACCESS' | translate}}">
								settings
							</mat-icon>
							<h4 class="mt-1 ml-1 mr-3 p-1 role">{{roleDisplay(dmp.users).toUpperCase()}}</h4>
						</div>
						<div class="col-auto about-item" [ngClass]="isPublic ? 'pl-0' : ''">
							<a class="datasets-counter" [routerLink]="isPublic ? ['/explore-plans/publicEdit/' + dmp.id] : ['/plans/edit/' + dmp.id]" [queryParams]="{ tab: 'datasetDescriptions' }">
								<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}">
									storage
								</mat-icon>
								<h4 class="mt-1 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
							</a>
						</div>
						<div class="col-auto about-item pt-2 pl-0">
							<mat-icon class="gray-icon" matTooltip="{{'DMP-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}">assignment</mat-icon>
							<div *ngFor="let profile of dmp.associatedProfiles" class="pb-1">
								<div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
							</div>
						</div>
						<div class="col-auto about-item ml-auto">
							<p *ngIf="isDraft">{{'DMP-PROFILE-LISTING.COLUMNS.LAST-EDITED' | translate}} {{dmp.modifiedTime | date: "shortDate"}}</p>
							<p *ngIf="isFinalized && !isPublished">{{'TYPES.DMP.FINALISED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}</p>
							<p *ngIf="isPublished">{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.publishedAt | date: "shortDate"}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</a>
</div> -->
<!-- <mat-divider *ngIf="showDivider"></mat-divider> -->
