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

<div
    class="settings-container"
    data-test-id="settings-container"
    [class.dialog-mode]="isDialog"
>
    <form
        [formGroup]="settingsForm"
        (ngSubmit)="onSubmit()"
        class="settings-layout"
        novalidate
    >
        @if (!isDialog) {
            <header
                class="settings-page-header"
                data-test-id="settings-page-header"
            >
                <div class="settings-page-header__text">
                    <h1 data-test-id="settings-page-title">
                        {{ 'SETTINGS.TITLE' | translate }}
                    </h1>
                    <p>{{ 'SETTINGS.GENERAL_SUBTITLE' | translate }}</p>
                </div>
            </header>
        }

        <div class="settings-content">
            <section
                class="settings-group"
                [class.settings-group--active]="activeSection() === 'general'"
                id="general"
            >
                <header class="settings-group__header">
                    <div class="settings-group__header-icon">
                        <mat-icon>settings</mat-icon>
                    </div>
                    <div class="settings-group__header-text">
                        <h3>{{ 'SETTINGS.GENERAL' | translate }}</h3>
                        <p>{{ 'SETTINGS.GENERAL_SUBTITLE' | translate }}</p>
                    </div>
                </header>

                <div class="setting-item">
                    <div class="setting-item__meta">
                        <h4>{{ 'SETTINGS.LANGUAGE' | translate }}</h4>
                        <p>{{ 'SETTINGS.LANGUAGE_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="language"
                                data-test-id="select-language"
                            >
                                @for (
                                    language of languageEnum | keyvalue;
                                    track language
                                ) {
                                    <mat-option
                                        [value]="language.value"
                                        [attr.data-test-id]="language.value"
                                        >{{
                                            'LANGUAGES.' + language.key
                                                | translate
                                        }}</mat-option
                                    >
                                }
                            </mat-select>
                        </mat-form-field>
                    </div>
                </div>

                <div class="setting-item setting-item--full-control">
                    <div class="setting-item__meta">
                        <h4>{{ 'SETTINGS.THEME' | translate }}</h4>
                        <p>{{ 'SETTINGS.THEME_DESCRIPTION' | translate }}</p>
                    </div>
                    <div class="setting-item__control">
                        <div
                            class="theme-switcher"
                            role="radiogroup"
                            [attr.aria-label]="'SETTINGS.THEME' | translate"
                            data-test-id="select-theme"
                        >
                            @for (
                                themeOption of themeOptions;
                                track themeOption.value
                            ) {
                                <button
                                    type="button"
                                    class="theme-switcher__option"
                                    [class.theme-switcher__option--selected]="
                                        settingsForm.value.theme ===
                                        themeOption.value
                                    "
                                    [attr.aria-checked]="
                                        settingsForm.value.theme ===
                                        themeOption.value
                                    "
                                    [attr.data-test-id]="themeOption.value"
                                    role="radio"
                                    (click)="selectTheme(themeOption.value)"
                                >
                                    <mat-icon>{{ themeOption.icon }}</mat-icon>
                                    <span>{{
                                        themeOption.labelKey | translate
                                    }}</span>
                                </button>
                            }
                        </div>
                    </div>
                </div>

                <div class="setting-item">
                    <div class="setting-item__meta">
                        <h4>{{ 'SETTINGS.SHOW_DASHBOARD' | translate }}</h4>
                        <p>
                            {{
                                'SETTINGS.SHOW_DASHBOARD_DESCRIPTION'
                                    | translate
                            }}
                        </p>
                    </div>
                    <div class="setting-item__control setting-item__toggle">
                        <mat-checkbox
                            formControlName="showDashboard"
                            data-test-id="toggle-show-dashboard"
                        ></mat-checkbox>
                    </div>
                </div>

                <div class="setting-item">
                    <div class="setting-item__meta">
                        <h4>{{ 'SETTINGS.STARTUP_BEHAVIOR' | translate }}</h4>
                        <p>
                            {{
                                'SETTINGS.STARTUP_BEHAVIOR_DESCRIPTION'
                                    | translate
                            }}
                        </p>
                    </div>
                    <div class="setting-item__control">
                        <mat-form-field
                            appearance="outline"
                            subscriptSizing="dynamic"
                        >
                            <mat-label>{{
                                'SETTINGS.STARTUP_BEHAVIOR' | translate
                            }}</mat-label>
                            <mat-select
                                formControlName="startupBehavior"
                                data-test-id="select-startup-behavior"
                            >
                                @for (
                                    option of startupBehaviorOptions;
                                    track option.value
                                ) {
                                    <mat-option
                                        [value]="option.value"
                                        [attr.data-test-id]="option.value"
                                    >
                                        {{ option.labelKey | translate }}
                                    </mat-option>
                                }
                            </mat-select>
                        </mat-form-field>
                    </div>
                </div>

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

            <section
                class="settings-group"
                [class.settings-group--active]="activeSection() === 'playback'"
                id="playback"
            >
                <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 (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>
                }

                @if (settingsForm.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>
                        </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">
                        <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 (settingsForm.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>
                }
            </section>

            @if (isDesktop) {
                <section
                    class="settings-group"
                    [class.settings-group--active]="activeSection() === 'epg'"
                    id="epg"
                >
                    <header class="settings-group__header">
                        <div class="settings-group__header-icon">
                            <mat-icon>list_alt</mat-icon>
                        </div>
                        <div class="settings-group__header-text">
                            <h3>{{ 'SETTINGS.EPG_SOURCES' | translate }}</h3>
                            <p>
                                {{
                                    'SETTINGS.EPG_SOURCES_DESCRIPTION'
                                        | translate
                                }}
                            </p>
                        </div>
                    </header>

                    <div class="setting-item setting-item--full-control">
                        <div class="setting-item__control">
                            <ng-container formArrayName="epgUrl">
                                @if (epgUrl.length === 0) {
                                    <div
                                        class="epg-sources-empty"
                                        data-test-id="epg-sources-empty"
                                    >
                                        <mat-icon
                                            class="epg-sources-empty__icon"
                                            >event_busy</mat-icon
                                        >
                                        <h4 class="epg-sources-empty__title">
                                            {{
                                                'SETTINGS.EPG_EMPTY_TITLE'
                                                    | translate
                                            }}
                                        </h4>
                                        <p class="epg-sources-empty__hint">
                                            {{
                                                'SETTINGS.EPG_EMPTY_HINT'
                                                    | translate
                                            }}
                                        </p>
                                    </div>
                                } @else {
                                    <div class="epg-sources">
                                        @for (
                                            _ of epgUrl.controls;
                                            track _;
                                            let i = $index
                                        ) {
                                            <div class="epg-source-row">
                                                <mat-form-field
                                                    appearance="outline"
                                                    subscriptSizing="dynamic"
                                                    class="w-full"
                                                >
                                                    <mat-label>{{
                                                        'SETTINGS.EPG_URL_PLACEHOLDER'
                                                            | translate
                                                    }}</mat-label>
                                                    <input
                                                        matInput
                                                        type="url"
                                                        [formControlName]="i"
                                                        #epgField
                                                    />
                                                    <mat-error>{{
                                                        'SETTINGS.EPG_URL_ERROR'
                                                            | translate
                                                    }}</mat-error>
                                                </mat-form-field>
                                                @if (epgField.value) {
                                                    <app-epg-source-status
                                                        [url]="epgField.value"
                                                    />
                                                }
                                                <button
                                                    mat-icon-button
                                                    [matTooltip]="
                                                        'SETTINGS.REFRESH_EPG'
                                                            | translate
                                                    "
                                                    type="button"
                                                    [disabled]="
                                                        epgField.value === ''
                                                    "
                                                    (click)="
                                                        refreshEpg(
                                                            epgUrl.value[i]
                                                        )
                                                    "
                                                >
                                                    <mat-icon>refresh</mat-icon>
                                                </button>
                                                <button
                                                    mat-icon-button
                                                    [matTooltip]="
                                                        'SETTINGS.REMOVE_EPG_SOURCE'
                                                            | translate
                                                    "
                                                    type="button"
                                                    (click)="removeEpgSource(i)"
                                                >
                                                    <mat-icon>remove</mat-icon>
                                                </button>
                                            </div>
                                        }
                                    </div>
                                }
                            </ng-container>
                        </div>
                    </div>

                    <footer class="settings-group__footer">
                        <div class="inline-actions">
                            <button
                                mat-button
                                type="button"
                                (click)="addEpgSource()"
                            >
                                <mat-icon>add</mat-icon>
                                {{ 'SETTINGS.ADD_EPG_SOURCE' | translate }}
                            </button>
                            <button
                                mat-button
                                type="button"
                                [disabled]="
                                    epgUrl.length === 0 || isClearingEpgData()
                                "
                                (click)="refreshAllEpg()"
                            >
                                <mat-icon>refresh</mat-icon>
                                {{ 'SETTINGS.REFRESH_ALL_EPG' | translate }}
                            </button>
                            <button
                                mat-button
                                color="warn"
                                type="button"
                                [disabled]="isClearingEpgData()"
                                (click)="clearEpgData()"
                            >
                                @if (isClearingEpgData()) {
                                    <mat-progress-spinner
                                        class="button-spinner"
                                        diameter="16"
                                        mode="indeterminate"
                                    />
                                    {{
                                        'SETTINGS.CLEARING_EPG_DATA' | translate
                                    }}
                                } @else {
                                    {{ 'SETTINGS.CLEAR_EPG_DATA' | translate }}
                                }
                            </button>
                        </div>
                    </footer>
                </section>
            }

            @if (isDesktop) {
                <section
                    class="settings-group"
                    [class.settings-group--active]="
                        activeSection() === 'remote-control'
                    "
                    id="remote-control"
                >
                    <header class="settings-group__header">
                        <div class="settings-group__header-icon">
                            <mat-icon>settings_remote</mat-icon>
                        </div>
                        <div class="settings-group__header-text">
                            <h3>{{ 'SETTINGS.REMOTE_CONTROL' | translate }}</h3>
                            <p>
                                {{
                                    'SETTINGS.REMOTE_CONTROL_DESCRIPTION'
                                        | translate
                                }}
                            </p>
                        </div>
                    </header>

                    <div class="setting-item">
                        <div class="setting-item__meta">
                            <h4>{{ 'SETTINGS.REMOTE_CONTROL' | translate }}</h4>
                            <p>
                                {{
                                    'SETTINGS.REMOTE_CONTROL_DESCRIPTION'
                                        | translate
                                }}
                            </p>
                        </div>
                        <div class="setting-item__control setting-item__toggle">
                            <mat-checkbox
                                formControlName="remoteControl"
                                data-test-id="remote-control-enabled"
                            ></mat-checkbox>
                        </div>
                    </div>

                    @if (settingsForm.value.remoteControl === true) {
                        <div class="setting-item">
                            <div class="setting-item__meta">
                                <h4>
                                    {{
                                        'SETTINGS.REMOTE_CONTROL_PORT'
                                            | translate
                                    }}
                                </h4>
                                <p>
                                    {{
                                        'SETTINGS.REMOTE_CONTROL_PORT_DESCRIPTION'
                                            | translate
                                    }}
                                </p>
                            </div>
                            <div class="setting-item__control">
                                <mat-form-field
                                    appearance="outline"
                                    subscriptSizing="dynamic"
                                >
                                    <mat-label>{{
                                        'SETTINGS.PORT_RANGE_LABEL' | translate
                                    }}</mat-label>
                                    <input
                                        matInput
                                        type="number"
                                        id="remoteControlPort"
                                        data-test-id="remote-control-port"
                                        formControlName="remoteControlPort"
                                        min="1"
                                        max="65535"
                                        step="1"
                                    />
                                    @if (
                                        settingsForm
                                            .get('remoteControlPort')
                                            ?.hasError('required')
                                    ) {
                                        <mat-error>{{
                                            'SETTINGS.PORT_REQUIRED' | translate
                                        }}</mat-error>
                                    }
                                    @if (
                                        settingsForm
                                            .get('remoteControlPort')
                                            ?.hasError('min')
                                    ) {
                                        <mat-error>{{
                                            'SETTINGS.PORT_MIN' | translate
                                        }}</mat-error>
                                    }
                                    @if (
                                        settingsForm
                                            .get('remoteControlPort')
                                            ?.hasError('max')
                                    ) {
                                        <mat-error>{{
                                            'SETTINGS.PORT_MAX' | translate
                                        }}</mat-error>
                                    }
                                    @if (
                                        settingsForm
                                            .get('remoteControlPort')
                                            ?.hasError('pattern')
                                    ) {
                                        <mat-error>{{
                                            'SETTINGS.PORT_PATTERN' | translate
                                        }}</mat-error>
                                    }
                                </mat-form-field>
                            </div>
                        </div>

                        @if (localIpAddresses().length > 0) {
                            <div class="setting-item">
                                <div class="setting-item__meta">
                                    <h4>
                                        {{
                                            'SETTINGS.REMOTE_CONTROL_URL'
                                                | translate
                                        }}
                                    </h4>
                                    <p>
                                        {{
                                            'SETTINGS.REMOTE_CONTROL_URL_DESCRIPTION'
                                                | translate
                                        }}
                                    </p>
                                </div>
                                <div
                                    class="setting-item__control remote-control-urls"
                                >
                                    @for (ip of localIpAddresses(); track ip) {
                                        <div class="remote-control-url-item">
                                            <div class="url-row">
                                                <a
                                                    [href]="
                                                        'http://' +
                                                        ip +
                                                        ':' +
                                                        settingsForm.value
                                                            .remoteControlPort
                                                    "
                                                    target="_blank"
                                                    class="remote-control-url"
                                                >
                                                    http://{{ ip }}:{{
                                                        settingsForm.value
                                                            .remoteControlPort
                                                    }}
                                                </a>
                                                <button
                                                    mat-icon-button
                                                    type="button"
                                                    (click)="toggleQrCode(ip)"
                                                    [matTooltip]="
                                                        'SETTINGS.SHOW_QR_CODE'
                                                            | translate
                                                    "
                                                >
                                                    <mat-icon
                                                        >qr_code_2</mat-icon
                                                    >
                                                </button>
                                            </div>
                                            @if (visibleQrCodeIp() === ip) {
                                                <div class="qr-code-container">
                                                    <qrcode
                                                        [qrdata]="
                                                            'http://' +
                                                            ip +
                                                            ':' +
                                                            settingsForm.value
                                                                .remoteControlPort
                                                        "
                                                        [width]="150"
                                                        errorCorrectionLevel="M"
                                                    ></qrcode>
                                                </div>
                                            }
                                        </div>
                                    }
                                </div>
                            </div>
                        }
                    }
                </section>
            }

            <section
                class="settings-group"
                [class.settings-group--active]="activeSection() === 'backup'"
                id="backup"
            >
                <header class="settings-group__header">
                    <div class="settings-group__header-icon">
                        <mat-icon>backup</mat-icon>
                    </div>
                    <div class="settings-group__header-text">
                        <h3>{{ 'SETTINGS.BACKUP' | translate }}</h3>
                        <p>
                            {{ 'SETTINGS.BACKUP_DESCRIPTION' | translate }}
                        </p>
                    </div>
                </header>

                <div class="setting-item">
                    <div class="setting-item__meta">
                        <h4>{{ 'SETTINGS.IMPORT_EXPORT_DATA' | translate }}</h4>
                        <p>
                            {{
                                'SETTINGS.IMPORT_EXPORT_DATA_DESCRIPTION'
                                    | translate
                            }}
                        </p>
                    </div>
                    <div class="setting-item__control inline-actions">
                        <button
                            mat-button
                            class="inline-actions__button"
                            [disabled]="
                                isRemovingAllPlaylists() || isExportingData()
                            "
                            (click)="
                                $event.preventDefault();
                                $event.stopPropagation();
                                importData()
                            "
                        >
                            {{ 'SETTINGS.IMPORT_DATA' | translate }}
                        </button>
                        <button
                            mat-button
                            class="inline-actions__button"
                            [class.inline-actions__button--busy]="
                                isExportingData()
                            "
                            [disabled]="
                                isRemovingAllPlaylists() || isExportingData()
                            "
                            [attr.aria-busy]="isExportingData()"
                            (click)="
                                $event.preventDefault();
                                $event.stopPropagation();
                                exportData()
                            "
                        >
                            @if (isExportingData()) {
                                <mat-progress-spinner
                                    class="button-spinner"
                                    diameter="16"
                                    mode="indeterminate"
                                />
                                <span class="inline-actions__label">{{
                                    'SETTINGS.EXPORTING_DATA' | translate
                                }}</span>
                            } @else {
                                <span class="inline-actions__label">{{
                                    'SETTINGS.EXPORT_DATA' | translate
                                }}</span>
                            }
                        </button>
                    </div>
                </div>

                @if (isPwa) {
                    <div class="settings-note">
                        {{ 'SETTINGS.EPG_NOTE' | translate }}
                        &nbsp;<a
                            href="https://github.com/4gray/iptvnator/releases"
                            target="_blank"
                            rel="noreferrer"
                            >{{ 'SETTINGS.EPG_NOTE_URL_TEXT' | translate }}</a
                        >
                    </div>
                }
            </section>

            <section
                class="settings-group"
                [class.settings-group--active]="activeSection() === 'reset'"
                id="reset"
            >
                <header class="settings-group__header">
                    <div class="settings-group__header-icon">
                        <mat-icon>delete_sweep</mat-icon>
                    </div>
                    <div class="settings-group__header-text">
                        <h3>{{ 'SETTINGS.RESET' | translate }}</h3>
                        <p>{{ 'SETTINGS.RESET_DESCRIPTION' | translate }}</p>
                    </div>
                </header>

                <div class="setting-item danger-zone">
                    <div class="danger-zone__header">
                        <div class="setting-item__meta">
                            <h4>{{ 'SETTINGS.REMOVE_ALL' | translate }}</h4>
                            <p>
                                {{
                                    'SETTINGS.REMOVE_ALL_DESCRIPTION'
                                        | translate
                                }}
                            </p>
                        </div>
                        <button
                            mat-button
                            class="danger-zone__button"
                            [class.danger-zone__button--busy]="
                                isRemovingAllPlaylists()
                            "
                            [disabled]="!canRemoveAllPlaylists()"
                            [attr.aria-busy]="isRemovingAllPlaylists()"
                            (click)="
                                $event.preventDefault();
                                $event.stopPropagation();
                                removeAll()
                            "
                            color="warn"
                        >
                            @if (isRemovingAllPlaylists()) {
                                <mat-progress-spinner
                                    class="button-spinner"
                                    diameter="16"
                                    mode="indeterminate"
                                />
                                <span class="inline-actions__label">{{
                                    'SETTINGS.REMOVE_ALL_IN_PROGRESS'
                                        | translate
                                }}</span>
                            } @else {
                                <span class="inline-actions__label">{{
                                    'SETTINGS.REMOVE_ALL_BUTTON' | translate
                                }}</span>
                            }
                        </button>
                    </div>
                    <div class="danger-zone__summary" aria-live="polite">
                        <span class="danger-zone__summary-pill">
                            <mat-icon class="danger-zone__summary-icon"
                                >folder_open</mat-icon
                            >
                            <span class="danger-zone__summary-label">{{
                                'HOME.PLAYLIST_TYPES.M3U' | translate
                            }}</span>
                            <span class="danger-zone__summary-count">{{
                                playlistDeleteSummary().m3u
                            }}</span>
                        </span>
                        <span class="danger-zone__summary-pill">
                            <mat-icon class="danger-zone__summary-icon"
                                >cloud</mat-icon
                            >
                            <span class="danger-zone__summary-label">{{
                                'HOME.PLAYLIST_TYPES.XTREAM' | translate
                            }}</span>
                            <span class="danger-zone__summary-count">{{
                                playlistDeleteSummary().xtream
                            }}</span>
                        </span>
                        <span class="danger-zone__summary-pill">
                            <mat-icon class="danger-zone__summary-icon"
                                >cast</mat-icon
                            >
                            <span class="danger-zone__summary-label">{{
                                'HOME.PLAYLIST_TYPES.STALKER' | translate
                            }}</span>
                            <span class="danger-zone__summary-count">{{
                                playlistDeleteSummary().stalker
                            }}</span>
                        </span>
                    </div>
                    @if (removeAllProgressLabel(); as progressLabel) {
                        <p class="danger-zone__progress">
                            {{ progressLabel }}
                        </p>
                    }
                </div>
            </section>

            <section
                class="settings-group"
                [class.settings-group--active]="activeSection() === 'about'"
                id="about"
            >
                <header class="settings-group__header">
                    <div class="settings-group__header-icon">
                        <mat-icon>info</mat-icon>
                    </div>
                    <div class="settings-group__header-text">
                        <h3>{{ 'SETTINGS.ABOUT' | translate }}</h3>
                        <p>{{ 'SETTINGS.ABOUT_SUBTITLE' | translate }}</p>
                    </div>
                </header>

                <div class="setting-item">
                    <div class="setting-item__meta">
                        <h4>{{ 'SETTINGS.VERSION' | translate }}</h4>
                        <p>{{ 'SETTINGS.VERSION_DESCRIPTION' | translate }}</p>
                    </div>
                    <div class="setting-item__control version-block">
                        <span>{{ version }}</span>
                        <small>{{ updateMessage }}</small>
                    </div>
                </div>

                @if (isDesktop) {
                    <div class="settings-note">
                        <strong>{{
                            'SETTINGS.EMBEDDED_MPV_NOTICE_TITLE' | translate
                        }}</strong>
                        <span>{{
                            'SETTINGS.EMBEDDED_MPV_NOTICE_DESCRIPTION'
                                | translate
                        }}</span>
                    </div>
                }

                <div class="setting-item setting-item--full-control">
                    <div class="setting-item__meta">
                        <h4>{{ 'SETTINGS.COMMUNITY' | translate }}</h4>
                        <p>
                            {{ 'SETTINGS.COMMUNITY_DESCRIPTION' | translate }}
                        </p>
                    </div>
                    <div class="setting-item__control">
                        <div class="link-cards">
                            <a
                                class="link-card link-card--github"
                                href="https://github.com/4gray/iptvnator"
                                target="_blank"
                                rel="noreferrer noopener"
                                data-test-id="link-github"
                            >
                                <span class="link-card__glyph">
                                    <svg
                                        viewBox="0 0 24 24"
                                        aria-hidden="true"
                                        focusable="false"
                                    >
                                        <path
                                            fill="currentColor"
                                            d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.6.112.793-.26.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.52 11.52 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.565 21.796 24 17.3 24 12c0-6.627-5.373-12-12-12z"
                                        />
                                    </svg>
                                </span>
                                <span class="link-card__text">
                                    <strong>GitHub</strong>
                                    <span>{{
                                        'SETTINGS.LINK_GITHUB_DESCRIPTION'
                                            | translate
                                    }}</span>
                                </span>
                                <mat-icon class="link-card__arrow"
                                    >arrow_outward</mat-icon
                                >
                            </a>
                            <a
                                class="link-card link-card--blog"
                                href="https://4gray.github.io/iptvnator/"
                                target="_blank"
                                rel="noreferrer noopener"
                                data-test-id="link-blog"
                            >
                                <span class="link-card__glyph">
                                    <mat-icon>menu_book</mat-icon>
                                </span>
                                <span class="link-card__text">
                                    <strong>{{
                                        'SETTINGS.LINK_BLOG' | translate
                                    }}</strong>
                                    <span>{{
                                        'SETTINGS.LINK_BLOG_DESCRIPTION'
                                            | translate
                                    }}</span>
                                </span>
                                <mat-icon class="link-card__arrow"
                                    >arrow_outward</mat-icon
                                >
                            </a>
                            <a
                                class="link-card link-card--telegram"
                                href="https://t.me/iptvnator"
                                target="_blank"
                                rel="noreferrer noopener"
                                data-test-id="link-telegram"
                            >
                                <span class="link-card__glyph">
                                    <svg
                                        viewBox="0 0 24 24"
                                        aria-hidden="true"
                                        focusable="false"
                                    >
                                        <path
                                            fill="currentColor"
                                            d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"
                                        />
                                    </svg>
                                </span>
                                <span class="link-card__text">
                                    <strong>Telegram</strong>
                                    <span>{{
                                        'SETTINGS.LINK_TELEGRAM_DESCRIPTION'
                                            | translate
                                    }}</span>
                                </span>
                                <mat-icon class="link-card__arrow"
                                    >arrow_outward</mat-icon
                                >
                            </a>
                        </div>
                    </div>
                </div>

                <div class="setting-item setting-item--full-control">
                    <div class="support-card" data-test-id="support-card">
                        <div class="support-card__intro">
                            <div class="support-card__emblem">
                                <mat-icon>favorite</mat-icon>
                            </div>
                            <div class="support-card__copy">
                                <h4>
                                    {{ 'SETTINGS.SUPPORT_TITLE' | translate }}
                                </h4>
                                <p>
                                    {{
                                        'SETTINGS.SUPPORT_DESCRIPTION'
                                            | translate
                                    }}
                                </p>
                            </div>
                        </div>
                        <div class="support-card__actions">
                            <a
                                class="support-btn support-btn--sponsors"
                                href="https://github.com/sponsors/4gray"
                                target="_blank"
                                rel="noreferrer noopener"
                                data-test-id="support-sponsors"
                            >
                                <span class="support-btn__glyph">
                                    <svg
                                        viewBox="0 0 24 24"
                                        aria-hidden="true"
                                        focusable="false"
                                    >
                                        <path
                                            fill="currentColor"
                                            d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
                                        />
                                    </svg>
                                </span>
                                <span class="support-btn__text">
                                    <strong>GitHub Sponsors</strong>
                                    <small>{{
                                        'SETTINGS.SUPPORT_SPONSORS_HINT'
                                            | translate
                                    }}</small>
                                </span>
                            </a>
                            <a
                                class="support-btn support-btn--kofi"
                                href="https://ko-fi.com/4gray"
                                target="_blank"
                                rel="noreferrer noopener"
                                data-test-id="support-kofi"
                            >
                                <span class="support-btn__glyph">
                                    <mat-icon>local_cafe</mat-icon>
                                </span>
                                <span class="support-btn__text">
                                    <strong>Ko-fi</strong>
                                    <small>{{
                                        'SETTINGS.SUPPORT_KOFI_HINT' | translate
                                    }}</small>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </section>

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