<section>
    <header>
        <h2 class="admin-section-title">{{ __('About') }}</h2>
        <p class="admin-section-subtitle">{{ __("Add details about your account and keep your login email up to date.") }}</p>
    </header>

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

    <form method="post" action="{{ route('profile.update') }}" class="mt-6 admin-form-grid">
        @csrf
        @method('patch')

        <div class="admin-field">
            <label for="name">{{ __('Name') }}</label>
            <input id="name" name="name" type="text" value="{{ old('name', $user->name) }}" required autofocus autocomplete="name">
            <x-input-error class="admin-field__error" :messages="$errors->get('name')" />
        </div>

        <div class="admin-field">
            <label for="email">{{ __('Email') }}</label>
            <input id="email" name="email" type="email" value="{{ old('email', $user->email) }}" required autocomplete="username">
            <x-input-error class="admin-field__error" :messages="$errors->get('email')" />

            @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
                <div class="admin-card admin-card--subtle mt-3">
                    <p class="text-sm text-slate-700">{{ __('Your email address is unverified.') }}</p>
                    <button form="send-verification" class="admin-button admin-button--ghost mt-3">
                        {{ __('Re-send verification email') }}
                    </button>

                    @if (session('status') === 'verification-link-sent')
                        <p class="mt-3 text-sm text-emerald-700">{{ __('A new verification link has been sent to your email address.') }}</p>
                    @endif
                </div>
            @endif
        </div>

        <div class="flex items-center gap-4">
            <button type="submit" class="admin-button">{{ __('Save profile') }}</button>

            @if (session('status') === 'profile-updated')
                <p
                    x-data="{ show: true }"
                    x-show="show"
                    x-transition
                    x-init="setTimeout(() => show = false, 2000)"
                    class="text-sm text-slate-500"
                >{{ __('Saved.') }}</p>
            @endif
        </div>
    </form>
</section>
