<div class="main-content">
	<div class="container-fluid">
		<div class="card">
			<div class="row card-header card-header-plain d-flex">
				<div class="card-desc d-flex flex-column justify-content-center">
					<h4 class="card-title">{{'DASHBOARD.DATASETS' | translate}} {{titlePrefix}}</h4>
					<!-- <p class="card-category">{{'DATASET-LISTING.SUBTITLE' | translate}}</p> -->
				</div>
				<div class="row ml-auto p-2">
					<button mat-raised-button color="primary" class="text-uppercase lightblue-btn" [routerLink]="['/datasets/new']">
						<mat-icon>add</mat-icon> {{'DATASET-LISTING.ACTIONS.NEW' | translate}}
					</button>
				</div>
			</div>
			<div class="card-body table-responsive">
				<div class="listing row pb-2">
					<div class="col-12 col-sm-12 col-md-3">
						<app-dataset-criteria-component [status]="status" class="col-auto"></app-dataset-criteria-component>
					</div>
					<div class="col-12 col-sm-12 col-md-9 pt-4">
						<div *ngFor="let item of listingItems; let i = index">
							<app-dataset-listing-item-component [dataset]="item" [showDivider]="i != (listingItems.length - 1)"></app-dataset-listing-item-component>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-12 col-sm-12 col-md-9 ml-auto paginator">
						<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)" class="mt-2">
						</mat-paginator>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
