@if (isDialog) {
    <h2 mat-dialog-title>{{ 'SETTINGS.GENERAL' | translate }}</h2>
}

<div
    class="settings-container"
    data-test-id="settings-container"
    [class.dialog-mode]="isDialog"
    appSettingsSectionScroll
>
    <form
        [formGroup]="settingsForm"
        (ngSubmit)="onSubmit()"
        class="settings-layout"
        novalidate
    >
        <!-- Page-level "Settings" h1 intentionally removed: the left rail
             already labels the page "Settings" (sg-nav-title), and each
             section below provides its own h3 + subtitle. Stacking another
             h1 in the right pane reproduced the audit's "vertical ladder
             of identical labels" complaint. -->
        @if (!isDialog) {
            <!-- Reserved hook so the page test selector still resolves,
                 even though there's no visible chrome here. -->
            <span
                class="visually-hidden"
                data-test-id="settings-page-header"
            >
                {{ 'SETTINGS.TITLE' | translate }}
            </span>
        }

        <div class="settings-content">
            <app-settings-general-section
                [form]="settingsForm"
                [activeSection]="activeSection()"
                [languageEnum]="languageEnum"
                [themeOptions]="themeOptions"
                [coverSizeOptions]="coverSizeOptions"
                [startupBehaviorOptions]="startupBehaviorOptions"
                (selectTheme)="selectTheme($event)"
                (selectCoverSize)="selectCoverSize($event)"
            />

            <app-settings-playback-section
                [form]="settingsForm"
                [activeSection]="activeSection()"
                [players]="players()"
                [streamFormatEnum]="streamFormatEnum"
                [isDesktop]="isDesktop"
                (selectRecordingFolder)="selectRecordingFolder()"
            />

            @if (isDesktop) {
                <app-settings-epg-section
                    [form]="settingsForm"
                    [activeSection]="activeSection()"
                    [epgUrl]="epgUrl"
                    [isClearingEpgData]="isClearingEpgData()"
                    (refreshEpg)="refreshEpg($event)"
                    (removeEpgSource)="removeEpgSource($event)"
                    (addEpgSource)="addEpgSource()"
                    (refreshAllEpg)="refreshAllEpg()"
                    (clearEpgData)="clearEpgData()"
                />

                <app-settings-remote-control-section
                    [form]="settingsForm"
                    [activeSection]="activeSection()"
                    [localIpAddresses]="localIpAddresses()"
                    [visibleQrCodeIp]="visibleQrCodeIp()"
                    (toggleQrCode)="toggleQrCode($event)"
                />
            }

            <app-settings-backup-section
                [activeSection]="activeSection()"
                [isPwa]="isPwa"
                [isRemovingAllPlaylists]="isRemovingAllPlaylists()"
                [isExportingData]="isExportingData()"
                (importData)="importData()"
                (exportData)="exportData()"
            />

            <app-settings-reset-section
                [activeSection]="activeSection()"
                [isRemovingAllPlaylists]="isRemovingAllPlaylists()"
                [canRemoveAllPlaylists]="canRemoveAllPlaylists()"
                [playlistDeleteSummary]="playlistDeleteSummary()"
                [removeAllProgressLabel]="removeAllProgressLabel()"
                (removeAll)="removeAll()"
            />

            <app-settings-about-section
                [activeSection]="activeSection()"
                [isDesktop]="isDesktop"
                [version]="version"
                [updateMessage]="updateMessage"
            />

            <footer class="action-bar" data-test-id="settings-action-bar">
                @if (isDialog) {
                    <button
                        mat-button
                        type="button"
                        (click)="backToHome()"
                        data-test-id="back-to-home"
                    >
                        <mat-icon>close</mat-icon>
                        {{ 'CLOSE' | translate }}
                    </button>
                }
                <button
                    mat-flat-button
                    type="submit"
                    class="settings-save-button"
                    [disabled]="settingsForm.pristine || !settingsForm.valid"
                    data-test-id="save-settings"
                >
                    <mat-icon>save</mat-icon>
                    {{ 'SETTINGS.SAVE_CHANGES' | translate }}
                </button>
            </footer>
        </div>
    </form>
</div>