{{-- ! Formulaire de mise à jour du profil - version Tailwind responsive --}}
@php
    // ! Prépare les classes utilitaires pour conserver un style cohérent
    $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
    id="send-verification"
    class="hidden"
    method="POST"
    action="{{ route("verification.send") }}"
>
    @csrf
</form>

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

    {{-- ! Champ nom --}}
    <div>
        <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">
            {{ __("auth.name") }}
        </label>
        <input
            id="name"
            name="name"
            type="text"
            class="{{ $inputClasses }} @error('name') border-red-300 focus:ring-red-500 @enderror"
            value="{{ old('name', $user->name) }}"
            required
            autocomplete="name"
            autofocus
        />
        @error('name')
            <p class="{{ $errorClasses }}">{{ $message }}</p>
        @enderror
    </div>

    {{-- ! Champ email --}}
    <div>
        <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
            {{ __("auth.email") }}
        </label>
        <input
            id="email"
            name="email"
            type="email"
            class="{{ $inputClasses }} @error('email') border-red-300 focus:ring-red-500 @enderror"
            value="{{ old('email', $user->email) }}"
            required
            autocomplete="username"
        />
        @error('email')
            <p class="{{ $errorClasses }}">{{ $message }}</p>
        @enderror

        @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
            <div class="mt-4 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
                <p>{{ __("profile.email_unverified") }}</p>
                <button
                    form="send-verification"
                    type="submit"
                    class="mt-3 inline-flex items-center rounded-lg bg-amber-500 px-4 py-2 text-white font-semibold hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400"
                >
                    {{ __("profile.resend_verification_email_button") }}
                </button>

                @if (session('status') === 'verification-link-sent')
                    <p class="mt-2 text-sm text-amber-700">
                        {{ __("profile.verification_link_sent_message") }}
                    </p>
                @endif
            </div>
        @endif
    </div>

    {{-- ! Bouton d'enregistrement & 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') === 'profile-updated')
            <span class="text-sm text-green-600">
                ✓ {{ __("profile.saved_message") }}
            </span>
        @endif
    </div>
</form>