<section class="space-y-4">
    <header>
        <h2 class="text-lg font-bold text-rose-700 dark:text-rose-300">Excluir conta</h2>
        <p class="mt-1 text-sm leading-6 text-slate-600 dark:text-slate-400">Essa acao encerra seu acesso ao portal. Use apenas quando houver orientacao administrativa.</p>
    </header>

    <button type="button"
            x-data=""
            x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')"
            class="inline-flex items-center justify-center rounded-lg border border-rose-300 bg-white px-4 py-2 text-sm font-semibold text-rose-700 transition hover:bg-rose-50 dark:border-rose-800 dark:bg-slate-950 dark:text-rose-300 dark:hover:bg-rose-950/30">
        Excluir minha conta
    </button>

    <x-modal name="confirm-user-deletion" :show="$errors->userDeletion->isNotEmpty()" focusable>
        <form method="post" action="{{ route('profile.destroy') }}" class="p-6 dark:bg-slate-900">
            @csrf
            @method('delete')

            <h2 class="text-lg font-bold text-slate-950 dark:text-white">Confirmar exclusao da conta</h2>
            <p class="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-400">Digite sua senha para confirmar. Essa acao remove seu usuario e nao deve ser usada para desligamentos operacionais; nesses casos, o Administrador Master deve inativar o usuario.</p>

            <div class="mt-5">
                <x-input-label for="password" value="Senha" />
                <x-text-input id="password" name="password" type="password" class="mt-1 block w-full" placeholder="Digite sua senha" />
                <x-input-error :messages="$errors->userDeletion->get('password')" class="mt-2" />
            </div>

            <div class="mt-6 flex justify-end gap-3">
                <x-secondary-button x-on:click="$dispatch('close')">Cancelar</x-secondary-button>

                <button type="submit" class="inline-flex items-center justify-center rounded-lg bg-rose-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-rose-700">
                    Excluir conta
                </button>
            </div>
        </form>
    </x-modal>
</section>
