<div class="listing-item">
	<a [routerLink]="['/explore-plans/overview/' + this.dmp.id]">
		<div class="col">
			<div class="row">
				<div class="col-12 gray-container container-header">
					{{dmp.grantAbbreviation}}
				</div>
			</div>
			<div class="row">
				<div class="col-auto">
					<div class="outer-circle"><div class="inner-circle" matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}"></div></div>
					<!-- <mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}" class="published-icon">fiber_manual_record</mat-icon> -->
					<!-- <mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}" class="published-icon">radio_button_checked</mat-icon> -->
				</div>
				<div class="col">
					<div class="row d-flex flex-wrap">
						<div class="col pl-0">
							<h4 class="title pl-0">{{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">
							<!-- <mat-icon class="gray-icon pt-2">settings</mat-icon> -->
							<!-- <h4 class="mt-2 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4> -->

							<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2">storage</mat-icon>
							<h4 class="length mt-2 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
						</div>
						<div class="col-auto about-item">
							<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
							<div *ngFor="let profile of dmp.associatedProfiles" class="pt-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>{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</a>
</div>


<!-- <div class="explore-dmp-listing-item row" (click)="itemClicked()">
	<div class="col-auto">
		<mat-icon>lock</mat-icon>
	</div>
	<div class="col">
		<div class="row">
			<h4 class="col-12 title">{{dmp.label}}</h4>
			<h4 class="col-12 grant-title">{{dmp.grant}}</h4>
		</div>
		<div class="row d-flex align-items-center my-1">
			<mat-icon class="col-auto gray-icon">storage</mat-icon>
			<h4 class="col-auto m-2 p-1">{{dmp.associatedProfiles.length}}</h4>
			<div class="row" *ngFor="let profile of dmp.associatedProfiles">
				<div class="col-auto explore-dmp-chip ml-2">{{profile.label}}</div>
			</div>
		</div>
		<div class="row d-flex align-items-center my-1">
			<mat-icon class="col-auto gray-icon">settings</mat-icon>
			<h4 class="col-auto m-0 p-0">OWNER</h4>
		</div>
		<div class="row d-flex align-items-center my-1">
			<mat-icon class="col-auto gray-icon">group</mat-icon>
			<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
			<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
			<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
			<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
			<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
			<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
		</div>
	</div>
	<div class="col-auto">
		<mat-icon>more_horiz</mat-icon>
	</div>
</div>
<mat-divider *ngIf="showDivider"></mat-divider> -->
