@if (active()) {
    @if (state.open()) {
        <!-- Swallows the click that dismisses the panel so the player's
             click-to-pause never sees it. -->
        <div
            class="fullscreen-channel-panel__scrim"
            data-test-id="fullscreen-channel-panel-scrim"
            aria-hidden="true"
            (click)="state.hide()"
        ></div>
    }

    <!-- Keep the hover target above the scrim until the animated panel covers
         it. Removing it on open synthesizes a pointerover on the scrim and
         starts closing before a delayed first fullscreen paint can finish. -->
    <div
        #hotZone
        class="fullscreen-channel-panel__hot-zone"
        data-test-id="fullscreen-channel-panel-hot-zone"
        aria-hidden="true"
        (pointerenter)="onHotZoneEnter($event)"
        (pointerleave)="onHotZoneLeave()"
        (pointerdown)="onHotZonePointerDown($event)"
        (pointerup)="onHotZonePointerUp($event)"
        (pointercancel)="onHotZoneLeave()"
    >
        <!-- Purely visual (the zone itself is the target): a tab that shows
             where the list lives while the pointer is moving, and lights up
             while it rests on the edge. Keyboard users have C. -->
        @if (!state.open()) {
            <div
                class="fullscreen-channel-panel__edge-hint"
                [class.fullscreen-channel-panel__edge-hint--visible]="
                    state.hintVisible() || state.hotZoneHover()
                "
                [class.fullscreen-channel-panel__edge-hint--armed]="
                    state.hotZoneHover()
                "
                data-test-id="fullscreen-channel-panel-edge-hint"
            ></div>
        }
    </div>

    <aside
        #panel
        class="fullscreen-channel-panel dark-theme"
        [class.fullscreen-channel-panel--open]="state.open()"
        role="dialog"
        tabindex="-1"
        [attr.aria-label]="panelTitle() || (listLabelKey | translate)"
        [attr.aria-hidden]="!state.open()"
        [attr.inert]="state.open() ? null : ''"
        [attr.data-panel-kind]="kind"
        data-test-id="fullscreen-channel-panel"
        (pointerenter)="onPanelPointerEnter($event)"
        (pointerleave)="onPanelPointerLeave($event)"
    >
        <header class="fullscreen-channel-panel__header">
            @if (!searchEnabled()) {
                <h2
                    class="fullscreen-channel-panel__title"
                    data-test-id="fullscreen-channel-panel-title"
                >
                    {{ panelTitle() || (listLabelKey | translate) }}
                </h2>
            } @else {
                <label class="fullscreen-channel-panel__search">
                    <mat-icon
                        class="fullscreen-channel-panel__search-icon"
                        aria-hidden="true"
                        >search</mat-icon
                    >
                    <input
                        #searchInput
                        class="fullscreen-channel-panel__search-input"
                        type="search"
                        autocomplete="off"
                        spellcheck="false"
                        data-test-id="fullscreen-channel-panel-search"
                        [value]="searchTerm()"
                        [placeholder]="
                            panelTitle()
                                ? ('EMBEDDED_MPV.PLAYER.SEARCH_IN'
                                  | translate: { title: panelTitle() })
                                : ('EMBEDDED_MPV.PLAYER.SEARCH_CHANNELS'
                                  | translate)
                        "
                        [attr.aria-label]="
                            'EMBEDDED_MPV.PLAYER.SEARCH_CHANNELS' | translate
                        "
                        (input)="onSearchInput($event)"
                    />
                    @if (searchTerm()) {
                        <button
                            type="button"
                            class="fullscreen-channel-panel__search-clear"
                            data-test-id="fullscreen-channel-panel-search-clear"
                            [attr.aria-label]="
                                'EMBEDDED_MPV.PLAYER.CLEAR_SEARCH' | translate
                            "
                            (click)="clearSearch()"
                        >
                            <mat-icon>close</mat-icon>
                        </button>
                    }
                </label>
            }
            <button
                mat-icon-button
                type="button"
                class="fullscreen-channel-panel__close"
                data-test-id="fullscreen-channel-panel-close"
                [attr.aria-label]="hideLabelKey | translate"
                [matTooltip]="(hideLabelKey | translate) + ' (Esc)'"
                (click)="state.hide()"
            >
                <mat-icon>close</mat-icon>
            </button>
        </header>

        <div class="fullscreen-channel-panel__body">
            @if (state.mounted() && template(); as template) {
                <ng-container *ngTemplateOutlet="template; context: context" />
            }
        </div>
    </aside>
}