<section class="space-y-6"> 
    <header> 
        <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100"> 
            {{ __('Delete Account') }} 
        </h2> 
 
        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400"> 
            {{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.') }} 
        </p> 
    </header> 
 
    <x-danger-button 
        x-data="" 
        x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')" 
    >{{ __('Delete Account') }}</x-danger-button> 
 
    <x-modal name="confirm-user-deletion" :show="$errors->userDeletion->isNotEmpty()" focusable> 
        <form method="post" action="{{ route('profile.destroy') }}" class="p-6"> 
            @csrf 
            @method('delete') 
 
            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100"> 
                {{ __('Are you sure you want to delete your account?') }} 
            </h2> 
 
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400"> 
                {{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.') }} 
            </p> 
 
            <div class="mt-6"> 
                <x-input-label for="password" value="{{ __('Password') }}" class="sr-only" /> 
 
                <x-text-input 
                    id="password" 
                    name="password" 
                    type="password" 
                    class="mt-1 block w-3/4" 
                    placeholder="{{ __('Password') }}" 
                /> 
 
                <x-input-error :messages="$errors->userDeletion->get('password')" class="mt-2" /> 
            </div> 
 
            <div class="mt-6 flex justify-end"> 
                <x-secondary-button x-on:click="$dispatch('close')"> 
                    {{ __('Cancel') }} 
                </x-secondary-button> 
 
                <x-danger-button class="ml-3"> 
                    {{ __('Delete Account') }} 
                </x-danger-button> 
            </div> 
        </form> 
    </x-modal> 
</section> 
 
 |