<div class="header-image">
	<div class="header-text-container">
		<h3>{{ 'ABOUT.WELCOME' | translate }}</h3>
		<h4>{{ 'ABOUT.WELCOME-MESSAGE' | translate }}</h4>
	</div>
</div>
<div class="explore-dmp-content">
	<div class="container-fluid">
		<div class="card">
			<div class="card-header card-header-plain d-flex">
				<div class="card-desc d-flex flex-column justify-content-center">
					<h4 class="card-title">{{'DMP-LISTING.TITLE' | translate}}</h4>
					<div *ngIf="allVersions">
							<span class="all-versions">
								{{'DMP-LISTING.VIEW-ALL-VERSIONS' | translate}}
							</span>
							<span class="dmp-label">
								{{this.groupLabel}}
							</span>
						</div>
				</div>
			</div>
			<div class="card-body table-responsive">
				<div class="explore-dmp-listing row pb-2">
					<div class="col-12 col-sm-12 col-md-3">
						<app-explore-dmp-filters-component class="col-auto" (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dmp-filters-component>
						<!-- <app-explore-dmp-filters-component class="col-auto" [showGrant]="showGrant" (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dmp-filters-component> -->
					</div>
					<div class="col-12 col-sm-12 col-md-9 pt-4">
						<div *ngFor="let item of listingItems; let i = index">
							<app-explore-dmp-listing-item-component [showDivider]="i !== (listingItems.length - 1)" [dmp]="item"></app-explore-dmp-listing-item-component>
						</div>
						<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)"></mat-paginator>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
