@if (channel) {
    <!-- channel info panel -->
    <div id="channel-header" color="primary">
        <div class="channel-info">
            <div class="channel-icon">
                @if (channel?.icon) {
                    <img [src]="channel.icon" width="48" />
                }
            </div>
            <div class="channel-details">
                <div class="channel-name">
                    {{ channel?.name[0]?.value }}
                </div>
                <div class="program-name">
                    {{
                        playingNow
                            ? playingNow.title[0]?.value
                            : ('EPG.LIVE_STREAM' | translate)
                    }}
                </div>
            </div>
        </div>
        <mat-divider />
        <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">
                {{ dateToday | momentDate: 'YYYYMMDD' : 'MMMM Do, dddd' }}</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>
    <mat-divider />

    @let timeshiftUntil = timeshiftUntil$ | async;
    @if (timeshiftUntil) {
        <!-- program list -->
        <mat-selection-list
            id="program-list"
            [multiple]="false"
            hideSingleSelectionIndicator="true"
        >
            @if (items?.length > 0) {
                <ng-container *ngFor="let item of items">
                    <mat-list-option
                        *ngIf="
                            item.start < timeshiftUntil ||
                                item.start >= timeNow;
                            else timeshiftItem
                        "
                    >
                        <div matListItemLine>
                            <app-epg-list-item
                                [timeshiftUntil]="timeshiftUntil"
                                [timeNow]="timeNow"
                                [item]="item"
                            />
                        </div>
                        <p matListItemLine>{{ item?.title[0]?.value }}</p>
                    </mat-list-option>
                    <ng-template #timeshiftItem>
                        <mat-list-option
                            [value]="item"
                            [class.active]="
                                timeNow >= item.start && timeNow <= item.stop
                            "
                            (click)="
                                setEpgProgram(
                                    item,
                                    timeNow >= item.start &&
                                        timeNow <= item.stop,
                                    item.start > timeshiftUntil
                                )
                            "
                        >
                            <div matListItemLine>
                                <app-epg-list-item
                                    [timeshiftUntil]="timeshiftUntil"
                                    [timeNow]="timeNow"
                                    [item]="item"
                                />
                            </div>
                            <p
                                matListItemLine
                                [innerHTML]="item?.title[0]?.value"
                            ></p>
                        </mat-list-option>
                    </ng-template>
                    <mat-divider />
                </ng-container>
            } @else {
                <p class="epg-not-available">
                    {{ 'EPG.EPG_NOT_AVAILABLE_DATE' | translate }}
                </p>
            }
        </mat-selection-list>
    }
} @else {
    <mat-list>
        <mat-list-item>
            {{ 'EPG.EPG_NOT_AVAILABLE_CHANNEL_TITLE' | translate }}<br />
            {{ 'EPG.EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION' | translate }}
        </mat-list-item>
    </mat-list>
}