{{-- ! Formulaire de mise à jour du mot de passe - Styling Tailwind responsive --}}
@php
    $inputClasses = 'w-full rounded-xl border border-gray-300 px-4 py-3 text-gray-900 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition';
    $errorClasses = 'mt-2 text-sm text-red-600';
@endphp

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

    {{-- ? Champ mot de passe actuel --}}
    <div>
        <label for="current_password" class="block text-sm font-semibold text-gray-700 mb-2">
            {{ __('profile.current_password') }}
        </label>
        <input
            id="current_password"
            name="current_password"
            type="password"
            class="{{ $inputClasses }} @error('current_password', 'updatePassword') border-red-300 focus:ring-red-500 @enderror"
            autocomplete="current-password"
            required
        />
        @error('current_password', 'updatePassword')
            <p class="{{ $errorClasses }}">{{ $message }}</p>
        @enderror
    </div>

    {{-- ? Champ nouveau mot de passe --}}
    <div>
        <label for="password" class="block text-sm font-semibold text-gray-700 mb-2">
            {{ __('profile.new_password') }}
        </label>
        <input
            id="password"
            name="password"
            type="password"
            class="{{ $inputClasses }} @error('password', 'updatePassword') border-red-300 focus:ring-red-500 @enderror"
            autocomplete="new-password"
            required
        />
        @error('password', 'updatePassword')
            <p class="{{ $errorClasses }}">{{ $message }}</p>
        @enderror
    </div>

    {{-- ? Confirmation du nouveau mot de passe --}}
    <div>
        <label for="password_confirmation" class="block text-sm font-semibold text-gray-700 mb-2">
            {{ __('profile.confirm_new_password') }}
        </label>
        <input
            id="password_confirmation"
            name="password_confirmation"
            type="password"
            class="{{ $inputClasses }}"
            autocomplete="new-password"
            required
        />
    </div>

    {{-- ! Bouton de sauvegarde + message de succès --}}
    <div class="flex flex-wrap items-center gap-3">
        <button
            type="submit"
            class="inline-flex items-center rounded-xl bg-indigo-600 px-6 py-3 text-white font-semibold shadow-lg transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
        >
            {{ __('profile.save_button') }}
        </button>

        @if (session('status') === 'password-updated')
            <span class="text-sm text-green-600">
                ✓ {{ __('profile.saved_message') }}
            </span>
        @endif
    </div>
</form>