@if (_channelList) {
    <mat-tab-group color="primary" backgroundColor="primary">
        <!-- All Channels Tab -->
        <mat-tab>
            <ng-template mat-tab-label>
                <mat-icon class="tab-icon">list</mat-icon>
                <div class="tab-title">
                    {{ 'CHANNELS.ALL_CHANNELS' | translate }}
                </div>
            </ng-template>
            <app-all-channels-tab
                [channels]="_channelList"
                [channelEpgMap]="channelEpgMap()"
                [progressTick]="progressTick()"
                [shouldShowEpg]="shouldShowEpg()"
                [itemSize]="itemSize()"
                [activeChannelUrl]="activeChannelUrl()"
                [favoriteIds]="favoriteIds()"
                (channelSelected)="onChannelSelected($event)"
                (favoriteToggled)="onFavoriteToggled($event)"
            />
        </mat-tab>

        <!-- Groups Tab -->
        <mat-tab>
            <ng-template mat-tab-label>
                <mat-icon class="tab-icon">category</mat-icon>
                <div class="tab-title">
                    {{ 'CHANNELS.GROUPS' | translate }}
                </div>
            </ng-template>
            <app-groups-tab
                [groupedChannels]="groupedChannels"
                [channelEpgMap]="channelEpgMap()"
                [progressTick]="progressTick()"
                [shouldShowEpg]="shouldShowEpg()"
                [activeChannelUrl]="activeChannelUrl()"
                [favoriteIds]="favoriteIds()"
                (channelSelected)="onChannelSelected($event)"
                (favoriteToggled)="onFavoriteToggled($event)"
            />
        </mat-tab>

        <!-- Favorites Tab -->
        @let showFavorites = (playlistId$ | async) !== 'GLOBAL_FAVORITES';
        @if (showFavorites) {
            <mat-tab>
                <ng-template mat-tab-label>
                    <mat-icon class="tab-icon">star</mat-icon>
                    <div class="tab-title">
                        {{ 'CHANNELS.FAVORITES' | translate }}
                    </div>
                </ng-template>
                @let favorites = favorites$ | async;
                @if (favorites) {
                    <app-favorites-tab
                        [favorites]="favorites"
                        [channelEpgMap]="channelEpgMap()"
                        [progressTick]="progressTick()"
                        [shouldShowEpg]="shouldShowEpg()"
                        [activeChannelUrl]="activeChannelUrl()"
                        (channelSelected)="onChannelSelected($event)"
                        (favoriteToggled)="onFavoriteToggled($event)"
                        (favoritesReordered)="onFavoritesReordered($event)"
                    />
                }
            </mat-tab>
        }
    </mat-tab-group>
} @else {
    <div class="loading-container">
        <mat-icon class="loading-spinner">sync</mat-icon>
        <div class="loading-text">{{ 'CHANNELS.LOADING' | translate }}</div>
    </div>
}