<div class="main-content">
	<div class="container-fluid dmp-profile-listing">
		<div class="row align-items-center">
			<div class="col-auto">
				<h3>{{titlePrefix}} {{'DMP-PROFILE-LISTING.TITLE' | translate}}</h3>
			</div>
			<div class="col"></div>
			<div class="col-auto">
				<button mat-raised-button class="import-btn" (click)="openDialog()">
					<span class="button-text">
						{{'DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML' | translate}}
					</span>
				</button>
				<button mat-raised-button class="create-btn ml-md-3" [routerLink]="['/dmp-profiles/new'] ">
					<span class="button-text">
						{{'DMP-PROFILE-LISTING.CREATE-DMP-TEMPLATE' | translate}}
					</span>
				</button>
			</div>
		</div>

		<app-dmp-profile-criteria-component></app-dmp-profile-criteria-component>
		<div class="mat-elevation-z6">
			<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">

				<!-- Column Definition: Name -->
				<ng-container cdkColumnDef="label">
					<mat-header-cell *matHeaderCellDef mat-sort-header="label">
						{{'DMP-PROFILE-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
					<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
				</ng-container>

				<!-- Column Definition: status -->
				<ng-container cdkColumnDef="status">
					<mat-header-cell *matHeaderCellDef mat-sort-header="status">
						{{'DMP-PROFILE-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
					<mat-cell *matCellDef="let row">
						<div [ngClass]="['status-chip', getStatusClass(row.status)]">
							{{parseStatus(row.status) | translate}}
						</div>
					</mat-cell>
				</ng-container>

				<!-- Column Definition: Created -->
				<ng-container cdkColumnDef="created">
					<mat-header-cell *matHeaderCellDef mat-sort-header="created">
						{{'DMP-PROFILE-LISTING.COLUMNS.CREATED' | translate}}</mat-header-cell>
					<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
				</ng-container>

				<!-- Column Definition: Submission Time -->

				<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
				<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
				<!-- (click)="rowClick(row.id)" -->

			</mat-table>
			<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
			</mat-paginator>
		</div>
	</div>
</div>
