<div class="dmp-criteria">
	<div class="filters">
		<div class="row justify-content-center">
			<div class="col-10">
				<h6 class="criteria-title">{{'CRITERIA.FILTERS'| translate}}</h6>
			</div>
		</div>
		<!-- <h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6> -->
		<div class="row" style="justify-content: center;">
			<!-- Search Filter-->
			<!-- <mat-form-field class="col-11 search">
				<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="likeCriteria"
					[formControl]="formGroup.get('like')">
				<mat-error *ngIf="formGroup.get('like').hasError('backendError')">
					{{formGroup.get('like').getError('backendError').message}}</mat-error>
				<mat-icon matSuffix class="style-icon">search</mat-icon>
			</mat-form-field> -->
			<!-- End of Search Filter -->

			<!-- Visibility Filter-->
			<div *ngIf="!isPublic" class="col-10">
				<h6 class="category-title">{{ 'TYPES.DMP-VISIBILITY.VISIBILITY' | translate }}</h6>
				<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')">
					<mat-list-item><mat-radio-button value="null" [checked]="!formGroup.get('status').value">{{ 'TYPES.DMP-VISIBILITY.ANY' | translate }}</mat-radio-button></mat-list-item>
					<mat-list-item><mat-radio-button value="2">{{ 'TYPES.DMP-VISIBILITY.PUBLIC' | translate }}</mat-radio-button></mat-list-item>
					<mat-list-item><mat-radio-button value="1">{{ 'TYPES.DMP-VISIBILITY.FINALIZED' | translate }}</mat-radio-button></mat-list-item>
					<mat-list-item><mat-radio-button value="0">{{ 'TYPES.DMP-VISIBILITY.DRAFT' | translate }}</mat-radio-button></mat-list-item>
				</mat-radio-group>
				<hr>
			</div>
			<!-- End of Visibility Filter-->

			<!-- Grant Status -->
			<div class="col-10" *ngIf="isPublic">
				<h6 class="category-title">{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}</h6>
				<mat-radio-group [formControl]="formGroup.get('grantStatus')">
					<mat-list-item>
						<mat-radio-button value="null" [checked]="!formGroup.get('grantStatus').value">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ANY' | translate }}</mat-radio-button>
					</mat-list-item>
					<mat-list-item>
						<mat-radio-button value="0">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ACTIVE' | translate }}</mat-radio-button>
					</mat-list-item>
					<mat-list-item>
						<mat-radio-button value="1">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button>
					</mat-list-item>
				</mat-radio-group>
				<hr>
			</div>
			<!-- End of Grant Status -->

			<!-- Related Dataset Templates Filter -->
			<div *ngIf="showGrant" class="col-10">
				<h6 class="category-title">{{ 'CRITERIA.DMP.RELATED-DATASET-TEMPLATES' | translate}}</h6>
				<mat-form-field>
					<mat-label>{{ 'CRITERIA.DMP.SELECT-DATASET-TEMPLATES' | translate }}</mat-label>
					<app-multiple-auto-complete [formControl]="formGroup.get('datasetTemplates')"
						[configuration]="datasetTemplateAutoCompleteConfiguration">
					</app-multiple-auto-complete>
				</mat-form-field>
				<hr>
			</div>
			<!-- End of Related Dataset Templates Filter -->

			<!-- Related Grant Filters -->
			<div *ngIf="showGrant" class="col-10">
				<h6 class="category-title">{{ 'DMP-RELATED-GRANT.RELATED-GRANT' | translate}}</h6>
				<mat-form-field>
					<mat-label>{{ 'CRITERIA.DMP.SELECT-GRANTS' | translate }}</mat-label>
					<app-multiple-auto-complete [formControl]="formGroup.get('grants')"
						[configuration]="grantAutoCompleteConfiguration">
					</app-multiple-auto-complete>
				</mat-form-field>
				<hr>
			</div>
			<!-- End of Related Grants Filters -->

			<!-- Collaborators Filter -->
			<div *ngIf="isAuthenticated()" class="col-10">
				<h6 class="category-title">{{ 'CRITERIA.DMP.RELATED-COLLABORATORS' | translate}}</h6>
				<mat-form-field>
					<mat-label>{{'CRITERIA.DMP.SELECT-COLLABORATORS' | translate}}</mat-label>
					<app-multiple-auto-complete [formControl]="formGroup.get('collaborators')"
						[configuration]="collaboratorsAutoCompleteConfiguration">
					</app-multiple-auto-complete>
				</mat-form-field>
				<hr>
			</div>
			<!-- End of Collaborators Filter -->

			<!-- Role Filter -->
			<div *ngIf="isAuthenticated()" class="col-10">
				<h6 class="category-title">{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</h6>
				<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('role')">
					<mat-list-item><mat-radio-button value="null" [checked]="!formGroup.get('role').value">{{ 'TYPES.DATASET-ROLE.ANY' | translate }}</mat-radio-button></mat-list-item>
					<mat-list-item><mat-radio-button value="0">{{ 'TYPES.DATASET-ROLE.OWNER' | translate }}</mat-radio-button></mat-list-item>
					<mat-list-item><mat-radio-button value="1">{{ 'TYPES.DATASET-ROLE.MEMBER' | translate }}</mat-radio-button></mat-list-item>
				</mat-radio-group>
				<hr>
			</div>
			<!-- End of Role Filter -->

			<!-- Related Organization Filter -->
			<div *ngIf="showGrant" class="col-10">
				<h6 class="category-title">{{ 'DMP-RELATED-ORGANIZATION.RELATED-ORGANIZATION' | translate }}</h6>
				<mat-form-field>
					<mat-label>{{'DMP-RELATED-ORGANIZATION.SELECT-ORGANIZATIONS' | translate}}</mat-label>
					<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
						[configuration]="organisationAutoCompleteConfiguration">
					</app-multiple-auto-complete>
				</mat-form-field>
			</div>
			<!-- End of Related Organization Filter -->

		</div>
	</div>
</div>
