@if (displayedChannels().length) {
    @if (viewTitle() && activeView() !== 'groups') {
        <header class="context-header">
            <div class="context-header__top">
                <h2>{{ viewTitle() | translate }}</h2>
                @if (
                    activeView() === 'recent' &&
                    recentChannelItems().length > 0
                ) {
                    <button mat-button (click)="clearRecentChannels()">
                        {{ 'WORKSPACE.SHELL.CLEAR_RECENTLY_VIEWED_SECTION' | translate }}
                    </button>
                }
            </div>
        </header>
        <div class="context-divider"></div>
    }

    @switch (activeView()) {
        @case ('all') {
            <app-all-channels-view
                [channels]="displayedChannels()"
                [searchTerm]="workspaceSearchTerm()"
                [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()"
                [searchTerm]="workspaceSearchTerm()"
                [channelEpgMap]="channelEpgMap()"
                [progressTick]="progressTick()"
                [shouldShowEpg]="shouldShowEpg()"
                [activeChannelUrl]="activeChannelUrl()"
                [favoriteIds]="favoriteIds()"
                [sidebarWidth]="sidebarWidth()"
                (channelSelected)="onChannelSelected($event)"
                (favoriteToggled)="onFavoriteToggled($event)"
                (sidebarWidthRequested)="onSidebarWidthRequested($event)"
                (sidebarWidthRequestEnded)="onSidebarWidthRequestEnded($event)"
            />
        }
        @case ('favorites') {
            @let favorites = favorites$ | async;
            @if (favorites) {
                <app-favorites-view
                    [favorites]="favorites"
                    [searchTerm]="workspaceSearchTerm()"
                    [channelEpgMap]="channelEpgMap()"
                    [progressTick]="progressTick()"
                    [shouldShowEpg]="shouldShowEpg()"
                    [activeChannelUrl]="activeChannelUrl()"
                    (channelSelected)="onChannelSelected($event)"
                    (favoriteToggled)="onFavoriteToggled($event)"
                    (favoritesReordered)="onFavoritesReordered($event)"
                />
            }
        }
        @case ('recent') {
            <app-recent-view
                [recentItems]="recentChannelItems()"
                [searchTerm]="workspaceSearchTerm()"
                [channelEpgMap]="channelEpgMap()"
                [progressTick]="progressTick()"
                [shouldShowEpg]="shouldShowEpg()"
                [activeChannelUrl]="activeChannelUrl()"
                (channelSelected)="onChannelSelected($event)"
                (removeRecent)="removeRecentChannel($event)"
            />
        }
    }
} @else {
    <div class="loading-container">
        <mat-icon class="loading-spinner">sync</mat-icon>
        <div class="loading-text">{{ 'CHANNELS.LOADING' | translate }}</div>
    </div>
}