@if (mode() === 'sheet') {
    <div class="player-settings__grip" aria-hidden="true"></div>
}
<div class="player-settings__header">
    <h2 class="player-settings__title" [id]="headingId('title')">
        {{ title() }}
    </h2>
    <button
        mat-icon-button
        type="button"
        class="player-settings__close"
        data-test-id="player-settings-close"
        (click)="closeRequested.emit()"
        [attr.aria-label]="'EMBEDDED_MPV.PLAYER.CLOSE_SETTINGS' | translate"
        [matTooltip]="'EMBEDDED_MPV.PLAYER.CLOSE_SETTINGS' | translate"
    >
        <mat-icon>close</mat-icon>
    </button>
</div>

<div class="player-settings__body">
    @if (groups().audio) {
        <section
            class="player-settings__group"
            [class.player-settings__group--focused]="isFocused('audio')"
            data-group="audio"
            data-test-id="player-settings-audio"
        >
            <h3 class="player-settings__heading" [id]="headingId('audio')">
                <span
                    class="player-settings__dot player-settings__dot--cyan"
                    aria-hidden="true"
                ></span>
                {{ 'EMBEDDED_MPV.PLAYER.AUDIO_TRACKS' | translate }}
            </h3>
            <div
                class="player-settings__options"
                appSettingsRadioGroup
                [attr.aria-labelledby]="headingId('audio')"
            >
                @for (track of state().audioTracks; track track.id) {
                    <button
                        type="button"
                        class="player-settings__option"
                        [appSettingsRadio]="track.selected"
                        [class.player-settings__option--selected]="
                            track.selected
                        "
                        (click)="selection().audioTrack(track.id)"
                    >
                        <span>{{ track.label }}</span>
                        @if (track.selected) {
                            <mat-icon>check</mat-icon>
                        }
                    </button>
                }
            </div>
        </section>
    }

    @if (groups().subtitles) {
        <section
            class="player-settings__group"
            [class.player-settings__group--focused]="isFocused('subtitles')"
            data-group="subtitles"
            data-test-id="player-settings-subtitles"
        >
            <h3 class="player-settings__heading" [id]="headingId('subtitles')">
                <span
                    class="player-settings__dot player-settings__dot--cyan"
                    aria-hidden="true"
                ></span>
                {{ 'EMBEDDED_MPV.PLAYER.SUBTITLES' | translate }}
            </h3>
            @if (state().subtitleTracks.length > 0) {
                <div
                    class="player-settings__options"
                    appSettingsRadioGroup
                    [attr.aria-labelledby]="headingId('subtitles')"
                >
                    @if (capabilities().subtitles) {
                        <button
                            type="button"
                            class="player-settings__option player-settings__option--default"
                            [appSettingsRadio]="!state().subtitlesEnabled"
                            [class.player-settings__option--selected]="
                                !state().subtitlesEnabled
                            "
                            (click)="selection().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"
                            class="player-settings__option"
                            [appSettingsRadio]="track.selected"
                            [class.player-settings__option--selected]="
                                track.selected
                            "
                            (click)="selection().subtitleTrack(track.id)"
                        >
                            <span>{{ track.label }}</span>
                            @if (track.selected) {
                                <mat-icon>check</mat-icon>
                            }
                        </button>
                    }
                </div>
            }
            @if (capabilities().externalSubtitles) {
                <!-- An action, not a choice: kept out of the radio group. -->
                <button
                    type="button"
                    class="player-settings__option player-settings__option--action"
                    data-test-id="player-controls-load-subtitle"
                    (click)="loadExternalSubtitle()"
                >
                    <span>{{
                        'EMBEDDED_MPV.PLAYER.LOAD_SUBTITLE_FILE' | translate
                    }}</span>
                    <mat-icon>upload_file</mat-icon>
                </button>
            }

            @if (capabilities().subtitleDelay) {
                <div
                    class="player-settings__subsection"
                    data-test-id="player-controls-subtitle-delay"
                >
                    <h4
                        class="player-settings__subheading"
                        [id]="headingId('subtitle-delay')"
                    >
                        {{ 'EMBEDDED_MPV.PLAYER.SUBTITLE_DELAY' | translate }}
                    </h4>
                    <div
                        class="player-settings__delay-row"
                        role="group"
                        [attr.aria-labelledby]="headingId('subtitle-delay')"
                    >
                        <button
                            mat-icon-button
                            type="button"
                            (click)="
                                subtitleSettings().adjustDelay(
                                    -subtitleDelayStep
                                )
                            "
                            [attr.aria-label]="
                                'EMBEDDED_MPV.PLAYER.SUBTITLE_DELAY_DECREASE'
                                    | translate
                            "
                            [matTooltip]="
                                'EMBEDDED_MPV.PLAYER.SUBTITLE_DELAY_DECREASE'
                                    | translate
                            "
                        >
                            <mat-icon>remove</mat-icon>
                        </button>
                        <span
                            class="player-settings__delay-value"
                            aria-live="polite"
                            >{{
                                subtitleDelayLabel(state().subtitleDelaySeconds)
                            }}</span
                        >
                        <button
                            mat-icon-button
                            type="button"
                            (click)="
                                subtitleSettings().adjustDelay(
                                    subtitleDelayStep
                                )
                            "
                            [attr.aria-label]="
                                'EMBEDDED_MPV.PLAYER.SUBTITLE_DELAY_INCREASE'
                                    | translate
                            "
                            [matTooltip]="
                                'EMBEDDED_MPV.PLAYER.SUBTITLE_DELAY_INCREASE'
                                    | translate
                            "
                        >
                            <mat-icon>add</mat-icon>
                        </button>
                        <button
                            mat-icon-button
                            type="button"
                            [disabled]="state().subtitleDelaySeconds === 0"
                            (click)="subtitleSettings().resetDelay()"
                            [attr.aria-label]="
                                'EMBEDDED_MPV.PLAYER.SUBTITLE_DELAY_RESET'
                                    | translate
                            "
                            [matTooltip]="
                                'EMBEDDED_MPV.PLAYER.SUBTITLE_DELAY_RESET'
                                    | translate
                            "
                        >
                            <mat-icon>restart_alt</mat-icon>
                        </button>
                    </div>
                </div>
            }

            @if (capabilities().subtitleStyle) {
                <div
                    class="player-settings__subsection"
                    data-test-id="player-controls-subtitle-style"
                >
                    <h4
                        class="player-settings__subheading"
                        [id]="headingId('subtitle-size')"
                    >
                        {{ 'EMBEDDED_MPV.PLAYER.SUBTITLE_SIZE' | translate }}
                    </h4>
                    <div
                        class="player-settings__seg"
                        appSettingsRadioGroup
                        [attr.aria-labelledby]="headingId('subtitle-size')"
                    >
                        @for (
                            preset of subtitleSizePresets;
                            track preset.value
                        ) {
                            <button
                                type="button"
                                class="player-settings__seg-item"
                                [appSettingsRadio]="
                                    preset.value ===
                                    state().subtitleStyle.sizePercent
                                "
                                [class.player-settings__seg-item--selected]="
                                    preset.value ===
                                    state().subtitleStyle.sizePercent
                                "
                                (click)="
                                    subtitleSettings().setSize(preset.value)
                                "
                            >
                                {{ preset.label }}
                            </button>
                        }
                    </div>
                    <h4
                        class="player-settings__subheading"
                        [id]="headingId('subtitle-color')"
                    >
                        {{ 'EMBEDDED_MPV.PLAYER.SUBTITLE_COLOR' | translate }}
                    </h4>
                    <div
                        class="player-settings__swatches"
                        appSettingsRadioGroup
                        [attr.aria-labelledby]="headingId('subtitle-color')"
                    >
                        @for (
                            preset of subtitleColorPresets;
                            track preset.label
                        ) {
                            <button
                                type="button"
                                class="player-settings__swatch"
                                [appSettingsRadio]="
                                    preset.value === state().subtitleStyle.color
                                "
                                [class.player-settings__swatch--default]="
                                    preset.value === null
                                "
                                [class.player-settings__swatch--selected]="
                                    preset.value === state().subtitleStyle.color
                                "
                                [style.--swatch-color]="preset.value"
                                [attr.aria-label]="preset.label | translate"
                                [matTooltip]="preset.label | translate"
                                (click)="
                                    subtitleSettings().setColor(preset.value)
                                "
                            ></button>
                        }
                    </div>
                </div>
            }
        </section>
    }

    @if (groups().quality) {
        <section
            class="player-settings__group"
            [class.player-settings__group--focused]="isFocused('quality')"
            data-group="quality"
            data-test-id="player-settings-quality"
        >
            <h3 class="player-settings__heading" [id]="headingId('quality')">
                <span
                    class="player-settings__dot player-settings__dot--violet"
                    aria-hidden="true"
                ></span>
                {{ 'EMBEDDED_MPV.PLAYER.QUALITY' | translate }}
            </h3>
            <div
                class="player-settings__options"
                appSettingsRadioGroup
                [attr.aria-labelledby]="headingId('quality')"
            >
                <button
                    type="button"
                    class="player-settings__option player-settings__option--default"
                    [appSettingsRadio]="state().qualityAutoEnabled"
                    [class.player-settings__option--selected]="
                        state().qualityAutoEnabled
                    "
                    (click)="selection().qualityLevel(-1)"
                >
                    <span>{{
                        'EMBEDDED_MPV.PLAYER.QUALITY_AUTO' | translate
                    }}</span>
                    @if (state().qualityAutoEnabled) {
                        <mat-icon>check</mat-icon>
                    }
                </button>
                @for (level of state().qualityLevels; track level.id) {
                    <button
                        type="button"
                        class="player-settings__option"
                        [appSettingsRadio]="level.selected"
                        [class.player-settings__option--selected]="
                            level.selected
                        "
                        (click)="selection().qualityLevel(level.id)"
                    >
                        <span>{{ level.label }}</span>
                        @if (level.selected) {
                            <mat-icon>check</mat-icon>
                        }
                    </button>
                }
            </div>
        </section>
    }

    @if (groups().speed) {
        <section
            class="player-settings__group"
            [class.player-settings__group--focused]="isFocused('speed')"
            data-group="speed"
            data-test-id="player-settings-speed"
        >
            <h3 class="player-settings__heading" [id]="headingId('speed')">
                <span
                    class="player-settings__dot player-settings__dot--violet"
                    aria-hidden="true"
                ></span>
                {{ 'EMBEDDED_MPV.PLAYER.PLAYBACK_SPEED' | translate }}
            </h3>
            <div
                class="player-settings__seg"
                appSettingsRadioGroup
                [attr.aria-labelledby]="headingId('speed')"
            >
                @for (preset of state().speedPresets; track preset.value) {
                    <button
                        type="button"
                        class="player-settings__seg-item"
                        [appSettingsRadio]="
                            preset.value === state().playbackSpeed
                        "
                        [class.player-settings__seg-item--default]="
                            preset.value === 1
                        "
                        [class.player-settings__seg-item--selected]="
                            preset.value === state().playbackSpeed
                        "
                        (click)="selection().speed(preset.value)"
                    >
                        {{ preset.label }}
                    </button>
                }
            </div>
        </section>
    }

    @if (groups().aspect) {
        <section
            class="player-settings__group"
            [class.player-settings__group--focused]="isFocused('aspect')"
            data-group="aspect"
            data-test-id="player-settings-aspect"
        >
            <h3 class="player-settings__heading" [id]="headingId('aspect')">
                <span
                    class="player-settings__dot player-settings__dot--neutral"
                    aria-hidden="true"
                ></span>
                {{ 'EMBEDDED_MPV.PLAYER.ASPECT_RATIO' | translate }}
            </h3>
            <div
                class="player-settings__seg"
                appSettingsRadioGroup
                [attr.aria-labelledby]="headingId('aspect')"
            >
                @for (preset of state().aspectPresets; track preset.value) {
                    <button
                        type="button"
                        class="player-settings__seg-item"
                        [appSettingsRadio]="
                            preset.value === state().aspectRatio
                        "
                        [class.player-settings__seg-item--default]="
                            preset.value === defaultAspect()
                        "
                        [class.player-settings__seg-item--selected]="
                            preset.value === state().aspectRatio
                        "
                        (click)="selection().aspect(preset.value)"
                    >
                        {{
                            preset.value === 'no'
                                ? ('EMBEDDED_MPV.PLAYER.ASPECT_DEFAULT'
                                  | translate)
                                : preset.label
                        }}
                    </button>
                }
            </div>
        </section>
    }
</div>