<section class="live-epg-panel" [class.live-epg-panel--collapsed]="collapsed()">
    <div class="live-epg-panel__summary-bar">
        <button
            mat-icon-button
            class="live-epg-panel__toggle"
            type="button"
            (click)="toggleCollapsed()"
            [attr.aria-expanded]="!collapsed()"
            [attr.aria-label]="
                (collapsed() ? 'EPG.EXPAND_PANEL' : 'EPG.COLLAPSE_PANEL')
                    | translate
            "
            [matTooltip]="
                (collapsed() ? 'EPG.EXPAND_PANEL' : 'EPG.COLLAPSE_PANEL')
                    | translate
            "
        >
            <mat-icon>{{
                collapsed() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
            }}</mat-icon>
        </button>

        <div class="live-epg-panel__summary" role="status">
            <span class="live-epg-panel__label">
                {{ 'EPG.CURRENT_PROGRAM' | translate }}
            </span>

            <div class="live-epg-panel__program-line">
                @if (loading()) {
                    <span class="live-epg-panel__title">
                        {{ 'EPG.LOADING' | translate }}
                    </span>
                } @else if (hasSummary()) {
                    <span class="live-epg-panel__title">
                        {{ summary()?.title }}
                    </span>

                    @if (hasTimeRange()) {
                        <span class="live-epg-panel__time">
                            @if (summary()?.start) {
                                {{ summary()?.start | date: 'HH:mm' }}
                            }
                            @if (summary()?.start && summary()?.stop) {
                                -
                            }
                            @if (summary()?.stop) {
                                {{ summary()?.stop | date: 'HH:mm' }}
                            }
                        </span>
                    }
                } @else {
                    <span
                        class="live-epg-panel__title live-epg-panel__title--muted"
                    >
                        {{ 'EPG.NO_PROGRAM_INFO' | translate }}
                    </span>
                }
            </div>
        </div>

        @if (showDateNavigator()) {
            @if (!collapsed()) {
                <div
                    class="live-epg-panel__date-nav"
                    aria-label="EPG date navigation"
                >
                    <button
                        class="previous-day"
                        mat-icon-button
                        type="button"
                        (click)="navigateDate('prev')"
                        [matTooltip]="'EPG.PREVIOUS_DAY' | translate"
                    >
                        <mat-icon>chevron_left</mat-icon>
                    </button>
                    <span class="live-epg-panel__selected-date selected-date">
                        {{
                            selectedDateValue()
                                | date
                                    : 'MMMM d, EEEE'
                                    : undefined
                                    : currentLocale()
                        }}
                    </span>
                    <button
                        class="next-day"
                        mat-icon-button
                        type="button"
                        (click)="navigateDate('next')"
                        [matTooltip]="'EPG.NEXT_DAY' | translate"
                    >
                        <mat-icon>chevron_right</mat-icon>
                    </button>
                </div>

                <button
                    mat-button
                    type="button"
                    class="live-epg-panel__date-chip"
                    [matMenuTriggerFor]="liveEpgDateMenu"
                    [matTooltip]="
                        selectedDateValue()
                            | date: 'MMMM d, EEEE' : undefined : currentLocale()
                    "
                >
                    <mat-icon>calendar_today</mat-icon>
                    <span>{{
                        selectedDateValue()
                            | date: 'MMM d, EEE' : undefined : currentLocale()
                    }}</span>
                </button>

                <mat-menu #liveEpgDateMenu="matMenu" xPosition="before">
                    <button
                        class="previous-day"
                        mat-menu-item
                        type="button"
                        (click)="navigateDate('prev')"
                    >
                        <mat-icon>chevron_left</mat-icon>
                        <span>{{ 'EPG.PREVIOUS_DAY' | translate }}</span>
                    </button>
                    <button
                        class="next-day"
                        mat-menu-item
                        type="button"
                        (click)="navigateDate('next')"
                    >
                        <mat-icon>chevron_right</mat-icon>
                        <span>{{ 'EPG.NEXT_DAY' | translate }}</span>
                    </button>
                </mat-menu>
            }
        }

        @if (progress() !== null) {
            <div class="live-epg-panel__progress" aria-hidden="true">
                <div
                    class="live-epg-panel__progress-fill"
                    [style.width.%]="progress()"
                ></div>
            </div>
        }
    </div>

    <div
        class="live-epg-panel__body"
        [attr.aria-hidden]="collapsed()"
        [attr.inert]="collapsed() ? '' : null"
    >
        <ng-content />
    </div>
</section>
