<div class="col-md-12 d-flex justify-content-center" *ngIf="allRecentActivities == null">
	<span class="empty-list">{{'DMP-LISTING.EMPTY-LIST' | translate}}</span>
</div>
<div *ngIf="allRecentActivities != null">
	<div class="d-flex flex-direction-row pt-4">
		<!-- Sort by -->
		<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
		<mat-form-field appearance="outline" class="sort-form col-auto">
			<mat-select placeholder="{{'CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
				<mat-option *ngIf="!publicMode" [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
				<mat-option *ngIf="publicMode" [value]="order.PUBLISHED">{{enumUtils.toRecentActivityOrderString(order.PUBLISHED)}}</mat-option>
				<mat-option [value]="order.LABEL">{{enumUtils.toRecentActivityOrderString(order.LABEL)}}</mat-option>
				<mat-option *ngIf="!publicMode" [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option>
				<!-- <mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option> -->
			</mat-select>
		</mat-form-field>
		<!-- End of Sort by -->
		<!-- Search Filter-->
		<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
			<mat-icon matSuffix>search</mat-icon>
			<input matInput placeholder="{{'CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
			<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
		</mat-form-field>
		<!-- End of Search Filter -->
	</div>
	<div *ngFor="let activity of allRecentActivities">
		<div *ngIf="activity && activity.type === recentActivityTypeEnum.Dmp.valueOf()">
			<div class="dmp-card">
				<!-- <a (click)="redirect(activity.id, activity.type)" class="pointer"> -->
				<a [routerLink]="navigateToUrl(activity.id, activity.type)" class="pointer">
					<div class="d-flex flex-direction-row">
						<div class="col-auto dmp-label">{{ 'DMP-LISTING.DMP' | translate }}</div>
						<div *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ activity.modified | dateTimeCultureFormatter: "d MMMM y" }}</div>
						<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.PUBLISHED' | translate }}: {{ activity.publishedAt | dateTimeCultureFormatter: "d MMMM y" }}</div>
					</div>
					<div class="col-auto" [ngClass]="{'dmp-title': activity.status === 1, 'dmp-title-draft': activity.status === 0}">{{activity.title}}</div>
					<div class="dmp-subtitle">
						<span class="col-auto">{{ roleDisplay(activity.users) }}</span>
						<span>.</span>
						<span class="col-auto" *ngIf="activity.status === 1 && activity.public === true"><span class="material-icons icon-align">public</span>{{'TYPES.DMP-VISIBILITY.PUBLIC' | translate}}</span>
						<span *ngIf="activity.status === 1 && activity.public === false" class="col-auto"><span class="material-icons icon-align">done</span>{{ enumUtils.toDmpStatusString(activity.status) }}</span>
						<span *ngIf="activity.status === 0" class=" col-auto draft"><span class="material-icons icon-align">create</span>{{ enumUtils.toDmpStatusString(activity.status) }}</span>
						<span>.</span>
						<span class="col-auto">{{'DMP-LISTING.VERSION' | translate}} {{activity.version}}</span>
						<span>.</span>
						<span class="col">{{ 'DMP-LISTING.GRANT' | translate }}: {{activity.grant}}</span>
					</div>
					<div class="col-auto dmp-dataset-descriptions-title">{{'DMP-LISTING.CONTAINED-DATASETS' | translate}}: ({{ getDatasets(activity).length }})
					</div>
					<div *ngFor="let dataset of getDatasets(activity); let i = index; let last = last" [ngClass]="{'pb-3': i === activity.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="getDatasets(activity).length > 3" (click)="redirect(activity.id, activity.type)"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a> -->
					<a class="d-flex justify-content-center pb-3 show-more" *ngIf="getDatasets(activity).length > 3" [routerLink]="navigateToUrl(activity.id, activity.type)"><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(activity)" [routerLink]="['/datasets/new/' + activity.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(activity)" (click)="openShareDialog(activity.id, activity.title)"><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(activity, 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(getGroupId(activity), activity.title, activity)"><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(activity) && isUserOwner(activity)" (click)="deleteDmpClicked(activity)"><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(activity.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(activity.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(activity.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(activity.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(activity)" mat-menu-item (click)="cloneOrNewVersionClicked(activity, true)">
						<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
					</button>
					<button mat-menu-item (click)="viewVersions(getGroupId(activity), activity.title, activity)">
						<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
					</button>
					<button mat-menu-item *ngIf="isDraftDmp(activity) && isUserOwner(activity)" (click)="deleteDmpClicked(activity)" class="menu-item">
						<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
					</button>
				</mat-menu>
			</div>
		</div>
		<div *ngIf="activity && activity.type === recentActivityTypeEnum.Dataset.valueOf()">
			<div class="dataset-card">
				<!-- <a (click)="redirect(activity.id, activity.type)" class="pointer"> -->
				<a [routerLink]="navigateToUrl(activity.id, activity.type)" class="pointer">
					<div class="d-flex flex-direction-row">
						<div class="col-auto dataset-label">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}</div>
						<div *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | dateTimeCultureFormatter: "d MMMM y"}}</div>
						<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.PUBLISHED' | translate}}: {{activity.publishedAt | dateTimeCultureFormatter: "d MMMM y"}}</div>
					</div>
					<div *ngIf="activity.status === 1" class="col-auto dataset-title">{{activity.title}}</div>
					<div *ngIf="activity.status === 0" class="col-auto dataset-title-draft">{{activity.title}}</div>
					<div class="dataset-subtitle">
						<span class="col-auto">{{ roleDisplay(activity.users) }}</span>
						<span>.</span>
						<span class="col-auto" *ngIf="activity.status === 1 && activity.public === true"><span class="material-icons icon-align">public</span>{{'DATASET-LISTING.STATES.PUBLIC' | translate}}</span>
						<span *ngIf="activity.status === 1 && activity.public === false" class="col-auto"><span class="material-icons icon-align">done</span>{{ enumUtils.toDmpStatusString(activity.status) }}</span>
						<span *ngIf="activity.status === 0" class=" col-auto draft"><span class="material-icons icon-align">create</span>{{ enumUtils.toDmpStatusString(activity.status) }}</span>
						<span>.</span>
						<span class="col">{{'DATASET-LISTING.COLUMNS.GRANT' | translate}}: {{activity.grant}}</span>
					</div>
					<div class="d-flex flex-direction-row pt-3 pb-3">
						<div class="col-auto dataset-subtitle pr-0">{{'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-label">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div> -->
						<div class="col dmp-title">{{ getDmp(activity) }}</div>
					</div>
				</a>
				<div class="dataset-card-actions">
					<a class="col-auto border-right pointer" [matMenuTriggerFor]="exportMenu"><span class="material-icons icon-align pr-2">open_in_new</span>{{'DATASET-LISTING.ACTIONS.EXPORT' | translate}}</a>
					<a class="col-auto border-right pointer" *ngIf="isAuthenticated()" (click)="openShareDialog(getDmpId(activity), getDmp(activity))"><span class="material-icons icon-align pr-2">group_add</span>{{'DATASET-LISTING.ACTIONS.INVITE-SHORT' | translate}}</a>
					<a class="col-auto border-right pointer" *ngIf="isAuthenticated()" (click)="openDmpSearchDialogue(activity)"><span class="material-icons icon-align pr-2">file_copy</span>{{'DATASET-WIZARD.ACTIONS.COPY-DATASET' | translate}}</a>
					<a class="col-auto border-right pointer" *ngIf="isAuthenticated()" (click)="deleteDatasetClicked(activity.id)"><span class="material-icons icon-align pr-2">delete</span>{{ 'DATASET-WIZARD.ACTIONS.DELETE' | translate }}</a>

					<!-- <a class="col-auto pointer" [matMenuTriggerFor]="actionsMenu"><span class="material-icons icon-align pl-2">more_horiz</span></a> -->
					<!-- <a class="col-auto" [matMenuTriggerFor]="actionsMenu" *ngIf="!publicMode"><span class="material-icons icon-align pl-2">more_horiz</span></a> -->
				</div>
				<mat-menu #actionsMenu="matMenu">
					<button mat-menu-item (click)="openDmpSearchDialogue(activity)" class="menu-item">
						<mat-icon>file_copy</mat-icon>{{'DATASET-WIZARD.ACTIONS.COPY-DATASET' | translate}}
					</button>
					<button mat-menu-item (click)="deleteDatasetClicked(activity.id)" class="menu-item">
						<mat-icon>delete</mat-icon>{{ 'DATASET-WIZARD.ACTIONS.DELETE' | translate }}
					</button>
					<!-- <button mat-menu-item *ngIf="needsUpdate(activity)" class="menu-item" (click)="openUpdateDatasetProfileDialogue(activity.id);">
								<mat-icon>update</mat-icon>
								{{ 'DATASET-WIZARD.ACTIONS.UPDATE-DATASET-PROFILE' | translate }}
							</button> -->
				</mat-menu>

				<mat-menu #exportMenu="matMenu" xPosition="before">
					<button mat-menu-item (click)="downloadPDF(activity)">
						<i class="fa fa-file-pdf-o pr-2"></i>
						<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
					</button>
					<button mat-menu-item (click)="downloadDOCX(activity)">
						<i class="fa fa-file-word-o pr-2"></i>
						<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
					</button>
					<button mat-menu-item (click)="downloadXML(activity)">
						<i class="fa fa-file-code-o pr-2"></i>
						<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
					</button>
				</mat-menu>
			</div>
		</div>
	</div>
	<div *ngIf="allRecentActivities && allRecentActivities.length > 0 && (allRecentActivities.length >= startIndex + pageSize) && hasMoreActivity" class="d-flex justify-content-center">
		<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
	</div>
</div>


<!-- Old version of dashboard -->
<!-- <div class="card">
	<div class="card-header card-header-plain">
		<div class="card-desc">
			<h4 class="card-title">
				{{ 'RECENT-ACTIVITY.LAST-EDITED-DMP' | translate}}
			</h4>
		</div>
		<a class="view-all" [class.clickable]="isAuthenticated()" [routerLink]="['/plans/']">
			{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</a>
	</div>
	<div class="card-body table-responsive">
		<table class="table table-hover">
			<thead class="text-default">
				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.NAME' | translate}}</th>
				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.TEMPLATE' | translate }}</th>
				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.GRANT' | translate }}</th>
				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</th>
				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.ORGANIZATION' | translate }}</th>
				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.STATUS' | translate }}</th>
				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.EDITED' | translate }}</th>
				<th></th>
			</thead>
			<tbody *ngIf="dmpActivities != null">
				<a *ngFor="let activity of dmpActivities" class="table-row" [routerLink]="['../plans/overview/' + activity.id]">
					<td>{{ activity.label }}</td>
					<td>
						<div *ngIf="activity.profile" matTooltip="{{ activity.profile }}" class="template-name">
							{{ activity.profile }}
						</div>
						<div *ngIf="!(activity.profile)" class="template-name">--</div>
					</td>
					<td>{{ activity.grant }}</td>
					<td>{{ roleDisplay(activity.users)}}</td>
					<td>{{ activity.organisations }}</td>
					<td *ngIf="activity.status === 1 && activity.public === true">
						<div class="is-public">
							{{'TYPES.DMP-VISIBILITY.PUBLIC' | translate}}
						</div>
					</td>
					<td *ngIf="activity.status === 1 && activity.public === false" class="text-center">
						{{ enumUtils.toDmpStatusString(activity.status) }}
					</td>
					<td *ngIf="activity.status === 0" class="text-center">
						{{ enumUtils.toDmpStatusString(activity.status) }}
					</td>
					<td>
						{{ activity.modifiedTime | date: "shortDate" }}
					</td>
					<td>
						<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto more-icon" (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(activity)" class="menu-item">
								<mat-icon>edit</mat-icon>{{ 'DMP-LISTING.ACTIONS.EDIT' | translate }}
							</button>
							<button mat-menu-item (click)="cloneClicked(activity)" class="menu-item">
								<mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }}
							</button>
							<button mat-menu-item (click)="deleteClicked(activity)" class="menu-item">
								<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
							</button>
							<button mat-menu-item [matMenuTriggerFor]="exportMethod" class="menu-item">
								<mat-icon>save_alt</mat-icon>{{ 'DMP-LISTING.ACTIONS.EXP-AS' | translate }}
							</button>
						</mat-menu>
						<mat-menu #exportMethod>
							<button mat-menu-item (click)="downloadPDF(activity.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(activity.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(activity.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(activity.id)">
								<i class="fa fa-file-o pr-2"></i>
								<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
							</button>
						</mat-menu>
					</td>
				</a>
			</tbody>
			<tbody *ngIf="dmpActivities == null">
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</div>
</div> -->
