<div class="channels-list">
    @if (isSelectedTypeContentLoading()) {
        <div class="channels-loading-state" aria-live="polite">
            <div class="channels-loading-state__copy">
                <div class="channels-loading-state__title">
                    {{ 'CHANNELS.LOADING' | translate }}
                </div>
            </div>

            <div class="channels-loading-state__list">
                <app-channel-list-skeleton
                    [count]="9"
                    [showEpg]="supportsEpg"
                    [actionCount]="1"
                />
            </div>
        </div>
    } @else if (filteredChannels().length > 0) {
        <cdk-virtual-scroll-viewport
            [itemSize]="68"
            class="scroll-viewport-portals"
        >
            <app-channel-list-item
                *cdkVirtualFor="
                    let item of filteredChannels();
                    trackBy: trackBy;
                    templateCacheSize: 0
                "
                [name]="item.title || item.name || ''"
                [logo]="item.stream_icon ?? item.poster_url"
                [selected]="
                    xtreamStore.selectedItem()?.xtream_id === item.xtream_id
                "
                [epgProgram]="
                    supportsEpg
                        ? (epgPrograms.get(item.xtream_id) ?? null)
                        : null
                "
                [progressPercentage]="
                    supportsEpg
                        ? (currentProgramsProgress.get(item.xtream_id) ?? 0)
                        : 0
                "
                [showFavoriteButton]="true"
                [showProgramInfoButton]="false"
                [isFavorite]="favorites.get(favoriteKeyFor(item)) ?? false"
                (clicked)="playClicked.emit(item)"
                (activated)="playbackRequested.emit(item)"
                (favoriteToggled)="toggleFavorite($event, item)"
            />
        </cdk-virtual-scroll-viewport>
    } @else {
        <div class="empty-search-state">
            <mat-icon class="empty-state-icon">search_off</mat-icon>
            <h3 class="empty-state-title">
                {{ 'CHANNELS.NO_CHANNELS_FOUND' | translate }}
            </h3>
            @if (searchTermInput()) {
                <p class="empty-state-hint">
                    {{ 'CHANNELS.TRY_DIFFERENT_SEARCH' | translate }}
                </p>
            }
        </div>
    }
</div>
