@if (displayedChannels().length) {
    @if (viewTitle()) {
        <header class="context-header">
            <div class="context-header__top">
                <h2>{{ viewTitle() | translate }}</h2>
            </div>
        </header>
        <div class="context-divider"></div>
    }

    @switch (activeView()) {
        @case ('all') {
            <app-all-channels-view
                [channels]="displayedChannels()"
                [channelEpgMap]="channelEpgMap()"
                [progressTick]="progressTick()"
                [shouldShowEpg]="shouldShowEpg()"
                [itemSize]="itemSize()"
                [activeChannelUrl]="activeChannelUrl()"
                [favoriteIds]="favoriteIds()"
                (channelSelected)="onChannelSelected($event)"
                (favoriteToggled)="onFavoriteToggled($event)"
            />
        }
        @case ('groups') {
            <app-groups-view
                [groupedChannels]="groupedChannels()"
                [channelEpgMap]="channelEpgMap()"
                [progressTick]="progressTick()"
                [shouldShowEpg]="shouldShowEpg()"
                [activeChannelUrl]="activeChannelUrl()"
                [favoriteIds]="favoriteIds()"
                (channelSelected)="onChannelSelected($event)"
                (favoriteToggled)="onFavoriteToggled($event)"
            />
        }
        @case ('favorites') {
            @let favorites = favorites$ | async;
            @if (favorites) {
                <app-favorites-view
                    [favorites]="favorites"
                    [channelEpgMap]="channelEpgMap()"
                    [progressTick]="progressTick()"
                    [shouldShowEpg]="shouldShowEpg()"
                    [activeChannelUrl]="activeChannelUrl()"
                    (channelSelected)="onChannelSelected($event)"
                    (favoriteToggled)="onFavoriteToggled($event)"
                    (favoritesReordered)="onFavoritesReordered($event)"
                />
            }
        }
    }
} @else {
    <div class="loading-container">
        <mat-icon class="loading-spinner">sync</mat-icon>
        <div class="loading-text">{{ 'CHANNELS.LOADING' | translate }}</div>
    </div>
}