@if (feedback.current(); as fb) {
    <div
        class="player-controls__feedback"
        [attr.data-feedback-key]="fb.key"
        aria-hidden="true"
    >
        <mat-icon>{{ fb.icon }}</mat-icon>
        <span>{{ fb.label }}</span>
    </div>
}

@if (showTopScrim()) {
    <div
        class="player-controls__top-scrim"
        [class.player-controls__top-scrim--visible]="controlsAreVisible()"
        data-test-id="player-controls-top-scrim"
        aria-hidden="true"
    ></div>
}

@if (fullscreenMediaTitle(); as mediaTitle) {
    <div
        class="player-controls__title"
        [class.player-controls__title--visible]="controlsAreVisible()"
        [class.player-controls__title--panel-open]="
            settings.isOpen() && layout.roomy()
        "
        data-test-id="player-controls-media-title"
    >
        <div class="player-controls__title-primary">
            {{ mediaTitle.primary }}
        </div>
        @if (mediaTitle.secondary) {
            <div class="player-controls__title-secondary">
                {{ mediaTitle.secondary }}
            </div>
        }
    </div>
}

@if (showControls() && capabilities().streamStats) {
    <div
        class="player-controls__corner"
        [class.player-controls__corner--visible]="controlsAreVisible()"
        [class.player-controls__corner--panel-open]="
            settings.isOpen() && layout.roomy()
        "
        (pointerenter)="chrome.onPointerEnter()"
        (pointerleave)="chrome.onPointerLeave()"
        (pointerdown)="chrome.onPointerDown()"
        (click)="chrome.onClick($event)"
        (keydown)="chrome.onKeyDown()"
        (focusin)="chrome.onFocusIn($event)"
        (focusout)="chrome.onFocusOut($event)"
    >
        <div class="player-controls__popover-anchor">
            <button
                mat-icon-button
                type="button"
                class="player-controls__button"
                data-test-id="player-controls-stream-info-button"
                (click)="toggleMenu('stats')"
                [attr.aria-expanded]="menus.statsOpen()"
                [attr.aria-label]="
                    'EMBEDDED_MPV.PLAYER.STREAM_INFO' | translate
                "
                [matTooltip]="'EMBEDDED_MPV.PLAYER.STREAM_INFO' | translate"
                matTooltipPosition="below"
            >
                <mat-icon>info_outline</mat-icon>
            </button>
            @if (menus.statsOpen()) {
                <div
                    class="player-controls__panel player-controls__stats-popover"
                    role="dialog"
                    data-test-id="player-controls-stream-info-panel"
                    [attr.aria-label]="
                        'EMBEDDED_MPV.PLAYER.STREAM_INFO' | translate
                    "
                >
                    <div class="player-controls__menu-title">
                        {{ 'EMBEDDED_MPV.PLAYER.STREAM_INFO' | translate }}
                    </div>
                    @if (streamStats.hasRows()) {
                        <dl class="player-controls__stats-list">
                            @for (
                                row of streamStats.rows();
                                track row.labelKey
                            ) {
                                <div class="player-controls__stats-row">
                                    <dt>{{ row.labelKey | translate }}</dt>
                                    <dd>{{ row.value }}</dd>
                                </div>
                            }
                        </dl>
                    } @else {
                        <div class="player-controls__stats-empty">
                            {{
                                'EMBEDDED_MPV.PLAYER.STATS_UNAVAILABLE'
                                    | translate
                            }}
                        </div>
                    }
                </div>
            }
        </div>
    </div>
}

