<section class="space-y-8">
    <header class="space-y-2 border-l-2 border-rose-500/30 pl-4">
        <h2 class="text-[11px] font-black text-white uppercase tracking-[0.3em] italic">
            {{ __('Terminasi Akun') }}
        </h2>
        <p class="text-[9px] font-bold text-slate-500 uppercase tracking-widest italic leading-relaxed">
            {{ __('Setelah akun Anda dihapus, semua sumber daya dan datanya akan dihapus secara permanen.') }}
        </p>
    </header>

    <x-danger-button
        x-data=""
        x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')"
    >{{ __('Hapus Akun Permanen') }}</x-danger-button>

    <x-modal name="confirm-user-deletion" :show="$errors->userDeletion->isNotEmpty()" focusable>
        <form method="post" action="{{ route('profile.destroy') }}" class="p-10 bg-slate-950 border border-white/5 rounded-[40px] shadow-3xl">
            @csrf
            @method('delete')

            <h2 class="text-xl font-display font-black text-white uppercase italic tracking-tighter">
                {{ __('Konfirmasi Penghapusan Akun') }}
            </h2>

            <p class="mt-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest italic leading-relaxed">
                {{ __('Apakah Anda yakin ingin menghapus akun Anda? Masukkan kata sandi Anda untuk mengonfirmasi bahwa Anda ingin menghapus akun Anda secara permanen.') }}
            </p>

            <div class="mt-10 space-y-3">
                <x-input-label for="password" value="{{ __('Kata Sandi Konfirmasi') }}" class="sr-only" />

                <x-text-input
                    id="password"
                    name="password"
                    type="password"
                    class="block w-full"
                    placeholder="{{ __('********') }}"
                />

                <x-input-error :messages="$errors->userDeletion->get('password')" />
            </div>

            <div class="mt-10 flex justify-end gap-6 pt-8 border-t border-white/5">
                <x-secondary-button x-on:click="$dispatch('close')">
                    {{ __('Batalkan') }}
                </x-secondary-button>

                <x-danger-button>
                    {{ __('Hapus Sekarang →') }}
                </x-danger-button>
            </div>
        </form>
    </x-modal>
</section>
