<section
    class="settings-group"
    [class.settings-group--active]="activeSection() === 'playback'"
    id="playback"
    [formGroup]="form()"
>
    <header class="settings-group__header">
        <div class="settings-group__header-icon">
            <mat-icon>play_circle</mat-icon>
        </div>
        <div class="settings-group__header-text">
            <h3>{{ 'SETTINGS.PLAYBACK' | translate }}</h3>
            <p>{{ 'SETTINGS.VIDEO_PLAYER_DESCRIPTION' | translate }}</p>
        </div>
    </header>

    <div class="setting-item">
        <div class="setting-item__meta">
            <h4>{{ 'SETTINGS.VIDEO_PLAYER_LABEL' | translate }}</h4>
            <p>{{ 'SETTINGS.VIDEO_PLAYER_DESCRIPTION' | translate }}</p>
        </div>
        <div class="setting-item__control">
            <mat-form-field appearance="outline" subscriptSizing="dynamic">
                <mat-label>{{
                    'SETTINGS.VIDEO_PLAYER_PLACEHOLDER' | translate
                }}</mat-label>
                <mat-select
                    formControlName="player"
                    data-test-id="select-video-player"
                >
                    @for (player of players(); track player.id) {
                        <mat-option
                            [value]="player.id"
                            [attr.data-test-id]="player.id"
                            >{{ player.labelKey | translate }}
                        </mat-option>
                    }
                </mat-select>
            </mat-form-field>
        </div>
    </div>

    <div class="setting-item">
        <div class="setting-item__meta">
            <h4>{{ 'SETTINGS.STREAM_FORMAT' | translate }}</h4>
            <p>{{ 'SETTINGS.STREAM_FORMAT_DESCRIPTION' | translate }}</p>
        </div>
        <div class="setting-item__control">
            <mat-form-field appearance="outline" subscriptSizing="dynamic">
                <mat-label>{{
                    'SETTINGS.VIDEO_PLAYER_PLACEHOLDER' | translate
                }}</mat-label>
                <mat-select
                    formControlName="streamFormat"
                    data-test-id="select-stream-format"
                >
                    @for (
                        streamFormat of streamFormatEnum() | keyvalue;
                        track streamFormat
                    ) {
                        <mat-option
                            [value]="streamFormat.value"
                            [attr.data-test-id]="streamFormat.value"
                            >{{ streamFormat.value }}
                        </mat-option>
                    }
                </mat-select>
            </mat-form-field>
        </div>
    </div>

    @if (supportsManagedExternalPlayers() && isExternalPlayerSelected()) {
        <div
            class="setting-item"
            data-test-id="external-player-double-click-setting"
        >
            <div class="setting-item__meta">
                <h4>
                    {{
                        'SETTINGS.OPEN_EXTERNAL_PLAYER_ON_DOUBLE_CLICK'
                            | translate
                    }}
                </h4>
                <p>
                    {{
                        'SETTINGS.OPEN_EXTERNAL_PLAYER_ON_DOUBLE_CLICK_DESCRIPTION'
                            | translate
                    }}
                </p>
            </div>
            <div class="setting-item__control setting-item__toggle">
                <mat-checkbox
                    formControlName="openStreamOnDoubleClick"
                ></mat-checkbox>
            </div>
        </div>
    }

    @if (isDesktop()) {
        <div class="setting-item">
            <div class="setting-item__meta">
                <h4>{{ 'SETTINGS.SHOW_EXTERNAL_PLAYBACK_BAR' | translate }}</h4>
                <p>
                    {{
                        'SETTINGS.SHOW_EXTERNAL_PLAYBACK_BAR_DESCRIPTION'
                            | translate
                    }}
                </p>
            </div>
            <div class="setting-item__control setting-item__toggle">
                <mat-checkbox
                    formControlName="showExternalPlaybackBar"
                ></mat-checkbox>
            </div>
        </div>

        <div class="setting-item" data-test-id="recording-folder-setting">
            <div class="setting-item__meta">
                <h4>{{ 'SETTINGS.RECORDING_FOLDER_LABEL' | translate }}</h4>
                <p>
                    {{ 'SETTINGS.RECORDING_FOLDER_DESCRIPTION' | translate }}
                </p>
            </div>
            <div class="setting-item__control">
                <mat-form-field appearance="outline" subscriptSizing="dynamic">
                    <mat-label for="recordingFolder">{{
                        'SETTINGS.RECORDING_FOLDER' | translate
                    }}</mat-label>
                    <input
                        matInput
                        type="text"
                        id="recordingFolder"
                        formControlName="recordingFolder"
                    />
                    <button
                        mat-icon-button
                        matSuffix
                        type="button"
                        [attr.aria-label]="
                            'SETTINGS.RECORDING_FOLDER_SELECT' | translate
                        "
                        (click)="selectRecordingFolder.emit()"
                    >
                        <mat-icon>folder_open</mat-icon>
                    </button>
                </mat-form-field>
            </div>
        </div>
    }

    @if (supportsExternalPlayerPathSettings() && form().value.player === 'mpv') {
        <div class="setting-item">
            <div class="setting-item__meta">
                <h4>{{ 'SETTINGS.MPV_PLAYER_PATH_LABEL' | translate }}</h4>
                <p>
                    {{ 'SETTINGS.MPV_PLAYER_PATH_DESCRIPTION' | translate }}
                </p>
                <p data-test-id="mpv-compatible-player-tip">
                    {{ 'SETTINGS.MPV_COMPATIBLE_PLAYER_TIP' | translate }}
                </p>
            </div>
            <div class="setting-item__control">
                <mat-form-field appearance="outline" subscriptSizing="dynamic">
                    <mat-label for="mpvPlayerPath">{{
                        'SETTINGS.MPV_PLAYER_PATH' | translate
                    }}</mat-label>
                    <input
                        matInput
                        type="text"
                        id="mpvPlayerPath"
                        formControlName="mpvPlayerPath"
                    />
                </mat-form-field>
            </div>
        </div>

        <div
            class="setting-item setting-item--external-player-arguments"
            data-test-id="mpv-player-arguments-setting"
        >
            <div class="setting-item__meta">
                <h4>{{ 'SETTINGS.MPV_PLAYER_ARGUMENTS_LABEL' | translate }}</h4>
                <p>
                    {{
                        'SETTINGS.MPV_PLAYER_ARGUMENTS_DESCRIPTION' | translate
                    }}
                </p>
            </div>
            <div class="setting-item__control">
                <mat-form-field appearance="outline" subscriptSizing="dynamic">
                    <mat-label for="mpvPlayerArguments">{{
                        'SETTINGS.MPV_PLAYER_ARGUMENTS' | translate
                    }}</mat-label>
                    <textarea
                        matInput
                        id="mpvPlayerArguments"
                        formControlName="mpvPlayerArguments"
                        [placeholder]="mpvPlayerArgumentsPlaceholder"
                        rows="3"
                        spellcheck="false"
                        autocomplete="off"
                    ></textarea>
                    <mat-hint>{{
                        'SETTINGS.EXTERNAL_PLAYER_ARGUMENTS_HINT' | translate
                    }}</mat-hint>
                </mat-form-field>
            </div>
        </div>

        <div class="setting-item">
            <div class="setting-item__meta">
                <h4>{{ 'SETTINGS.MPV_REUSE_INSTANCE_LABEL' | translate }}</h4>
                <p>
                    {{ 'SETTINGS.MPV_REUSE_INSTANCE_DESCRIPTION' | translate }}
                </p>
            </div>
            <div class="setting-item__control setting-item__toggle">
                <mat-checkbox formControlName="mpvReuseInstance"></mat-checkbox>
            </div>
        </div>
    }

    @if (supportsExternalPlayerPathSettings() && form().value.player === 'vlc') {
        <div class="setting-item">
            <div class="setting-item__meta">
                <h4>{{ 'SETTINGS.VLC_PLAYER_PATH_LABEL' | translate }}</h4>
                <p>
                    {{ 'SETTINGS.VLC_PLAYER_PATH_DESCRIPTION' | translate }}
                </p>
            </div>
            <div class="setting-item__control">
                <mat-form-field appearance="outline" subscriptSizing="dynamic">
                    <mat-label for="vlcPlayerPath">{{
                        'SETTINGS.VLC_PLAYER_PATH' | translate
                    }}</mat-label>
                    <input
                        matInput
                        type="text"
                        id="vlcPlayerPath"
                        formControlName="vlcPlayerPath"
                    />
                </mat-form-field>
            </div>
        </div>

        <div
            class="setting-item setting-item--external-player-arguments"
            data-test-id="vlc-player-arguments-setting"
        >
            <div class="setting-item__meta">
                <h4>{{ 'SETTINGS.VLC_PLAYER_ARGUMENTS_LABEL' | translate }}</h4>
                <p>
                    {{
                        'SETTINGS.VLC_PLAYER_ARGUMENTS_DESCRIPTION' | translate
                    }}
                </p>
            </div>
            <div class="setting-item__control">
                <mat-form-field appearance="outline" subscriptSizing="dynamic">
                    <mat-label for="vlcPlayerArguments">{{
                        'SETTINGS.VLC_PLAYER_ARGUMENTS' | translate
                    }}</mat-label>
                    <textarea
                        matInput
                        id="vlcPlayerArguments"
                        formControlName="vlcPlayerArguments"
                        [placeholder]="vlcPlayerArgumentsPlaceholder"
                        rows="3"
                        spellcheck="false"
                        autocomplete="off"
                    ></textarea>
                    <mat-hint>{{
                        'SETTINGS.EXTERNAL_PLAYER_ARGUMENTS_HINT' | translate
                    }}</mat-hint>
                </mat-form-field>
            </div>
        </div>

        <div class="setting-item">
            <div class="setting-item__meta">
                <h4>{{ 'SETTINGS.VLC_REUSE_INSTANCE_LABEL' | translate }}</h4>
                <p>
                    {{ 'SETTINGS.VLC_REUSE_INSTANCE_DESCRIPTION' | translate }}
                </p>
            </div>
            <div class="setting-item__control setting-item__toggle">
                <mat-checkbox formControlName="vlcReuseInstance"></mat-checkbox>
            </div>
        </div>
    }
</section>
