{{-- Change Password Modal --}}
<div
    x-show="showPasswordChange"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 z-50 flex animate-fade-in items-center justify-center bg-black/50 p-4 backdrop-blur-sm" x-cloak
    @click.self="showPasswordChange = false"
    @keydown.escape.window="showPasswordChange = false"
    role="dialog" aria-modal="true" aria-labelledby="change-pw-title">
    <div
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="w-full animate-slide-up rounded-2xl border border-border bg-card text-card-foreground shadow-2xl max-w-sm">
        <div class="px-6 py-5">
            <div class="flex flex-col items-center text-center gap-3 py-2">
                <div class="flex h-14 w-14 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-950">
                    <x-heroicon-o-key class="w-7 h-7 text-amber-600 dark:text-amber-400" />
                </div>
                <div>
                    <h3 id="change-pw-title" class="text-base font-semibold text-surface-900 dark:text-surface-100">
                        {{ __('pages/admin/users.changePassword.title') }}
                    </h3>
                    <p class="text-sm text-surface-500 mt-1">
                        {{ __('pages/admin/users.changePassword.description') }}
                    </p>
                </div>
            </div>

            <form id="change-password-form" @submit.prevent="changePassword()" class="mt-4 space-y-4 text-left">
                <div>
                    <x-forms.label for="password" required>{{ __('form.label.new_password') }}</x-forms.label>
                    <x-forms.input
                        name="password"
                        type="password"
                        x-model="pwForm.password"
                        placeholder="Min. 8 characters"
                        required="true" />
                </div>
                <div>
                    <x-forms.label for="password_confirmation" required>{{ __('form.label.password_confirmation') }}</x-forms.label>
                    <x-forms.input
                        name="password_confirmation"
                        type="password"
                        x-model="pwForm.password_confirmation"
                        placeholder="Repeat new password"
                        required="true" />
                </div>
            </form>
        </div>

        <div class="flex items-right justify-end gap-3 border-t border-border px-6 py-4">
            <x-buttons.primary type="button" @click="changePassword()" x-bind:disabled="passwordChangeSubmitting">
                <x-heroicon-o-arrow-path class="w-4 h-4 animate-spin" x-show="passwordChangeSubmitting" />
                <span x-text="passwordChangeSubmitting ? '{{ __('buttons.saving') }}' : '{{ __('buttons.save') }}'"></span>
            </x-buttons.primary>
            <x-buttons.secondary @click="showPasswordChange = false">{{ __('buttons.cancel') }}</x-buttons.secondary>
        </div>
    </div>
</div>