iptvnator/apps/web/src/app/settings/settings-general-section.component.html

<section
    class="settings-group"
    [class.settings-group--active]="activeSection() === 'general'"
    id="general"
    [formGroup]="form()"
>
    <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]="
                            form().value.theme === themeOption.value
                        "
                        [attr.aria-checked]="
                            form().value.theme === themeOption.value
                        "
                        [attr.data-test-id]="themeOption.value"
                        role="radio"
                        (click)="selectTheme.emit(themeOption.value)"
                    >
                        <mat-icon>{{ themeOption.icon }}</mat-icon>
                        <span>{{ themeOption.labelKey | translate }}</span>
                    </button>
                }
            </div>
        </div>
    </div>

    <div class="setting-item setting-item--full-control">
        <div class="setting-item__meta">
            <h4>{{ 'SETTINGS.COVER_SIZE' | translate }}</h4>
            <p>{{ 'SETTINGS.COVER_SIZE_DESCRIPTION' | translate }}</p>
        </div>
        <div class="setting-item__control">
            <div
                class="theme-switcher"
                role="radiogroup"
                [attr.aria-label]="'SETTINGS.COVER_SIZE' | translate"
                data-test-id="select-cover-size"
            >
                @for (option of coverSizeOptions(); track option.value) {
                    <button
                        type="button"
                        class="theme-switcher__option"
                        [class.theme-switcher__option--selected]="
                            form().value.coverSize === option.value
                        "
                        [attr.aria-checked]="
                            form().value.coverSize === option.value
                        "
                        [attr.data-test-id]="'cover-size-' + option.value"
                        role="radio"
                        (click)="selectCoverSize.emit(option.value)"
                    >
                        <mat-icon>{{ option.icon }}</mat-icon>
                        <span>{{ option.labelKey | translate }}</span>
                    </button>
                }
            </div>
        </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>

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