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

@if (showLiveChannelSidebar()) {
    <div
        class="sidebar"
        [class.sidebar-collapsed]="isSidebarCollapsed()"
        [attr.inert]="isSidebarCollapsed() ? '' : null"
        appResizable
        [minWidth]="250"
        [maxWidth]="600"
        [defaultWidth]="400"
        storageKey="live-channels-sidebar-width"
    >
        <div class="sidebar-header">
            @if (livePanels.canOpenCategoriesPopover()) {
                <!-- The categories rail is folded: the title becomes the way
                     back to it (a dropdown of the same list) so switching
                     categories stays one click away. -->
                <button
                    #showCategoriesButton
                    mat-icon-button
                    type="button"
                    class="sidebar-show-categories"
                    data-test-id="live-show-categories"
                    [attr.aria-label]="'LAYOUT.SHOW_CATEGORIES' | translate"
                    [matTooltip]="'LAYOUT.SHOW_CATEGORIES' | translate"
                    (click)="livePanels.showCategories()"
                >
                    <mat-icon>chevron_right</mat-icon>
                </button>
                <button
                    #categoryDropdown
                    type="button"
                    class="category-dropdown"
                    data-test-id="live-category-dropdown"
                    aria-haspopup="dialog"
                    aria-expanded="false"
                    [attr.aria-label]="'LAYOUT.CHOOSE_CATEGORY' | translate"
                    (click)="livePanels.openCategoriesPopover(categoryDropdown)"
                >
                    <span class="category-title">
                        {{ selectedCategoryInfo()?.name ?? 'All Items' }}
                    </span>
                    @if (selectedCategoryInfo()?.count) {
                        <span class="category-count">{{
                            selectedCategoryInfo()?.count
                        }}</span>
                    }
                    <mat-icon class="category-dropdown__caret"
                        >expand_more</mat-icon
                    >
                </button>
            } @else {
                <div class="category-heading">
                    <h2 class="category-title">
                        {{ selectedCategoryInfo()?.name ?? 'All Items' }}
                    </h2>
                    @if (selectedCategoryInfo()?.count) {
                        <span class="category-count">{{
                            selectedCategoryInfo()?.count
                        }}</span>
                    }
                </div>
            }
            @if (channelNavigation.canReveal()) {
                <button
                    mat-icon-button
                    type="button"
                    [attr.aria-label]="
                        'CHANNELS.SHOW_PLAYING_CHANNEL' | translate
                    "
                    [matTooltip]="'CHANNELS.SHOW_PLAYING_CHANNEL' | translate"
                    (click)="channelNavigation.reveal()"
                >
                    <mat-icon>list_alt</mat-icon>
                </button>
            }
            <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_PANELS' | translate"
                [matTooltip]="'LAYOUT.HIDE_PANELS_TOOLTIP' | translate"
                (click)="livePanels.collapsePanels()"
            >
                <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
            [revealRequest]="channelNavigation.revealRequest()"
            [sortMode]="liveChannelSortMode()"
            [searchTermInput]="workspaceSearchTerm()"
            (playClicked)="playLive($event)"
            (playbackRequested)="playLive($event, true)"
        />
    </div>
}
<div class="content-container">
    @if (isSidebarCollapsed()) {
        <button
            #restoreButton
            mat-icon-button
            type="button"
            class="sidebar-restore"
            [attr.aria-label]="'LAYOUT.SHOW_PANELS' | translate"
            [matTooltip]="'LAYOUT.SHOW_PANELS_TOOLTIP' | translate"
            (click)="livePanels.toggleSidebar()"
        >
            <mat-icon>chevron_right</mat-icon>
        </button>
    }
    @if (streamUrl) {
        @if (isEmbeddedPlayer) {
            <div class="video-player">
                <app-web-player-view
                    [playbackSessionKey]="playbackSessionKey()"
                    [streamUrl]="streamUrl"
                    [title]="activePlayback()?.title ?? ''"
                    [playback]="activePlayback()"
                    [timelineSegments]="catchupTimelineSegments()"
                    [recordingMetadata]="recordingMetadata()"
                    (externalFallbackRequested)="
                        handleExternalFallbackRequest($event)
                    "
                    (recordingStopped)="onRecordingStopped($event)"
                />
            </div>
        }
        @if (supportsEpg) {
            <div
                class="epg"
                [class.epg--inline]="isEmbeddedPlayer"
                [class.epg--list]="epgViewMode() === 'list'"
                [class.epg-collapsed]="
                    isEmbeddedPlayer && isLiveEpgPanelCollapsed()
                "
            >
                <ng-container *ngTemplateOutlet="epgPanelContent" />
            </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 {
            <div class="live-all-items-content category-content-layout">
                <div class="category-content-header">
                    <div class="category-meta">
                        <h2 class="category-title">All Items</h2>
                        <div class="category-subtitle">
                            {{ liveRootSubtitle() }}
                        </div>
                    </div>
                </div>
                <app-grid-list
                    class="live-all-items-grid app-scrollbar"
                    appInfiniteScroll
                    [infiniteHasMore]="liveRootHasMore()"
                    [infiniteItemCount]="liveRootItems().length"
                    [infiniteResetKey]="'live-root'"
                    (infiniteLoadMore)="onLiveRootLoadMore()"
                    [isLoading]="isSelectedTypeContentLoading()"
                    [items]="liveRootItems()"
                    [searchTerm]="workspaceSearchTerm()"
                    [variant]="'logo'"
                    [type]="'live'"
                    (itemClicked)="onLiveRootItemClick($event)"
                />
            </div>
        }
    } @else if (isSidebarCollapsed()) {
        <app-channel-list-hidden-state (restore)="livePanels.toggleSidebar()" />
    } @else {
        <app-portal-empty-state
            icon="live_tv"
            [message]="'CHANNELS.SELECT_CHANNEL_PLAYBACK' | translate"
        />
    }
</div>

<ng-template #epgPanelContent>
    <div class="epg-content">
        @if (epgViewMode() === 'list') {
            <app-epg-list-view
                [programs]="controlledEpgPrograms()"
                [offsetMinutes]="epgOffsetMinutes()"
                [channelName]="activePlayback()?.title ?? ''"
                [channelLogo]="activePlayback()?.thumbnail ?? ''"
                [sourceLabel]="'Xtream'"
                [archiveContextKey]="archiveContextKey()"
                [archiveDownloadAvailable]="archiveDownloadsAvailable()"
                [archivePlaybackAvailable]="archivePlaybackAvailable()"
                [archiveDays]="controlledArchiveDays()"
                [activeProgram]="activeCatchupProgram()"
                [isLivePlayback]="!showReturnToLive()"
                [loading]="isLoadingEpg()"
                [selectedDate]="selectedLiveEpgDate()"
                [collapsed]="usesEmbeddedPlayer() && isLiveEpgPanelCollapsed()"
                [summary]="liveEpgPanelSummary()"
                [summaryLabelKey]="liveEpgPanelSummaryLabelKey()"
                (programActivated)="onProgramActivated($event)"
                (returnToLive)="returnToLivePlayback()"
                (selectedDateChange)="onLiveEpgSelectedDateChange($event)"
                (collapsedChange)="onLiveEpgPanelCollapsedChange($event)"
            />
        } @else {
            <app-epg-timeline
                [programs]="controlledEpgPrograms()"
                [offsetMinutes]="epgOffsetMinutes()"
                [channelName]="activePlayback()?.title ?? ''"
                [channelLogo]="activePlayback()?.thumbnail ?? ''"
                [sourceLabel]="'Xtream'"
                [archiveContextKey]="archiveContextKey()"
                [archiveDownloadAvailable]="archiveDownloadsAvailable()"
                [archivePlaybackAvailable]="archivePlaybackAvailable()"
                [archiveDays]="controlledArchiveDays()"
                [activeProgram]="activeCatchupProgram()"
                [isLivePlayback]="!showReturnToLive()"
                [loading]="isLoadingEpg()"
                [selectedDate]="selectedLiveEpgDate()"
                [collapsed]="usesEmbeddedPlayer() && isLiveEpgPanelCollapsed()"
                [summary]="liveEpgPanelSummary()"
                [summaryLabelKey]="liveEpgPanelSummaryLabelKey()"
                (programActivated)="onProgramActivated($event)"
                (returnToLive)="returnToLivePlayback()"
                (selectedDateChange)="onLiveEpgSelectedDateChange($event)"
                (collapsedChange)="onLiveEpgPanelCollapsedChange($event)"
            />
        }
    </div>
</ng-template>

<!-- Stamped into the player's fullscreen channel panel (FULLSCREEN_CHANNEL_PANEL). -->
<ng-template #fullscreenChannelPanel let-searchTerm="searchTerm">
    <app-portal-channels-list
        #fullscreenList
        [sortMode]="liveChannelSortMode()"
        [channelsOverride]="fullscreenPanelChannels()"
        [searchTermInput]="searchTerm()"
        [fullscreenPanelCopy]="true"
        (playClicked)="
            playLive($event, undefined, fullscreenList.filteredChannels())
        "
        (playbackRequested)="
            playLive($event, true, fullscreenList.filteredChannels())
        "
    />
</ng-template>