@if (filters$ | async; as filterList) {
  <mat-action-list class="adf-process-filters">
    @for (filter of filterList; track filter) {
      <button
        mat-list-item
        (click)="onFilterClick(filter)"
        [attr.aria-label]="filter.name | translate"
        [id]="filter.id"
        [attr.data-automation-id]="filter.key + '_filter'"
        [class.adf-active]="currentFilter === filter"
        >
        <div class="adf-process-filters__entry">
          <div>
            @if (showIcons) {
              <mat-icon data-automation-id="adf-filter-icon" [adf-icon]="filter.icon" aria-hidden="true" />
            }
            <span
              data-automation-id="adf-filter-label"
              class="adf-filter-action-button__label">
              {{ filter.name | translate }}
            </span>
          </div>
          @if (counters[filter.key]) {
            <span
              [attr.data-automation-id]="filter.key + '_filter-counter'"
              class="adf-process-filters__entry-counter"
              [class.adf-active]="isFilterUpdated(filter.key)"
              >
              {{ counters[filter.key] }}
            </span>
          }
        </div>
      </button>
    }
  </mat-action-list>
} @else {
  <ng-container>
    <div class="adf-app-list-spinner">
      <mat-spinner />
    </div>
  </ng-container>
}