<div class="flex flex-col w-full">
    <app-page-header>
        <ng-template appPageHeaderLeft>
            <div>
                <app-page-breadcrumb [items]="breadcrumbItems()" />
                <p class="text-sm text-[var(--p-text-muted-color)]">{{ "preferences.subtitle" | transloco }}</p>
            </div>
        </ng-template>
    </app-page-header>

    <div class="max-w-3xl mx-auto w-full">
        <div class="preferences-grid">
            <p-card class="shadow-sm border border-surface-200 dark:border-surface-700 surface-card">
                <div class="flex flex-col gap-6">
                    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
                        <div class="flex flex-col gap-1">
                            <h2 class="text-lg font-semibold text-[var(--p-text-color)]">{{ "preferences.language.heading" | transloco }}</h2>
                            <p class="text-sm text-[var(--p-text-muted-color)]">{{ "preferences.language.description" | transloco }}</p>
                        </div>
                        <div class="flex items-center gap-3">
                            @if (saveState() === "saved") {
                            <span class="text-sm text-emerald-600">{{ "preferences.status.saved" | transloco }}</span>
                            } @if (saveState() === "error") {
                            <span class="text-sm text-red-600">{{ "preferences.status.saveFailed" | transloco }}</span>
                            }
                            <p-button [label]="'preferences.actions.saveChanges' | transloco" icon="pi pi-save" [loading]="isSaving()" [disabled]="!canSave()" (onClick)="save()" />
                        </div>
                    </div>

                    @if (loadError(); as loadErrorKey) {
                    <div class="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{{ loadErrorKey | transloco }}</div>
                    }

                    <div class="grid gap-5">
                        <div class="flex flex-col gap-2">
                            <label for="default-locale" class="text-sm font-medium text-[var(--p-text-color)]">{{ "preferences.language.defaultLabel" | transloco }}</label>
                            <p-select
                                inputId="default-locale"
                                [options]="languageOptions()"
                                [formControl]="preferencesForm.defaultLocale().control()"
                                (onChange)="onLocaleChange($event.value)"
                                optionLabel="label"
                                [placeholder]="'preferences.language.defaultPlaceholder' | transloco"
                                class="w-full"
                            >
                                <ng-template #selectedItem let-selectedOption>
                                    @if (selectedOption) {
                                    <div class="flex items-center gap-2">
                                        <img [ngSrc]="selectedOption.flagUrl" class="size-4 shrink-0 rounded-full" width="16" height="16" alt="" />
                                        <span class="font-medium text-[var(--p-text-color)]">{{ selectedOption.label }}</span>
                                        @if (selectedOption.direction === "rtl") {
                                        <span class="text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-[var(--p-surface-200)] text-[var(--p-text-muted-color)]"> {{ "preferences.language.rtlBadge" | transloco }} </span>
                                        }
                                    </div>
                                    }
                                </ng-template>
                                <ng-template #item let-option>
                                    <div class="flex items-center gap-3">
                                        <img [ngSrc]="option.flagUrl" class="size-4 shrink-0 rounded-full" width="16" height="16" alt="" />
                                        <div class="flex flex-col">
                                            <span class="font-medium text-[var(--p-text-color)]">{{ option.label }}</span>
                                            <span class="text-xs text-[var(--p-text-muted-color)]">{{ option.value }}</span>
                                        </div>
                                        @if (option.direction === "rtl") {
                                        <span class="ml-auto text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-[var(--p-surface-200)] text-[var(--p-text-muted-color)]"> {{ "preferences.language.rtlBadge" | transloco }} </span>
                                        }
                                    </div>
                                </ng-template>
                            </p-select>
                            <p class="text-xs text-[var(--p-text-muted-color)]">{{ "preferences.language.defaultHint" | transloco }}</p>
                        </div>
                    </div>
                </div>
            </p-card>
        </div>
    </div>
</div>
