<section>
    <header>
        <h2 class="text-lg font-bold text-slate-950 dark:text-white">Dados pessoais</h2>
        <p class="mt-1 text-sm leading-6 text-slate-600 dark:text-slate-400">Essas informacoes aparecem no portal e nos artigos publicados na Wiki.</p>
    </header>

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

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

        <div class="flex flex-col gap-4 rounded-lg border border-slate-200 p-4 dark:border-slate-800 sm:flex-row sm:items-center">
            <x-user-avatar :user="$user" size="lg" />
            <div class="min-w-0 flex-1">
                <label for="foto_perfil" class="mb-2 block text-sm font-semibold text-slate-700 dark:text-slate-200">Foto de perfil</label>
                <input id="foto_perfil" name="foto_perfil" type="file" accept="image/*" class="form-control">
                <p class="mt-2 text-xs text-slate-500 dark:text-slate-400">Use uma imagem quadrada ou retrato. Tamanho maximo: 2 MB.</p>
                <x-input-error class="mt-2" :messages="$errors->get('foto_perfil')" />
            </div>
        </div>

        <div class="grid gap-4 md:grid-cols-2">
            <div>
                <x-input-label for="name" value="Nome" />
                <x-text-input id="name" name="name" type="text" class="mt-1 block w-full" :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="E-mail" />
                <x-text-input id="email" name="email" type="email" class="mt-1 block w-full" :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-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200">
                Seu e-mail ainda nao foi verificado.
                <button form="send-verification" class="font-semibold underline">Reenviar verificacao</button>

                @if (session('status') === 'verification-link-sent')
                    <p class="mt-2 font-semibold">Um novo link de verificacao foi enviado.</p>
                @endif
            </div>
        @endif

        <div class="flex items-center gap-4 border-t border-slate-200 pt-5 dark:border-slate-800">
            <x-primary-button>Salvar perfil</x-primary-button>

            @if (session('status') === 'profile-updated')
                <p x-data="{ show: true }" x-show="show" x-transition x-init="setTimeout(() => show = false, 2200)" class="text-sm font-semibold text-accent-700 dark:text-accent-300">
                    Perfil atualizado.
                </p>
            @endif
        </div>
    </form>
</section>
