@let isEmbeddedPlayer = usesEmbeddedPlayer();
@let streamUrl = activeStreamUrl();

@if (showLiveChannelSidebar()) {
    <div
        class="sidebar"
        [class.sidebar-collapsed]="isSidebarCollapsed()"
        appResizable
        [minWidth]="250"
        [maxWidth]="600"
        [defaultWidth]="400"
        storageKey="sidebar-width"
    >
        <div class="sidebar-header">
            <div class="category-heading">
                <h2 class="category-title">
                    {{ selectedCategoryInfo()?.name ?? 'All Items' }}
                </h2>
                @if (selectedCategoryInfo()?.count) {
                    <span class="category-count">{{
                        selectedCategoryInfo()?.count
                    }}</span>
                }
            </div>
            <button
                mat-icon-button
                [matMenuTriggerFor]="channelSortMenu"
                [matTooltip]="'Sort: ' + liveChannelSortLabel()"
                aria-label="Sort channels"
            >
                <mat-icon>sort_by_alpha</mat-icon>
            </button>
            <button
                mat-icon-button
                type="button"
                [attr.aria-label]="'LAYOUT.HIDE_CHANNELS_LIST' | translate"
                [matTooltip]="'LAYOUT.TOGGLE_SIDEBAR_TOOLTIP' | translate"
                [attr.aria-pressed]="isSidebarCollapsed()"
                (click)="toggleSidebar()"
            >
                <mat-icon>chevron_left</mat-icon>
            </button>
            <mat-menu #channelSortMenu="matMenu">
                <button
                    mat-menu-item
                    (click)="setLiveChannelSortMode('server')"
                >
                    <span>Server Order</span>
                    @if (liveChannelSortMode() === 'server') {
                        <mat-icon>check</mat-icon>
                    }
                </button>
                <button
                    mat-menu-item
                    (click)="setLiveChannelSortMode('name-asc')"
                >
                    <span>Name A-Z</span>
                    @if (liveChannelSortMode() === 'name-asc') {
                        <mat-icon>check</mat-icon>
                    }
                </button>
                <button
                    mat-menu-item
                    (click)="setLiveChannelSortMode('name-desc')"
                >
                    <span>Name Z-A</span>
                    @if (liveChannelSortMode() === 'name-desc') {
                        <mat-icon>check</mat-icon>
                    }
                </button>
            </mat-menu>
        </div>
        <app-portal-channels-list
            [sortMode]="liveChannelSortMode()"
            [searchTermInput]="workspaceSearchTerm()"
            (playClicked)="playLive($event)"
            (playbackRequested)="playLive($event, true)"
        />
    </div>
}
<div class="content-container">
    @if (isSidebarCollapsed()) {
        <button
            mat-icon-button
            type="button"
            class="sidebar-restore"
            [attr.aria-label]="'LAYOUT.SHOW_CHANNELS_LIST' | translate"
            [matTooltip]="'LAYOUT.TOGGLE_SIDEBAR_TOOLTIP' | translate"
            [attr.aria-pressed]="isSidebarCollapsed()"
            (click)="toggleSidebar()"
        >
            <mat-icon>chevron_right</mat-icon>
        </button>
    }
    @if (streamUrl) {
        @if (isEmbeddedPlayer) {
            <div class="video-player">
                <app-web-player-view
                    [streamUrl]="streamUrl"
                    [title]="activePlayback()?.title ?? ''"
                    [playback]="activePlayback()"
                    (externalFallbackRequested)="
                        handleExternalFallbackRequest($event)
                    "
                />
            </div>
        }
        @if (supportsEpg) {
            <div
                class="epg"
                [class.epg-collapsed]="
                    isEmbeddedPlayer && isLiveEpgPanelCollapsed()
                "
            >
                @if (isEmbeddedPlayer) {
                    <app-live-epg-panel
                        [collapsed]="isLiveEpgPanelCollapsed()"
                        [summary]="liveEpgPanelSummary()"
                        [loading]="isLoadingEpg()"
                        [showDateNavigator]="true"
                        [selectedDate]="selectedLiveEpgDate()"
                        (collapsedChange)="
                            onLiveEpgPanelCollapsedChange($event)
                        "
                        (dateNavigation)="onLiveEpgDateNavigation($event)"
                    >
                        <ng-container
                            *ngTemplateOutlet="
                                epgPanelContent;
                                context: { unifiedDateNavigator: true }
                            "
                        />
                    </app-live-epg-panel>
                } @else {
                    <ng-container
                        *ngTemplateOutlet="
                            epgPanelContent;
                            context: { unifiedDateNavigator: false }
                        "
                    />
                }
            </div>
        }
    } @else if (!showLiveChannelSidebar()) {
        @if (isSelectedTypeContentLoading()) {
            <div class="live-loading-content">
                <app-portal-channels-list
                    [sortMode]="liveChannelSortMode()"
                    [searchTermInput]="workspaceSearchTerm()"
                    (playClicked)="playLive($event)"
                    (playbackRequested)="playLive($event, true)"
                />
            </div>
        } @else {
            <app-portal-empty-state
                icon="live_tv"
                [message]="'PORTALS.SELECT_CATEGORY' | translate"
            />
        }
    } @else {
        <app-portal-empty-state
            icon="live_tv"
            [message]="'CHANNELS.SELECT_CHANNEL_PLAYBACK' | translate"
        />
    }
</div>

<ng-template #epgPanelContent let-unifiedDateNavigator="unifiedDateNavigator">
    <div class="epg-content">
        @if (isLoadingEpg()) {
            <div class="loading-indicator">
                <mat-spinner diameter="24" />
            </div>
        } @else if (isElectron && controlledEpgPrograms().length > 0) {
            @if (showArchiveUnavailableNotice()) {
                <div class="archive-unavailable-banner" role="status">
                    <div class="archive-unavailable-banner__title">
                        {{
                            'EPG.ARCHIVE_PLAYBACK_UNAVAILABLE_TITLE' | translate
                        }}
                    </div>
                    <div class="archive-unavailable-banner__description">
                        {{
                            'EPG.ARCHIVE_PLAYBACK_UNAVAILABLE_DESCRIPTION'
                                | translate
                        }}
                    </div>
                </div>
            }
            <app-epg-list
                [controlledPrograms]="controlledEpgPrograms()"
                [controlledArchiveDays]="controlledArchiveDays()"
                [archivePlaybackAvailable]="archivePlaybackAvailable()"
                [selectedDate]="
                    unifiedDateNavigator ? selectedLiveEpgDate() : null
                "
                [showDateNavigator]="!unifiedDateNavigator"
                (programActivated)="onProgramActivated($event)"
                (selectedDateChange)="
                    unifiedDateNavigator && onLiveEpgSelectedDateChange($event)
                "
            />
        } @else if (!isElectron && epgItems().length > 0) {
            <app-epg-view [epgItems]="epgItems()" />
        } @else {
            <app-portal-empty-state
                icon="event_busy"
                [message]="'EPG.EPG_NOT_AVAILABLE_CHANNEL_TITLE' | translate"
            />
        }
    </div>
</ng-template>