<section>
    <header>
        <h2 class="text-lg font-bold text-slate-950 dark:text-white">Senha de acesso</h2>
        <p class="mt-1 text-sm leading-6 text-slate-600 dark:text-slate-400">Mantenha uma senha forte para proteger o acesso ao portal.</p>
    </header>

    <form method="post" action="{{ route('password.update') }}" class="mt-6 space-y-5">
        @csrf
        @method('put')

        <div class="grid gap-4 md:grid-cols-3">
            <div>
                <x-input-label for="update_password_current_password" value="Senha atual" />
                <x-text-input id="update_password_current_password" name="current_password" type="password" class="mt-1 block w-full" autocomplete="current-password" />
                <x-input-error :messages="$errors->updatePassword->get('current_password')" class="mt-2" />
            </div>

            <div>
                <x-input-label for="update_password_password" value="Nova senha" />
                <x-text-input id="update_password_password" name="password" type="password" class="mt-1 block w-full" autocomplete="new-password" />
                <x-input-error :messages="$errors->updatePassword->get('password')" class="mt-2" />
            </div>

            <div>
                <x-input-label for="update_password_password_confirmation" value="Confirmar senha" />
                <x-text-input id="update_password_password_confirmation" name="password_confirmation" type="password" class="mt-1 block w-full" autocomplete="new-password" />
                <x-input-error :messages="$errors->updatePassword->get('password_confirmation')" class="mt-2" />
            </div>
        </div>

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

            @if (session('status') === 'password-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">
                    Senha atualizada.
                </p>
            @endif
        </div>
    </form>
</section>