@if (showControls()) {
    <!-- Backdrop of the whole dock. Like the top scrim, one element rather than
         a background per row: the timeline and the button row overlap the same
         gradient, and two would darken the overlap twice. -->
    <div
        class="player-controls__bottom-scrim"
        [class.player-controls__bottom-scrim--visible]="controlsAreVisible()"
        data-test-id="player-controls-bottom-scrim"
        aria-hidden="true"
    ></div>
    <div
        #controlsBar
        class="player-controls__bar"
        [class.player-controls__bar--visible]="controlsAreVisible()"
        [class.player-controls__bar--compact]="isCompact()"
        [class.player-controls__bar--panel-open]="
            settings.isOpen() && layout.roomy()
        "
        [attr.inert]="settings.isOpen() && !layout.roomy() ? '' : null"
        [class.player-controls__bar--sheet-open]="
            settings.isOpen() && !layout.roomy()
        "
        (pointerenter)="chrome.onPointerEnter()"
        (pointerleave)="chrome.onPointerLeave()"
        (pointerdown)="chrome.onPointerDown()"
        (click)="chrome.onClick($event)"
        (keydown)="chrome.onKeyDown()"
        (focusin)="chrome.onFocusIn($event)"
        (focusout)="chrome.onFocusOut($event)"
    >
        <app-player-timeline
            [timeline]="timeline"
            [hover]="timelineHover"
            [seekable]="capabilities().seek"
            [canSeek]="state().canSeek"
            [isLive]="state().isLive"
            [remaining]="remainingTimeText()"
            [recordingStatus]="recordingStatusText()"
            [recording]="isRecording()"
            (scrubInput)="onTimelineInput($event)"
            (scrubCommit)="onTimelineCommit($event)"
        />

        <div class="player-controls__row">
            <div class="player-controls__left">
                @if (capabilities().volume) {
                    <div
                        class="player-controls__popover-anchor player-controls__volume"
                        (pointerenter)="volumeInteractions.hoverEnter($event)"
                        (pointerleave)="volumeInteractions.hoverLeave($event)"
                        (focusin)="volumeInteractions.hoverEnter($event)"
                        (focusout)="volumeInteractions.hoverLeave($event)"
                        (wheel)="volumeInteractions.wheel($event)"
                    >
                        <button
                            mat-icon-button
                            type="button"
                            class="player-controls__button"
                            (click)="
                                volumeInteractions.buttonClick($event, {
                                    inlineSlider: !isCompact(),
                                })
                            "
                            [attr.aria-label]="
                                (displayVolume() <= 0
                                    ? 'EMBEDDED_MPV.PLAYER.UNMUTE'
                                    : 'EMBEDDED_MPV.PLAYER.MUTE'
                                ) | translate
                            "
                            [matTooltip]="
                                (displayVolume() <= 0
                                    ? 'EMBEDDED_MPV.PLAYER.UNMUTE'
                                    : 'EMBEDDED_MPV.PLAYER.MUTE'
                                ) | translate
                            "
                            matTooltipPosition="above"
                        >
                            <mat-icon>{{ volumeIcon() }}</mat-icon>
                        </button>
                        @if (!isCompact()) {
                            <!-- Wide players keep the slider inline: it is the
                                 control the pointer reaches for most often. -->
                            <input
                                class="player-controls__slider player-controls__slider--volume player-controls__slider--inline"
                                [style.--slider-progress.%]="
                                    displayVolume() * 100
                                "
                                type="range"
                                min="0"
                                max="1"
                                step="0.01"
                                [value]="displayVolume()"
                                [attr.aria-label]="
                                    'EMBEDDED_MPV.PLAYER.VOLUME_LABEL'
                                        | translate
                                            : { percent: volumePercent() }
                                "
                                [attr.aria-valuetext]="
                                    'EMBEDDED_MPV.PLAYER.VOLUME_LABEL'
                                        | translate
                                            : { percent: volumePercent() }
                                "
                                (input)="volumeInteractions.sliderInput($event)"
                            />
                        } @else if (menus.volumeOpen()) {
                            <div
                                class="player-controls__panel player-controls__volume-popover"
                                role="dialog"
                                [attr.aria-label]="
                                    'EMBEDDED_MPV.PLAYER.VOLUME' | translate
                                "
                            >
                                <input
                                    class="player-controls__slider player-controls__slider--volume"
                                    [style.--slider-progress.%]="
                                        displayVolume() * 100
                                    "
                                    type="range"
                                    min="0"
                                    max="1"
                                    step="0.01"
                                    [value]="displayVolume()"
                                    [attr.aria-label]="
                                        'EMBEDDED_MPV.PLAYER.VOLUME_LABEL'
                                            | translate
                                                : { percent: volumePercent() }
                                    "
                                    [attr.aria-valuetext]="
                                        'EMBEDDED_MPV.PLAYER.VOLUME_LABEL'
                                            | translate
                                                : { percent: volumePercent() }
                                    "
                                    (input)="
                                        volumeInteractions.sliderInput($event)
                                    "
                                />
                                <span class="player-controls__volume-value">
                                    {{
                                        'EMBEDDED_MPV.PLAYER.VOLUME_LABEL'
                                            | translate
                                                : { percent: volumePercent() }
                                    }}
                                </span>
                            </div>
                        }
                    </div>
                }
            </div>

            <div class="player-controls__transport">
                @if (capabilities().seriesNavigation) {
                    <button
                        mat-icon-button
                        type="button"
                        class="player-controls__button"
                        data-test-id="player-controls-previous-episode"
                        [disabled]="isLoading() || !state().canPreviousEpisode"
                        (click)="requestPreviousEpisode()"
                        [attr.aria-label]="
                            'EMBEDDED_MPV.PLAYER.PREVIOUS_EPISODE' | translate
                        "
                        [matTooltip]="
                            'EMBEDDED_MPV.PLAYER.PREVIOUS_EPISODE' | translate
                        "
                        matTooltipPosition="above"
                    >
                        <mat-icon>skip_previous</mat-icon>
                    </button>
                }

                @if (capabilities().seek) {
                    <button
                        mat-icon-button
                        type="button"
                        class="player-controls__button"
                        [disabled]="!state().canSeek"
                        (click)="seekBy(-10)"
                        [attr.aria-label]="
                            'EMBEDDED_MPV.PLAYER.BACK_10_SECONDS' | translate
                        "
                        [matTooltip]="
                            'EMBEDDED_MPV.PLAYER.BACK_10_SECONDS' | translate
                        "
                        matTooltipPosition="above"
                    >
                        <mat-icon>replay_10</mat-icon>
                    </button>
                }

                <button
                    type="button"
                    class="player-controls__play"
                    data-test-id="player-controls-play"
                    [disabled]="!canTogglePlay()"
                    (click)="togglePlay()"
                    [attr.aria-label]="
                        (isPaused()
                            ? 'EMBEDDED_MPV.PLAYER.PLAY'
                            : 'EMBEDDED_MPV.PLAYER.PAUSE'
                        ) | translate
                    "
                    [matTooltip]="
                        (isPaused()
                            ? 'EMBEDDED_MPV.PLAYER.PLAY'
                            : 'EMBEDDED_MPV.PLAYER.PAUSE'
                        ) | translate
                    "
                    matTooltipPosition="above"
                >
                    <mat-icon>{{
                        isPaused() ? 'play_arrow' : 'pause'
                    }}</mat-icon>
                </button>

                @if (capabilities().seek) {
                    <button
                        mat-icon-button
                        type="button"
                        class="player-controls__button"
                        [disabled]="!state().canSeek"
                        (click)="seekBy(10)"
                        [attr.aria-label]="
                            'EMBEDDED_MPV.PLAYER.FORWARD_10_SECONDS' | translate
                        "
                        [matTooltip]="
                            'EMBEDDED_MPV.PLAYER.FORWARD_10_SECONDS' | translate
                        "
                        matTooltipPosition="above"
                    >
                        <mat-icon>forward_10</mat-icon>
                    </button>
                }

                @if (capabilities().seriesNavigation) {
                    <button
                        mat-icon-button
                        type="button"
                        class="player-controls__button"
                        data-test-id="player-controls-next-episode"
                        [disabled]="isLoading() || !state().canNextEpisode"
                        (click)="requestNextEpisode()"
                        [attr.aria-label]="
                            'EMBEDDED_MPV.PLAYER.NEXT_EPISODE' | translate
                        "
                        [matTooltip]="
                            'EMBEDDED_MPV.PLAYER.NEXT_EPISODE' | translate
                        "
                        matTooltipPosition="above"
                    >
                        <mat-icon>skip_next</mat-icon>
                    </button>
                }
            </div>

            <div class="player-controls__actions">
                @if (
                    settings.available() && layout.roomy() && !settings.isOpen()
                ) {
                    @if (settings.groups().subtitles) {
                        <!-- On with no track marked selected yet (the engine
                             can report the id before the list) reads "On",
                             never "Off". The name carries the value
                             ("Subtitles: English"); the label is the value. -->
                        @let subtitleValue =
                            settings.subtitleLabel() ??
                            ((settings.subtitlesOn()
                                ? 'EMBEDDED_MPV.PLAYER.SUBTITLES_ON'
                                : 'EMBEDDED_MPV.PLAYER.SUBTITLES_OFF'
                            ) | translate);
                        <button
                            type="button"
                            class="player-controls__chip"
                            [class.player-controls__chip--on]="
                                settings.subtitlesOn()
                            "
                            data-test-id="player-controls-subtitle-chip"
                            (click)="settings.open('subtitles')"
                            (contextmenu)="
                                settings.onSubtitleChipContextMenu($event)
                            "
                            [attr.aria-label]="
                                'EMBEDDED_MPV.PLAYER.SUBTITLES_TOOLTIP'
                                    | translate: { subtitles: subtitleValue }
                            "
                            [matTooltip]="
                                'EMBEDDED_MPV.PLAYER.SUBTITLES_TOOLTIP'
                                    | translate: { subtitles: subtitleValue }
                            "
                            matTooltipPosition="above"
                        >
                            <mat-icon>{{
                                settings.subtitlesOn()
                                    ? 'closed_caption'
                                    : 'closed_caption_disabled'
                            }}</mat-icon>
                            <span class="player-controls__chip-label">{{
                                subtitleValue
                            }}</span>
                        </button>
                    }
                    @if (settings.groups().speed) {
                        <button
                            type="button"
                            class="player-controls__chip"
                            [class.player-controls__chip--modified]="
                                settings.speedModified()
                            "
                            data-test-id="player-controls-speed-chip"
                            (click)="settings.open('speed')"
                            [attr.aria-label]="
                                'EMBEDDED_MPV.PLAYER.SPEED_TOOLTIP'
                                    | translate
                                        : { speed: settings.speedLabel() }
                            "
                            [matTooltip]="
                                'EMBEDDED_MPV.PLAYER.SPEED_TOOLTIP'
                                    | translate
                                        : { speed: settings.speedLabel() }
                            "
                            matTooltipPosition="above"
                        >
                            <mat-icon>speed</mat-icon>
                            <span class="player-controls__chip-label">{{
                                settings.speedLabel()
                            }}</span>
                        </button>
                    }
                }

                @if (settings.available()) {
                    <button
                        mat-icon-button
                        type="button"
                        class="player-controls__button player-controls__tune"
                        [class.player-controls__tune--active]="
                            settings.isOpen()
                        "
                        data-test-id="player-controls-settings-button"
                        (click)="settings.toggle()"
                        aria-haspopup="dialog"
                        [attr.aria-expanded]="settings.isOpen()"
                        [attr.aria-label]="
                            'EMBEDDED_MPV.PLAYER.SETTINGS' | translate
                        "
                        [matTooltip]="
                            'EMBEDDED_MPV.PLAYER.SETTINGS' | translate
                        "
                        matTooltipPosition="above"
                    >
                        <mat-icon>tune</mat-icon>
                        @if (
                            !layout.roomy() &&
                            !settings.isOpen() &&
                            settings.hasDots()
                        ) {
                            <span
                                class="player-controls__tune-dots"
                                data-test-id="player-controls-settings-dots"
                                aria-hidden="true"
                            >
                                @if (settings.dots().cyan) {
                                    <span
                                        class="player-controls__tune-dot player-controls__tune-dot--cyan"
                                    ></span>
                                }
                                @if (settings.dots().violet) {
                                    <span
                                        class="player-controls__tune-dot player-controls__tune-dot--violet"
                                    ></span>
                                }
                            </span>
                        }
                    </button>
                }

                @if (canRecord() && !(settings.isOpen() && layout.roomy())) {
                    <button
                        mat-icon-button
                        type="button"
                        class="player-controls__button player-controls__record-button"
                        [class.player-controls__record-button--active]="
                            isRecording()
                        "
                        [disabled]="isLoading()"
                        (click)="toggleRecording()"
                        [attr.aria-pressed]="isRecording()"
                        [attr.aria-label]="
                            (isRecording()
                                ? 'EMBEDDED_MPV.PLAYER.STOP_RECORDING'
                                : 'EMBEDDED_MPV.PLAYER.START_RECORDING'
                            ) | translate
                        "
                        [matTooltip]="
                            (isRecording()
                                ? 'EMBEDDED_MPV.PLAYER.STOP_RECORDING'
                                : 'EMBEDDED_MPV.PLAYER.START_RECORDING'
                            ) | translate
                        "
                        matTooltipPosition="above"
                    >
                        <mat-icon>{{
                            isRecording()
                                ? 'stop_circle'
                                : 'fiber_manual_record'
                        }}</mat-icon>
                    </button>
                }

                @if (
                    capabilities().pictureInPicture &&
                    !(settings.isOpen() && layout.roomy())
                ) {
                    <button
                        mat-icon-button
                        type="button"
                        class="player-controls__button"
                        [disabled]="!state().canPictureInPicture"
                        (click)="togglePictureInPicture()"
                        [attr.aria-pressed]="state().pictureInPictureActive"
                        [attr.aria-label]="
                            (state().pictureInPictureActive
                                ? 'EMBEDDED_MPV.PLAYER.EXIT_PICTURE_IN_PICTURE'
                                : 'EMBEDDED_MPV.PLAYER.ENTER_PICTURE_IN_PICTURE'
                            ) | translate
                        "
                        [matTooltip]="
                            (state().pictureInPictureActive
                                ? 'EMBEDDED_MPV.PLAYER.EXIT_PICTURE_IN_PICTURE'
                                : 'EMBEDDED_MPV.PLAYER.ENTER_PICTURE_IN_PICTURE'
                            ) | translate
                        "
                        matTooltipPosition="above"
                    >
                        <mat-icon>{{
                            state().pictureInPictureActive
                                ? 'picture_in_picture_alt'
                                : 'picture_in_picture'
                        }}</mat-icon>
                    </button>
                }

                @if (capabilities().fullscreen) {
                    <button
                        mat-icon-button
                        type="button"
                        class="player-controls__button"
                        [disabled]="!canFullscreen()"
                        (click)="toggleFullscreen()"
                        [attr.aria-label]="
                            (isFullscreen()
                                ? 'EMBEDDED_MPV.PLAYER.EXIT_FULLSCREEN'
                                : 'EMBEDDED_MPV.PLAYER.ENTER_FULLSCREEN'
                            ) | translate
                        "
                        [matTooltip]="
                            (isFullscreen()
                                ? 'EMBEDDED_MPV.PLAYER.EXIT_FULLSCREEN'
                                : 'EMBEDDED_MPV.PLAYER.ENTER_FULLSCREEN'
                            ) | translate
                        "
                        matTooltipPosition="above"
                    >
                        <mat-icon>{{
                            isFullscreen() ? 'fullscreen_exit' : 'fullscreen'
                        }}</mat-icon>
                    </button>
                }
            </div>
        </div>
    </div>

    @if (settings.isOpen()) {
        <app-player-settings-panel
            class="player-controls__settings"
            [class.player-controls__settings--sheet]="!layout.roomy()"
            data-test-id="player-controls-settings-panel"
            [controller]="controller()"
            [settings]="settings"
            [selection]="menuSelection"
            [subtitleSettings]="subtitleSettings"
            [mode]="layout.roomy() ? 'panel' : 'sheet'"
            [title]="'EMBEDDED_MPV.PLAYER.SETTINGS' | translate"
            (closeRequested)="settings.close()"
            (pointerenter)="chrome.onPointerEnter()"
            (pointerleave)="chrome.onPointerLeave()"
            (pointerdown)="chrome.onPointerDown()"
            (click)="chrome.onClick($event)"
            (keydown)="chrome.onKeyDown()"
            (focusin)="chrome.onFocusIn($event)"
            (focusout)="chrome.onFocusOut($event)"
        />
    }

    @if (upNextCard.item(); as item) {
        <app-player-up-next-card
            class="player-controls__up-next"
            [class.player-controls__up-next--compact]="isCompact()"
            [item]="item"
            [remainingSeconds]="upNextCard.remainingSeconds() ?? 0"
            [compact]="isCompact()"
            [collapsed]="upNextCard.collapsed()"
            (selected)="reveal(); nextEpisodeRequested.emit()"
            (dismissed)="upNextCard.dismiss()"
            (collapseRequested)="upNextCard.collapse()"
            (pointerenter)="chrome.onPointerEnter()"
            (pointerleave)="chrome.onPointerLeave()"
            (pointerdown)="chrome.onPointerDown()"
            (click)="chrome.onClick($event)"
            (keydown)="chrome.onKeyDown()"
            (focusin)="chrome.onFocusIn($event)"
            (focusout)="chrome.onFocusOut($event)"
        />
    }
}