<section>
    <header>
        <h2 class="text-lg font-medium text-white">
            {{ app()->getLocale() == 'ar' ? 'تحديث كلمة المرور' : 'Update Password' }}
        </h2>

        <p class="mt-1 text-sm text-gray-400">
            {{ app()->getLocale() == 'ar' ? 'تأكد من أن حسابك يستخدم كلمة مرور طويلة وعشوائية للحفاظ على أمانه.' : 'Ensure your account is using a long, random password to stay secure.' }}
        </p>
    </header>

    <form method="post" action="{{ route('password.update') }}" class="mt-6 space-y-6">
        @csrf
        @method('put')

        <div>
            <x-input-label for="update_password_current_password" :value="app()->getLocale() == 'ar' ? 'كلمة المرور الحالية' : 'Current Password'" class="text-gray-400" />
            <x-text-input id="update_password_current_password" name="current_password" type="password" class="mt-1 block w-full bg-black border-gray-800 text-white focus:border-[#d4af37] focus:ring-[#d4af37]" autocomplete="current-password" />
            <x-input-error :messages="$errors->updatePassword->get('current_password')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="update_password_password" :value="app()->getLocale() == 'ar' ? 'كلمة المرور الجديدة' : 'New Password'" class="text-gray-400" />
            <x-text-input id="update_password_password" name="password" type="password" class="mt-1 block w-full bg-black border-gray-800 text-white focus:border-[#d4af37] focus:ring-[#d4af37]" autocomplete="new-password" />
            <x-input-error :messages="$errors->updatePassword->get('password')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="update_password_password_confirmation" :value="app()->getLocale() == 'ar' ? 'تأكيد كلمة المرور' : 'Confirm Password'" class="text-gray-400" />
            <x-text-input id="update_password_password_confirmation" name="password_confirmation" type="password" class="mt-1 block w-full bg-black border-gray-800 text-white focus:border-[#d4af37] focus:ring-[#d4af37]" autocomplete="new-password" />
            <x-input-error :messages="$errors->updatePassword->get('password_confirmation')" class="mt-2" />
        </div>

        <div class="flex items-center gap-4">
            <button type="submit" class="bg-[#d4af37] text-black px-6 py-2 rounded font-bold hover:bg-[#b08d2a] transition-colors">
                {{ app()->getLocale() == 'ar' ? 'حفظ' : 'Save' }}
            </button>

            @if (session('status') === 'password-updated')
                <p
                    x-data="{ show: true }"
                    x-show="show"
                    x-transition
                    x-init="setTimeout(() => show = false, 2000)"
                    class="text-sm text-gray-400"
                >{{ app()->getLocale() == 'ar' ? 'تم الحفظ.' : 'Saved.' }}</p>
            @endif
        </div>
    </form>
</section>
