<div class="grant-criteria">
	<div class="filters">
		<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
		<div class="row" style="justify-content: center;">
			<!-- <h4 class="col-md-12">{{'CRITERIA.FILTERS'| translate}}</h4> -->
			<mat-form-field class="col-11 search">
				<input matInput placeholder=" {{'CRITERIA.GRANTS.LIKE'| translate}}" name="grantCriteriaLike" [(ngModel)]="criteria.like" (ngModelChange)="controlModified()">
				<mat-icon matSuffix class="style-icon">search</mat-icon>
			</mat-form-field>
			<mat-form-field class="col-10 filter-category">
				<input matInput (focus)="periodStartPicker.open()" (click)="periodStartPicker.open()" placeholder="{{'CRITERIA.GRANTS.PERIOD-FROM'| translate}}" [matDatepicker]="periodStartPicker" name="grantCriteriaPeriodStart" [(ngModel)]="criteria.periodStart" (ngModelChange)="controlModified()" [errorStateMatcher]="this">
				<mat-datepicker-toggle matSuffix [for]="periodStartPicker"></mat-datepicker-toggle>
				<mat-datepicker #periodStartPicker></mat-datepicker>
				<mat-error>{{'GENERAL.VALIDATION.GRANT-START-AFTER-END' | translate}}</mat-error>
			</mat-form-field>

			<mat-form-field class="col-10 filter-category">
				<input matInput (focus)="periodEndPicker.open()" (click)="periodEndPicker.open()" name="grantCriteriaPeriodEnd" placeholder="{{'CRITERIA.GRANTS.PERIOD-TO'| translate}}" [matDatepicker]="periodEndPicker" [(ngModel)]="criteria.periodEnd" (ngModelChange)="controlModified()" [errorStateMatcher]="this">
				<mat-datepicker-toggle matSuffix [for]="periodEndPicker"></mat-datepicker-toggle>
				<mat-datepicker #periodEndPicker></mat-datepicker>
				<mat-error>{{'GENERAL.VALIDATION.GRANT-START-AFTER-END' | translate}}</mat-error>
			</mat-form-field>
			<mat-form-field class="col-10 filter-category">
				<mat-select placeholder=" {{ 'CRITERIA.GRANTS.GRANT-STATE-TYPE' | translate}}" [(ngModel)]="criteria.grantStateType" (ngModelChange)="controlModified()" required>
					<mat-option [value]="null">
						{{ 'CRITERIA.GRANTS.TYPES.NONE' | translate}}
					</mat-option>
					<mat-option [value]="GrantStateType.OnGoing">
						{{ 'CRITERIA.GRANTS.TYPES.ON-GOING' | translate}}
					</mat-option>
					<mat-option [value]="GrantStateType.Finished">
						{{ 'CRITERIA.GRANTS.TYPES.FINISHED' | translate}}
					</mat-option>
				</mat-select>
			</mat-form-field>
		</div>
	</div>
</div>
