<section>
    <div class="mb-6">
        <h5 class="text-[13px] font-bold text-gray-700 uppercase tracking-widest">
            Mettre à jour le mot de passe
        </h5>
    </div>

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

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
                <label for="current_password" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Mot de passe actuel') }}</label>
                <input id="current_password" name="current_password" type="password" 
                    class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] text-sm font-semibold text-gray-700 bg-white"
                    autocomplete="current-password" />
                <x-input-error :messages="$errors->updatePassword->get('current_password')" class="mt-2" />
            </div>

            <div>
                <label for="password" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Nouveau mot de passe') }}</label>
                <input id="password" name="password" type="password" 
                    class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] text-sm font-semibold text-gray-700 bg-white"
                    autocomplete="new-password" />
                <x-input-error :messages="$errors->updatePassword->get('password')" class="mt-2" />
            </div>

            <div>
                <label for="password_confirmation" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Confirmer le mot de passe') }}</label>
                <input id="password_confirmation" name="password_confirmation" type="password" 
                    class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] text-sm font-semibold text-gray-700 bg-white"
                    autocomplete="new-password" />
                <x-input-error :messages="$errors->updatePassword->get('password_confirmation')" class="mt-2" />
            </div>
        </div>

        <div class="pt-4 flex items-center gap-4">
            <button type="submit"
                class="px-5 py-2 text-white rounded-sm hover:opacity-90 transition-all duration-200 text-sm font-semibold shadow-sm hover:shadow-md h-[38px] flex items-center justify-center whitespace-nowrap"
                style="background-color: #5867dd !important;">
                Valider
            </button>

            @if (session('status') === 'password-updated')
                <p x-data="{ show: true }" x-show="show" x-transition x-init="setTimeout(() => show = false, 3000)"
                    class="text-xs font-bold text-emerald-600">
                    {{ __('Mot de passe mis à jour.') }}
                </p>
            @endif
        </div>
    </form>
</section>