@if (filters$ | async; as filterList) {
    <mat-nav-list>
        @for (filter of filterList; track filter.id) {
            <a mat-list-item
                [activated]="filter.id === currentRouteFilterId()"
                [routerLink]="[PROCESSES_ROUTE]"
                [queryParams]="{ filterId: filter.id }"
                [attr.data-automation-id]="filter.key + '_filter'"
                class="adf-process-filters__entry"
                [class.adf-active]="filter.id === currentRouteFilterId()"
                [attr.aria-current]="filter.id === currentRouteFilterId() ? 'page' : null"
                [id]="filter.id"
                [title]="filter.name ?? '' | translate"
                [attr.aria-label]="filter.name ?? '' | translate"
                (click)="onFilterClick(filter)">
                <span matListItemTitle>
                    {{ filter.name ?? '' | translate }}
                </span>
                @if (showIcons) {
                    <mat-icon matListItemIcon
                        data-automation-id="adf-filter-icon"
                        [adf-icon]="filter.icon ?? ''"
                        aria-hidden="true" />
                }
                @if (counters[filter.key ?? '']) {
                    <span matListItemMeta
                        [attr.data-automation-id]="filter.key + '_filter-counter'"
                        class="adf-process-filters__entry-counter"
                        [class.adf-active]="isFilterUpdated(filter.key ?? '')"
                    >
                        {{ counters[filter.key ?? ''] }}
                    </span>
                }
            </a>
        }
    </mat-nav-list>
} @else {
    <div class="adf-app-list-spinner">
        <mat-spinner [attr.aria-label]="'ADF_CLOUD_PROCESS_LIST.LOADING' | translate" aria-live="polite" />
    </div>
}