<section>
    <form id="send-verification" method="post" action="{{ route('verification.send') }}">
        @csrf
    </form>

    <form method="post" action="{{ route('profile.update') }}" class="space-y-5">
        @csrf
        @method('patch')

        <div class="grid gap-5 md:grid-cols-2">
            <div>
                <x-input-label for="name" value="Nombre" class="text-xs font-bold uppercase tracking-[0.14em] text-ink-500" />
                <x-text-input id="name" name="name" type="text"
                              class="mt-2 block w-full rounded-xl border-ink-200 bg-ink-50 px-4 py-3 text-sm font-semibold text-ink-900 shadow-none transition focus:border-brand-500 focus:bg-white focus:ring-2 focus:ring-brand-500/20"
                              :value="old('name', $user->name)" required autofocus autocomplete="name" />
                <x-input-error class="mt-2" :messages="$errors->get('name')" />
            </div>

            <div>
                <x-input-label for="email" value="Correo electrónico" class="text-xs font-bold uppercase tracking-[0.14em] text-ink-500" />
                <x-text-input id="email" name="email" type="email"
                              class="mt-2 block w-full rounded-xl border-ink-200 bg-ink-50 px-4 py-3 text-sm font-semibold text-ink-900 shadow-none transition focus:border-brand-500 focus:bg-white focus:ring-2 focus:ring-brand-500/20"
                              :value="old('email', $user->email)" required autocomplete="username" />
                <x-input-error class="mt-2" :messages="$errors->get('email')" />
            </div>
        </div>

        @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
            <div class="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
                <p class="font-bold">Tu correo todavía no está verificado.</p>
                <button form="send-verification" class="mt-1 font-black text-amber-700 underline underline-offset-4 hover:text-amber-900">
                    Reenviar correo de verificación
                </button>

                @if (session('status') === 'verification-link-sent')
                    <p class="mt-2 font-bold text-emerald-700">
                        Enviamos un nuevo enlace de verificación a tu correo.
                    </p>
                @endif
            </div>
        @endif

        <div class="flex flex-col gap-3 border-t border-ink-100 pt-5 sm:flex-row sm:items-center">
            <x-primary-button class="justify-center rounded-full bg-ink-950 px-6 py-3 text-xs font-black hover:bg-ink-800">
                Guardar cambios
            </x-primary-button>

            @if (session('status') === 'profile-updated')
                <p
                    x-data="{ show: true }"
                    x-show="show"
                    x-transition
                    x-init="setTimeout(() => show = false, 2600)"
                    class="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-2 text-sm font-bold text-emerald-700"
                >
                    <span class="grid h-5 w-5 place-items-center rounded-full bg-emerald-500 text-xs text-white">✓</span>
                    Perfil actualizado correctamente.
                </p>
            @endif
        </div>
    </form>
</section>
