<div class="results-filters" *ngIf="selectedFiltersCount > 0">
  <p class="mb-2 font-weight-bold">{{ 'Filters.ActiveFilters' | translate }}:</p>

  <!-- Remove all selected filters -->
  <button type="button" class="btn btn-sm btn-danger" (click)="clearFilters()" @toggle>
    {{ 'Filters.RemoveSelected' | translate }}
    ({{ selectedFiltersCount }})
    <span class="visually-hidden"> ({{ 'Search.AutoContentReload' | translate }}) </span>
  </button>

  <!-- Regions -->
  <app-selected-filters
    [regions]="selectedIds[AggregationFilterNames.REGIONS]"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.REGIONS, $event)"
    [isRegionsData]="true">
  </app-selected-filters>

  <!-- Categories -->
  <app-selected-filters
    [items]="selectedIds[AggregationFilterNames.CATEGORIES]"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.CATEGORIES, $event)">
  </app-selected-filters>

  <!-- Institutions -->
  <app-selected-filters
    [items]="selectedIds[AggregationFilterNames.INSTITUTION]"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.INSTITUTION, $event)">
  </app-selected-filters>

  <!-- Formats -->
  <app-selected-filters
    [items]="selectedIds[AggregationFilterNames.FORMAT]"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.FORMAT, $event)">
  </app-selected-filters>

  <!-- Openness score -->
  <app-selected-filters
    [items]="selectedIds[AggregationFilterNames.OPENNESS_SCORE]"
    [isStarsType]="true"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.OPENNESS_SCORE, $event)">
  </app-selected-filters>

  <!-- Visualization type -->
  <app-selected-filters
    [items]="selectedIds[AggregationFilterNames.VISUALIZATION_TYPE]"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.VISUALIZATION_TYPE, $event)">
  </app-selected-filters>

  <!-- Licenses -->
  <app-selected-filters
    [items]="selectedIds[AggregationFilterNames.LICENSES]"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.LICENSES, $event)">
  </app-selected-filters>

  <!-- Update frequency -->
  <app-selected-filters
    [items]="selectedIds[AggregationFilterNames.UPDATE_FREQUENCY]"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.UPDATE_FREQUENCY, $event)">
  </app-selected-filters>

  <!-- Resource type -->
  <app-selected-filters
    [items]="selectedIds[AggregationFilterNames.TYPES]"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.TYPES, $event)">
  </app-selected-filters>

  <!-- High value data -->
  <app-selected-filters
    [items]="selectedIds[AggregationFilterNames.HIGH_VALUE_DATA]"
    [isCustomFilterName]="true"
    [customFiltersName]="'Attribute.HighValueData'"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.HIGH_VALUE_DATA, $event)">
  </app-selected-filters>

  <!-- High value data from EC -->
  <app-selected-filters
    [items]="selectedIds[AggregationFilterNames.HIGH_VALUE_DATA_FROM_EC]"
    [isCustomFilterName]="true"
    [customFiltersName]="'Attribute.HighValueDataFromEC'"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.HIGH_VALUE_DATA_FROM_EC, $event)">
  </app-selected-filters>

  <!-- Dynamic data -->
  <app-selected-filters
    [items]="selectedIds[AggregationFilterNames.DYNAMIC_DATA]"
    [isCustomFilterName]="true"
    [customFiltersName]="'Attribute.DynamicData'"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.DYNAMIC_DATA, $event)">
  </app-selected-filters>

  <!-- Research data -->
  <app-selected-filters
    [items]="selectedIds[AggregationFilterNames.RESEARCH_DATA]"
    [isCustomFilterName]="true"
    [customFiltersName]="'Attribute.ResearchData'"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.RESEARCH_DATA, $event)">
  </app-selected-filters>

  <!-- Protected Data-->
  <app-selected-filters
    [items]="selectedIds[AggregationFilterNames.PROTECTED_DATA]"
    [isCustomFilterName]="true"
    [customFiltersName]="'Attribute.ProtectedData'"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.PROTECTED_DATA, $event)">
  </app-selected-filters>

  <!-- Date range -->
  <app-selected-filters
    [items]="{
      startDate: selectedIds[AggregationFilterNames.DATE_FROM],
      endDate: selectedIds[AggregationFilterNames.DATE_TO],
    }"
    [isDateType]="true"
    @toggle
    (removeSelectedFilter)="
      onClearFilter([AggregationFilterNames.DATE_FROM, AggregationFilterNames.DATE_TO], $event, true)
    ">
  </app-selected-filters>

  <!-- showcase category -->
  <app-selected-filters
    [attr.data-t]="AggregationFilterNames.SHOWCASE_CATEGORY"
    [items]="selectedIds[AggregationFilterNames.SHOWCASE_CATEGORY]"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.SHOWCASE_CATEGORY, $event)">
  </app-selected-filters>

  <!-- showcase type -->
  <app-selected-filters
    [items]="selectedIds[AggregationFilterNames.SHOWCASE_TYPE]"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.SHOWCASE_TYPE, $event)">
  </app-selected-filters>

  <!-- showcase platform -->
  <app-selected-filters
    [items]="selectedIds[AggregationFilterNames.SHOWCASE_PLATFORMS]"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.SHOWCASE_PLATFORMS, $event)">
  </app-selected-filters>

  <!-- Language -->
  <app-selected-filters
    [items]="selectedIds[AggregationFilterNames.LANGUAGE]"
    @toggle
    (removeSelectedFilter)="onClearFilter(AggregationFilterNames.LANGUAGE, $event)">
  </app-selected-filters>
</div>
