@if (filters) {
  <fieldset id="filters" class="advanced-filters--container">
    <legend [textContent]="text.selected_filter_list"></legend>
    @if (showCloseFilter) {
      <primer-icon-button
        icon="x"
        scheme="invisible"
        class="advanced-filters--close"
        tooltip-direction="se"
        [label]="text.close_form"
        (clicked)="closeFilter()"
      />
    }
    <ul class="advanced-filters--filters">
      <li id="filter_search" class="advanced-filters--filter --without-operator">
        <label
          for="filter-by-text-input"
          class="advanced-filters--filter-name"
          [textContent]="text.filter_by_text"
          [attr.title]="text.filter_by_text"
        >
        </label>
        <div class="advanced-filters--filter-value">
          <wp-filter-by-text-input (deactivateFilter)="deactivateFilter($event)" />
        </div>
      </li>
      <li class="advanced-filters--spacer"></li>
      @for (filter of filters; track filter.name; let index = $index) {
        @if (isFilterAvailable(filter)) {
          <li
            id="filter_{{ filter.id }}"
            query-filter
            [shouldFocus]="index === focusElementIndex"
            [filter]="filter"
            (deactivateFilter)="deactivateFilter($event)"
            (filterChanged)="filtersChanged.emit(filters)"
            class="advanced-filters--filter"
          ></li>
        }
      }
      @if (isSecondSpacerVisible) {
        <li class="advanced-filters--spacer"></li>
      }
      <li class="advanced-filters--add-filter">
        <!-- Add filters -->
        <label for="add_filter_select" aria-hidden="true" class="advanced-filters--add-filter-label">
          <op-icon icon-classes="icon-add icon4" />
          {{ text.label_filter_add }}:
        </label>
        <label for="add_filter_select" class="sr-only">
          {{ text.label_filter_add }}
          {{ text.open_filter }}
          {{ text.close_filter }}
        </label>
        <div class="advanced-filters--add-filter-value">
          <ng-select
            #ngSelectComponent
            [items]="remainingFilters"
            [clearSearchOnAdd]="true"
            [multiple]="false"
            [clearable]="true"
            [clearOnBackspace]="true"
            [closeOnSelect]="true"
            [virtualScroll]="true"
            [placeholder]="text.please_select"
            [searchFn]="searchFunction"
            (open)="onOpen()"
            (change)="onFilterAdded($event)"
            id="add_filter_select"
            class="add_filter_select"
            bindLabel="name"
            appendTo="body"
          />
        </div>
      </li>
    </ul>
    @if (baselineIncompatibleFilters.length > 0) {
      <div class="op-toast -warning">
        <div class="op-toast--content">
          <p [textContent]="text.baseline_warning"></p>
        </div>
      </div>
    }
  </fieldset>
}