argos/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.html

<div class="filters">
	<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
	<div class="row" style="justify-content: center;">

		<mat-form-field class="col-11 search">
			<input matInput placeholder="{{'CRITERIA.GRANTS.LIKE'| translate}}" name="dmpCriteriaName"
				[(ngModel)]="facetCriteria.like" (ngModelChange)="controlModified()">
			<mat-icon matSuffix class="style-icon">search</mat-icon>
		</mat-form-field>

		<div class="col-10 gray-container">
			<h6 class="category-title">{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}</h6>
			<mat-list-item><mat-radio-button value="null" checked (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ANY' | translate }}</mat-radio-button></mat-list-item>
			<mat-list-item><mat-radio-button value="0" (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ACTIVE' | translate }}</mat-radio-button></mat-list-item>
			<mat-list-item><mat-radio-button value="1" (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button></mat-list-item>
		</div>

		<div class="col-10 gray-container">
			<h6 class="category-title">{{ 'FACET-SEARCH.GRANT.TITLE' | translate }}</h6>
			<mat-form-field>
				<app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-GRANTS' | translate }}"
					[configuration]="grantAutoCompleteConfiguration"
					(optionSelected)="onGrantOptionSelected($event)" (optionRemoved)="onGrantOptionRemoved($event)">
				</app-multiple-auto-complete>
				<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
			</mat-form-field>
		</div>

		<div class="col-10 gray-container">
			<h6 class="category-title">{{ 'FACET-SEARCH.PROFILES.TITLE' | translate }}</h6>
			<mat-form-field>
				<app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-SPEC' | translate }}"
					[configuration]="profileAutoCompleteConfiguration"
					(optionSelected)="onProfileOptionSelected($event)" (optionRemoved)="onProfileOptionRemoved($event)">
				</app-multiple-auto-complete>
				<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
			</mat-form-field>
		</div>

		<div class="col-10 gray-container">
			<h6 class="category-title">{{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }}</h6>
			<mat-form-field>
				<app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-ORGANIZATIONS' | translate }}"
					[configuration]="organizationAutoCompleteConfiguration"
					(optionSelected)="onOrganizationOptionSelected($event)"
					(optionRemoved)="onOrganizationOptionRemoved($event)">
				</app-multiple-auto-complete>
				<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
			</mat-form-field>
		</div>
	</div>
</div>


<!-- <mat-accordion #facetAccordion="matAccordion" [multi]="true" class="facet-search-component">
	<mat-expansion-panel>
		<mat-expansion-panel-header>
			<mat-panel-title>
				{{ 'FACET-SEARCH.FILTER' | translate }}
			</mat-panel-title>
		</mat-expansion-panel-header>
		<div>
			<mat-form-field>
				<input matInput placeholder="{{'CRITERIA.GRANTS.LIKE'| translate}}" name="dmpCriteriaName" [(ngModel)]="facetCriteria.like"
				 (ngModelChange)="controlModified()">
			</mat-form-field>
		</div>
	</mat-expansion-panel>
	<mat-expansion-panel>
		<mat-expansion-panel-header>
			<mat-panel-title>
				{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}
			</mat-panel-title>
		</mat-expansion-panel-header>
		<app-explore-dmp-filter-item-component [multipleSelect]="false" [options]="this.grantStateOptions" (selectedChanged)="grantStatusChanged($event)"
		 [displayTitleFunc]="displayGrantStateLabel" [displayValueFunc]="displayGrantStateValue">
		</app-explore-dmp-filter-item-component>
	</mat-expansion-panel>
	<mat-expansion-panel *ngIf="this.facetCriteria.grantStatus == GrantStateType.OnGoing || this.facetCriteria.grantStatus == GrantStateType.Finished">
		<mat-expansion-panel-header>
			<mat-panel-title>
				{{ 'FACET-SEARCH.GRANT.TITLE' | translate }}
			</mat-panel-title>
		</mat-expansion-panel-header>
		<app-explore-dmp-filter-item-component [options]="this.grants" (selectedChanged)="grantChanged($event)" [filterOptions]="grantSearch.bind(this)"
		 [searchEnabled]="true" (optionRemoved)="removeGrant($event)" [displayTitleFunc]="displayGrantLabel" [displayValueFunc]="displayGrantValue">
		</app-explore-dmp-filter-item-component>
	</mat-expansion-panel>
	<mat-expansion-panel>
		<mat-expansion-panel-header>
			<mat-panel-title>
				{{ 'FACET-SEARCH.PROFILES.TITLE' | translate }}
			</mat-panel-title>
		</mat-expansion-panel-header>
		<app-explore-dmp-filter-item-component [options]="this.profiles" (selectedChanged)="profileChanged($event)" [filterOptions]="profileSearch.bind(this)"
		 (optionRemoved)="removeProfile($event)" [displayTitleFunc]="displayProfileLabel" [displayValueFunc]="displayProfileValue">
		</app-explore-dmp-filter-item-component>
	</mat-expansion-panel>
	<mat-expansion-panel>
		<mat-expansion-panel-header>
			<mat-panel-title>
				{{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }}
			</mat-panel-title>
		</mat-expansion-panel-header>
		<app-explore-dmp-filter-item-component [options]="this.dmpOrganisations" (selectedChanged)="dmpOrganisationChanged($event)"
		 [filterOptions]="dmpOrganisationSearch.bind(this)" (optionRemoved)="removeOrganisation($event)" [searchEnabled]="true"
		 [displayTitleFunc]="displayDmpOrganisationsLabel" [displayValueFunc]="displayDmpOrganisationsValue">
		</app-explore-dmp-filter-item-component>
	</mat-expansion-panel>
</mat-accordion> -->