<fieldset>
  <!-- header -->
  <legend class="m-0">
    <h3
      class="h6 d-flex align-items-center m-0"
      appInfoTooltip="{{ 'Tour.Tooltip.Filters.' + titleTranslationKey + '.text' | translate }}"
      tooltipTitle="{{ 'Tour.Tooltip.Filters.' + titleTranslationKey + '.title' | translate }}"
    >
      <span class="font-weight-bold" id="{{ ariaLabel }}">
        {{ titleTranslationKey | translate }}
      </span>

      <!-- on mobile - expand/collapse body -->
      <button
        type="button"
        class="btn btn-link d-inline-block d-lg-none ml-auto"
        *ngIf="titleTranslationKey"
        [attr.aria-pressed]="isCollapsed"
        (click)="isCollapsed = !isCollapsed"
      >
        {{ (isCollapsed ? 'Action.Collapse' : 'Action.Expand') | translate }}
      </button>
    </h3>
  </legend>

  <!-- body -->
  <div
    *ngIf="isGeodataSearch; else WithCheckboxList"
    class="aggregation-filters__item-body-custom"
    [ngClass]="{ 'visibility-animated': isCollapsed }"
  >
    <div class="dropdown">
      <!-- search with suggestion -->
      <app-regions-search
        (selectedChange)="selectItem($event)"
        (enableApply)="enableApply = $event"
        [initialValue]="initialValue"
      ></app-regions-search>

      <!-- additional actions - apply -->
      <app-list-view-filters-action-buttons
        [displayShowMore]="displayShowMore"
        [srTranslationKey]="titleTranslationKey"
        [enableApply]="enableApply"
        [selectedCount]="selectedCount"
        (triggerApplyChange)="triggerApply()"
      >
      </app-list-view-filters-action-buttons>
    </div>
  </div>

  <ng-template #WithCheckboxList>
    <div class="aggregation-filters__item-body" [ngClass]="{ 'visibility-animated': isCollapsed }">
      <div class="dropdown">
        <!-- search within a list -->
        <app-expandable-multiselect-input
          *ngIf="showSearchInput"
          [attr.aria-hidden]="!showSearchInput"
          [placeholderTranslationKey]="placeholderTranslationKey"
          [maxLength]="maxLength"
          (inputChanged)="searchChanged($event)"
        >
        </app-expandable-multiselect-input>

        <!-- list of items (filters) -->
        <app-expandable-multiselect-list
          @toggleVertically
          [options]="filteredOptions"
          [isExpanded]="isExpanded"
          [showSearchInput]="showSearchInput"
          [selectedIds]="selectedData"
          (selectedChange)="selectItem($event)"
          [filterName]="filterName"
        >
        </app-expandable-multiselect-list>

        <!-- additional actions - show/hide, apply -->
        <app-list-view-filters-action-buttons
          [displayShowMore]="displayShowMore && filteredOptions && filteredOptions.length > 3"
          [srTranslationKey]="titleTranslationKey"
          [isExpanded]="isExpanded"
          [enableApply]="enableApply"
          [selectedCount]="selectedCount"
          (expandOptions)="isExpanded = !isExpanded"
          (triggerApplyChange)="triggerApply()"
        >
        </app-list-view-filters-action-buttons>
      </div>
    </div>
  </ng-template>

  <!-- divider -->
  <span *ngIf="showDivider" class="aggregation-filters__divider" aria-hidden="true"></span>
</fieldset>
