@let isEmbeddedPlayer = usesEmbeddedPlayer();

@if (stalkerStore.selectedCategoryId()) {
    <div
        class="sidebar"
        appResizable
        [minWidth]="250"
        [maxWidth]="600"
        [defaultWidth]="400"
        storageKey="sidebar-width"
    >
        <div class="sidebar-header category-content-header">
            <div class="category-meta">
                <h2 class="category-title">
                    {{ selectedCategoryTitle() }}
                </h2>
                @if (visibleChannels().length > 0) {
                    <span class="category-subtitle"
                        >{{ visibleChannels().length }}
                        {{
                            visibleChannels().length === 1 ? 'item' : 'items'
                        }}</span
                    >
                }
            </div>
        </div>

        <div #scrollContainer class="channels-list">
            @if (searchTerm() && visibleChannels().length === 0) {
                <div class="empty-search-state">
                    <app-portal-empty-state
                        icon="search_off"
                        [message]="'CHANNELS.NO_SEARCH_RESULTS' | translate"
                    />
                </div>
            } @else {
                @for (item of visibleChannels(); track item.id ?? $index) {
                    <app-channel-list-item
                        [name]="item.o_name || item.name || ''"
                        [logo]="item.logo"
                        [selected]="isSelectedChannel(item)"
                        [epgProgram]="
                            epgPreviewPrograms.get(
                                normalizeStalkerEntityId(item.id)
                            ) ?? null
                        "
                        [progressPercentage]="
                            currentProgramsProgress.get(
                                normalizeStalkerEntityId(item.id)
                            ) ?? 0
                        "
                        [showFavoriteButton]="true"
                        [showProgramInfoButton]="false"
                        [isFavorite]="
                            favorites.get(normalizeStalkerEntityId(item.id)) ??
                            false
                        "
                        (clicked)="playChannel(item)"
                        (favoriteToggled)="toggleFavorite(item)"
                    />
                }
            }

            @if (isLoadingMore()) {
                <div class="loading-indicator">
                    <mat-spinner diameter="24" />
                </div>
            }
        </div>
    </div>
}

<div class="content-container">
    @if (!stalkerStore.selectedCategoryId()) {
        <app-portal-empty-state
            icon="live_tv"
            [message]="'PORTALS.SELECT_CATEGORY' | translate"
        />
    } @else if (stalkerStore.selectedItem()) {
        @if (streamUrl && isEmbeddedPlayer) {
            <div class="video-player">
                <app-web-player-view [streamUrl]="streamUrl" />
            </div>
        }
        <div class="epg">
            <div class="epg-content">
                <app-epg-view [epgItems]="epgItems()" />
                @if (isLoadingEpg()) {
                    <div class="loading-indicator">
                        <mat-spinner diameter="24" />
                    </div>
                }
                @if (hasMoreEpg() && !isLoadingEpg()) {
                    <div class="load-more-epg">
                        <button mat-button (click)="loadMoreEpg()">
                            {{ 'CHANNELS.LOAD_MORE' | translate }}
                        </button>
                    </div>
                }
            </div>
        </div>
    } @else {
        <app-portal-empty-state
            icon="live_tv"
            [message]="'CHANNELS.SELECT_CHANNEL_PLAYBACK' | translate"
        />
    }
</div>