<div>
	<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 [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
				<mat-option [value]="order.LABEL">{{enumUtils.toRecentActivityOrderString(order.LABEL)}}</mat-option>
				<!-- <mat-option [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 *ngIf="datasetDrafts"  appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
			<mat-icon matSuffix>search</mat-icon>
			<input matInput placeholder="{{'CRITERIA.DATA-SETS.DRAFT-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 datasetDrafts">
		<div class="dataset-card">
			<a [routerLink]="['../datasets/overview/' + activity.id]" class="pointer">
				<div class="d-flex flex-direction-row">
					<div class="col-auto dataset-label">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}</div>
					<div class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | dateTimeCultureFormatter: "d MMMM y"}}</div>
				</div>
				<div class="col-auto dataset-title-draft">{{activity.label}}</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">{{activity.dmp}}</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" (click)="openShareDialog(activity.dmpId, activity.dmp)"><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" (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" (click)="deleteClicked(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)="deleteClicked(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 *ngIf="datasetDrafts && datasetDrafts.length > 0 && datasetDrafts.length >= startIndex + pageSize" class="d-flex justify-content-center">
		<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
	</div>
</div>
<!-- <div class="card card-draft">
	<div class="card-header card-header-plain">
		<div class="card-desc">
			<h4 class="card-title">{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}</h4>
			<p class="card-category">{{ 'TYPES.DATASET-STATUS.DRAFT-DESC' | translate }}</p>
		</div>
		<a class="view-all" [class.clickable]="isAuthenticated()" [routerLink]="['/datasets']" [queryParams]="{status: 0}">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</a>
	</div>
	<div class="card-body table-responsive">
		<table class="table table-hover">
			<tbody *ngIf="datasetDrafts != null">
				<tr *ngFor="let dataset of datasetDrafts" (click)="redirect(dataset.id, datasetDraftsTypeEnum.Dataset)" style="cursor: pointer;">
					<td>
						<div class="row">
							<div class="col-md-2">
								<i class="material-icons-outlined grey">library_books</i>
							</div>
							<div class="col-md-10">
								<div class="draft-title">
									{{'GENERAL.NAMES.DATASET' | translate}}: {{ dataset.label }} {{'DRAFTS.FOR-DMP' | translate}} {{ dataset.dmp }} {{'DRAFTS.FOR-GRANT' | translate}} {{ dataset.grant }}
								</div>
								<div class="draft-subtitle">{{ dataset.created | date: "shortDate"}}</div>
								<div class="draft-desc">{{ dataset.description }}</div>
								<div matTooltip="{{ dataset.profile }}" class="grant-pill">{{ dataset.profile }}</div>
							</div>
						</div>
					</td>
				</tr>
			</tbody>
			<tbody *ngIf="datasetDrafts == null">
				<td></td>
			</tbody>
		</table>
	</div>
</div> -->
