<div class="listing-item">
	<div class="col" (click)="itemClicked()">
		<div class="row">
			<div class="col-12 gray-container container-header">
				<p>{{grant.abbreviation}}</p>
			</div>
		</div>
		<div class="row">
			<div class="col-12 about-item">
				<mat-icon class="draft-icon">lock</mat-icon>
				<h4 class="title">{{grant.label}}</h4>
			</div>
		</div>
		<div class="row">
			<div class="col-12">
				<p class="mt-1 mb-2">{{grant.description}}</p>
			</div>
		</div>
		<div class="row">
			<div class="col-12 about-item">
				<mat-icon class="gray-icon pt-2">calendar_today</mat-icon>
				<h4 class="mt-2 ml-1 mr-3 p-1">{{grant.startDate | date:'shortDate'}} - {{grant.endDate | date:'shortDate'}}</h4>
			</div>
		</div>
	</div>

</div>
<!-- <mat-divider *ngIf="showDivider"></mat-divider> -->


<!-- <div class="grant-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">{{grant.label}}</h4>
			<h4 class="col-12 grant-title">{{grant.abbreviation}}</h4>
		</div>
		<div class="row d-flex align-items-center my-1">
			<mat-icon class="col-auto gray-icon">desc</mat-icon>
			<span class="col-auto m-2 p-1">{{grant.description}}</span>
		</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-2 p-1">{{grant.startDate | date:'shortDate'}}</h4> - <h4 class="col-auto m-2 p-1">{{grant.endDate | date:'shortDate'}}</h4>
		</div>
	</div>
</div>
<mat-divider *ngIf="showDivider"></mat-divider> -->
