@let items = filteredItems();
@let timeshiftLimit = timeshiftUntil();

@if (showDateNavigator()) {
    <!-- channel info panel -->
    <div id="channel-header" color="primary">
        <div id="date-navigator">
            <button
                class="previous-day"
                mat-icon-button
                (click)="changeDate('prev')"
                [matTooltip]="'EPG.PREVIOUS_DAY' | translate"
            >
                <mat-icon>chevron_left</mat-icon>
            </button>
            <span class="selected-date">
                {{
                    selectedDateKey()
                        | date: 'MMMM d, EEEE' : undefined : currentLocale()
                }}</span
            >
            <button
                class="next-day"
                mat-icon-button
                (click)="changeDate('next')"
                [matTooltip]="'EPG.NEXT_DAY' | translate"
            >
                <mat-icon>chevron_right</mat-icon>
            </button>
        </div>
    </div>
}

@if (timeshiftLimit) {
    <!-- program list -->
    <div id="program-list" class="app-scrollbar" #programList>
        @if (items.length > 0) {
            @for (program of items; track program.start) {
                @if (!canActivateProgram(program)) {
                    <div
                        class="program-item"
                        [class.current-program]="isProgramPlaying(program)"
                    >
                        <div class="program-meta">
                            <app-epg-list-item
                                [item]="program"
                                [isLive]="isProgramPlaying(program)"
                                [showArchiveBadge]="
                                    canPlayArchivedProgram(program)
                                "
                            />
                        </div>
                        <div class="program-title">
                            {{ program?.title }}
                        </div>
                        <div class="epg-item__description">
                            {{ program?.desc }}
                        </div>
                        @if (isProgramPlaying(program)) {
                            <div class="program-progress">
                                <div class="epg-progress-track">
                                    <div
                                        class="epg-progress-fill"
                                        [style.width.%]="
                                            calculateProgress(program)
                                        "
                                    ></div>
                                </div>
                            </div>
                        }
                    </div>
                } @else {
                    <div
                        class="program-item clickable"
                        [class.current-program]="isProgramPlaying(program)"
                        [class.active]="isProgramPlaying(program)"
                        (click)="activateProgram(program)"
                    >
                        <div class="program-meta">
                            <app-epg-list-item
                                [item]="program"
                                [isLive]="isProgramPlaying(program)"
                                [showArchiveBadge]="
                                    canPlayArchivedProgram(program)
                                "
                            />
                        </div>
                        <div
                            class="program-title"
                            [innerHTML]="program.title"
                        ></div>
                        @if (isProgramPlaying(program)) {
                            <div class="program-progress">
                                <div class="epg-progress-track">
                                    <div
                                        class="epg-progress-fill"
                                        [style.width.%]="
                                            calculateProgress(program)
                                        "
                                    ></div>
                                </div>
                            </div>
                        }
                    </div>
                }
            }
        } @else {
            <div class="epg-empty-state">
                <mat-icon class="empty-state-icon">event_busy</mat-icon>
                <div class="empty-state-title">
                    {{ 'EPG.EPG_NOT_AVAILABLE_DATE' | translate }}
                </div>
                <div class="empty-state-hint">
                    {{ 'EPG.NO_GUIDE_HINT' | translate }}
                </div>
            </div>
        }
    </div>
}