@if (items().length > 0) {
    <div class="nav-list">
        @for (item of items(); track $index) {
            <a
                class="nav-item category-item"
                [attr.data-category-id]="$any(item).category_id ?? item.id"
                [class.selected]="isSelected(item)"
                [class.category-item--selected]="isSelected(item)"
                [attr.aria-current]="isSelected(item) ? 'true' : null"
                (click)="categoryClicked.emit(item)"
            >
                <span class="nav-item-label">
                    {{
                        item.category_name ||
                            $any(item).name ||
                            'No category name'
                    }}
                </span>
                @if (showCounts()) {
                    <div class="item-count app-count-badge">
                        {{ getItemCount(item) }}
                    </div>
                } @else if ($any(item).count !== undefined) {
                    <div class="item-count app-count-badge">
                        {{ $any(item).count }}
                    </div>
                }
            </a>
        } @empty {
            <app-playlist-error-view
                [title]="'PORTALS.EMPTY_LIST_VIEW.TITLE' | translate"
                [description]="
                    'PORTALS.EMPTY_LIST_VIEW.NO_SEARCH_RESULTS' | translate
                "
                [showActionButtons]="false"
                [viewType]="'NO_SEARCH_RESULTS'"
            />
        }
    </div>
} @else {
    <div class="category-empty-state">
        <app-playlist-error-view
            [title]="'No categories available'"
            [showIllustration]="false"
            [showActionButtons]="false"
            [viewType]="'EMPTY_CATEGORY'"
        />
    </div>
}