@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 (fullscreenMediaTitle(); as mediaTitle) {
    <div
        class="player-controls__title"
        [class.player-controls__title--visible]="controlsAreVisible()"
        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()) {
    <div
        #controlsBar
        class="player-controls__bar"
        [class.player-controls__bar--visible]="controlsAreVisible()"
        (pointerenter)="onBarPointerEnter()"
        (pointerleave)="onBarPointerLeave()"
        (focusin)="onBarFocusIn()"
        (focusout)="onBarFocusOut($event)"
    >
        <div class="player-controls__transport">
            <button
                mat-icon-button
                type="button"
                class="player-controls__button"
                [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().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>

                <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>
            }

            @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
                    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>
            }
        </div>

        <div class="player-controls__timeline">
            @if (capabilities().seek) {
                <input
                    class="player-controls__slider"
                    [style.--slider-progress.%]="timelineProgress()"
                    type="range"
                    min="0"
                    [max]="timelineDuration()"
                    [value]="timelineValue()"
                    [disabled]="!state().canSeek"
                    [attr.aria-label]="
                        'EMBEDDED_MPV.PLAYER.PLAYBACK_POSITION' | translate
                    "
                    [attr.aria-valuetext]="formatTime(timelineValue())"
                    (input)="onTimelineInput($event)"
                    (change)="onTimelineCommit($event)"
                />
            }
            <div class="player-controls__time">
                <span>{{ formatTime(timelineValue()) }}</span>
                @if (state().canSeek) {
                    <span>{{ formatTime(timelineDuration()) }}</span>
                } @else if (state().isLive) {
                    <span
                        class="player-controls__live-badge"
                        [attr.aria-label]="
                            'EMBEDDED_MPV.PLAYER.LIVE_STREAM' | translate
                        "
                    >
                        <span
                            class="player-controls__live-dot"
                            aria-hidden="true"
                        ></span>
                        LIVE
                    </span>
                } @else {
                    <span>--:--</span>
                }
            </div>
            @if (recordingStatusText(); as recordingStatus) {
                <div
                    class="player-controls__recording-status"
                    [class.player-controls__recording-status--active]="
                        isRecording()
                    "
                    [attr.aria-live]="isRecording() ? 'off' : 'polite'"
                >
                    <mat-icon>{{
                        isRecording() ? 'fiber_manual_record' : 'check_circle'
                    }}</mat-icon>
                    <span>{{ recordingStatus }}</span>
                </div>
            }
        </div>

        <div class="player-controls__actions">
            @if (capabilities().volume) {
                <div
                    class="player-controls__popover-anchor"
                    (pointerenter)="onVolumeHoverEnter()"
                    (pointerleave)="onVolumeHoverLeave()"
                    (focusin)="onVolumeHoverEnter()"
                    (focusout)="onVolumeHoverLeave()"
                    (wheel)="onVolumeWheel($event)"
                >
                    <button
                        mat-icon-button
                        type="button"
                        class="player-controls__button"
                        (click)="toggleMute()"
                        [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 (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)="onVolumeInput($event)"
                            />
                            <span class="player-controls__volume-value">
                                {{
                                    'EMBEDDED_MPV.PLAYER.VOLUME_LABEL'
                                        | translate
                                            : { percent: volumePercent() }
                                }}
                            </span>
                        </div>
                    }
                </div>
            }

            @if (hasAudioTracks()) {
                <div class="player-controls__popover-anchor">
                    <button
                        mat-icon-button
                        type="button"
                        class="player-controls__button"
                        (click)="toggleMenu('audio')"
                        [attr.aria-expanded]="menus.audioOpen()"
                        [attr.aria-label]="
                            'EMBEDDED_MPV.PLAYER.AUDIO_TRACKS' | translate
                        "
                        [matTooltip]="
                            'EMBEDDED_MPV.PLAYER.AUDIO_TRACKS' | translate
                        "
                        matTooltipPosition="above"
                    >
                        <mat-icon>graphic_eq</mat-icon>
                    </button>
                    @if (menus.audioOpen()) {
                        <div
                            class="player-controls__panel player-controls__track-popover"
                            role="menu"
                            [attr.aria-label]="
                                'EMBEDDED_MPV.PLAYER.AUDIO_TRACKS' | translate
                            "
                        >
                            <div class="player-controls__menu-title">
                                {{
                                    'EMBEDDED_MPV.PLAYER.AUDIO_TRACKS'
                                        | translate
                                }}
                            </div>
                            <div class="player-controls__track-list">
                                @for (
                                    track of state().audioTracks;
                                    track track.id
                                ) {
                                    <button
                                        type="button"
                                        role="menuitemradio"
                                        [attr.aria-checked]="track.selected"
                                        class="player-controls__track"
                                        [class.player-controls__track--selected]="
                                            track.selected
                                        "
                                        (click)="
                                            menuSelection.audioTrack(track.id)
                                        "
                                    >
                                        <span>{{ track.label }}</span>
                                        @if (track.selected) {
                                            <mat-icon>check</mat-icon>
                                        }
                                    </button>
                                }
                            </div>
                        </div>
                    }
                </div>
            }

            @if (hasSubtitleTracks()) {
                <div class="player-controls__popover-anchor">
                    <button
                        mat-icon-button
                        type="button"
                        class="player-controls__button"
                        (click)="toggleMenu('subtitle')"
                        [attr.aria-expanded]="menus.subtitleOpen()"
                        [attr.aria-label]="
                            'EMBEDDED_MPV.PLAYER.SUBTITLES' | translate
                        "
                        [matTooltip]="
                            'EMBEDDED_MPV.PLAYER.SUBTITLES' | translate
                        "
                        matTooltipPosition="above"
                    >
                        <mat-icon>{{
                            state().subtitlesEnabled
                                ? 'subtitles'
                                : 'subtitles_off'
                        }}</mat-icon>
                    </button>
                    @if (menus.subtitleOpen()) {
                        <div
                            class="player-controls__panel player-controls__track-popover"
                            role="menu"
                            [attr.aria-label]="
                                'EMBEDDED_MPV.PLAYER.SUBTITLES' | translate
                            "
                        >
                            <div class="player-controls__menu-title">
                                {{
                                    'EMBEDDED_MPV.PLAYER.SUBTITLES' | translate
                                }}
                            </div>
                            <div class="player-controls__track-list">
                                <button
                                    type="button"
                                    role="menuitemradio"
                                    [attr.aria-checked]="
                                        !state().subtitlesEnabled
                                    "
                                    class="player-controls__track"
                                    [class.player-controls__track--selected]="
                                        !state().subtitlesEnabled
                                    "
                                    (click)="menuSelection.subtitleTrack(-1)"
                                >
                                    <span>{{
                                        'EMBEDDED_MPV.PLAYER.SUBTITLES_OFF'
                                            | translate
                                    }}</span>
                                    @if (!state().subtitlesEnabled) {
                                        <mat-icon>check</mat-icon>
                                    }
                                </button>
                                @for (
                                    track of state().subtitleTracks;
                                    track track.id
                                ) {
                                    <button
                                        type="button"
                                        role="menuitemradio"
                                        [attr.aria-checked]="track.selected"
                                        class="player-controls__track"
                                        [class.player-controls__track--selected]="
                                            track.selected
                                        "
                                        (click)="
                                            menuSelection.subtitleTrack(
                                                track.id
                                            )
                                        "
                                    >
                                        <span>{{ track.label }}</span>
                                        @if (track.selected) {
                                            <mat-icon>check</mat-icon>
                                        }
                                    </button>
                                }
                            </div>
                        </div>
                    }
                </div>
            }

            @if (capabilities().playbackSpeed) {
                <div class="player-controls__popover-anchor">
                    <button
                        mat-icon-button
                        type="button"
                        class="player-controls__button"
                        (click)="toggleMenu('speed')"
                        [attr.aria-expanded]="menus.speedOpen()"
                        [attr.aria-label]="
                            'EMBEDDED_MPV.PLAYER.PLAYBACK_SPEED' | translate
                        "
                        [matTooltip]="
                            'EMBEDDED_MPV.PLAYER.SPEED_TOOLTIP'
                                | translate
                                    : {
                                          speed: speedLabel(
                                              state().playbackSpeed
                                          ),
                                      }
                        "
                        matTooltipPosition="above"
                    >
                        <mat-icon>speed</mat-icon>
                    </button>
                    @if (menus.speedOpen()) {
                        <div
                            class="player-controls__panel player-controls__track-popover"
                            role="menu"
                            [attr.aria-label]="
                                'EMBEDDED_MPV.PLAYER.PLAYBACK_SPEED' | translate
                            "
                        >
                            <div class="player-controls__menu-title">
                                {{
                                    'EMBEDDED_MPV.PLAYER.PLAYBACK_SPEED'
                                        | translate
                                }}
                            </div>
                            <div class="player-controls__track-list">
                                @for (
                                    preset of state().speedPresets;
                                    track preset.value
                                ) {
                                    <button
                                        type="button"
                                        role="menuitemradio"
                                        [attr.aria-checked]="
                                            preset.value ===
                                            state().playbackSpeed
                                        "
                                        class="player-controls__track"
                                        [class.player-controls__track--selected]="
                                            preset.value ===
                                            state().playbackSpeed
                                        "
                                        (click)="
                                            menuSelection.speed(preset.value)
                                        "
                                    >
                                        <span>{{ preset.label }}</span>
                                        @if (
                                            preset.value ===
                                            state().playbackSpeed
                                        ) {
                                            <mat-icon>check</mat-icon>
                                        }
                                    </button>
                                }
                            </div>
                        </div>
                    }
                </div>
            }

            @if (capabilities().aspectRatio) {
                <div class="player-controls__popover-anchor">
                    <button
                        mat-icon-button
                        type="button"
                        class="player-controls__button"
                        (click)="toggleMenu('aspect')"
                        [attr.aria-expanded]="menus.aspectOpen()"
                        [attr.aria-label]="
                            'EMBEDDED_MPV.PLAYER.ASPECT_RATIO' | translate
                        "
                        [matTooltip]="
                            'EMBEDDED_MPV.PLAYER.ASPECT_RATIO' | translate
                        "
                        matTooltipPosition="above"
                    >
                        <mat-icon>aspect_ratio</mat-icon>
                    </button>
                    @if (menus.aspectOpen()) {
                        <div
                            class="player-controls__panel player-controls__track-popover"
                            role="menu"
                            [attr.aria-label]="
                                'EMBEDDED_MPV.PLAYER.ASPECT_RATIO' | translate
                            "
                        >
                            <div class="player-controls__menu-title">
                                {{
                                    'EMBEDDED_MPV.PLAYER.ASPECT_RATIO'
                                        | translate
                                }}
                            </div>
                            <div class="player-controls__track-list">
                                @for (
                                    preset of state().aspectPresets;
                                    track preset.value
                                ) {
                                    <button
                                        type="button"
                                        role="menuitemradio"
                                        [attr.aria-checked]="
                                            preset.value === state().aspectRatio
                                        "
                                        class="player-controls__track"
                                        [class.player-controls__track--selected]="
                                            preset.value === state().aspectRatio
                                        "
                                        (click)="
                                            menuSelection.aspect(preset.value)
                                        "
                                    >
                                        <span>{{
                                            preset.value === 'no'
                                                ? ('EMBEDDED_MPV.PLAYER.ASPECT_DEFAULT'
                                                  | translate)
                                                : preset.label
                                        }}</span>
                                        @if (
                                            preset.value === state().aspectRatio
                                        ) {
                                            <mat-icon>check</mat-icon>
                                        }
                                    </button>
                                }
                            </div>
                        </div>
                    }
                </div>
            }

            @if (canRecord()) {
                <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) {
                <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>
}