<section class="space-y-6">
    <div class="mb-6">
        <h5 class="text-[13px] font-bold text-red-600 uppercase tracking-widest">
            Supprimer le compte
        </h5>
    </div>

    <div class="bg-white p-4 rounded-sm border border-red-100 flex items-start gap-4">
        <div>
            <p class="text-[13px] text-slate-700 font-medium">
                {{ __("Une fois votre compte supprimé, toutes ses ressources et données seront définitivement effacées. Cette action est irréversible.") }}
            </p>
            <button class="mt-4 px-5 py-2 bg-red-600 text-white text-sm font-semibold rounded-sm hover:bg-red-700 transition-all shadow-sm"
                x-data="" x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')">
                {{ __('Supprimer définitivement') }}
            </button>
        </div>
    </div>

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

            <h5 class="text-[14px] font-bold text-gray-700 uppercase tracking-wide mb-4">
                {{ __('Confirmation de suppression') }}
            </h5>

            <p class="text-[13px] text-slate-600 font-medium mb-6">
                {{ __("Veuillez saisir votre mot de passe pour confirmer que vous souhaitez supprimer définitivement votre compte.") }}
            </p>

            <div class="space-y-2">
                <label for="password_del" class="block text-sm font-semibold text-gray-700">{{ __('Mot de passe') }}</label>
                <input id="password_del" name="password" type="password" 
                    class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] text-sm font-semibold text-gray-700 bg-white"
                    placeholder="{{ __('Saisissez votre mot de passe') }}" />
                <x-input-error :messages="$errors->userDeletion->get('password')" class="mt-2" />
            </div>

            <div class="mt-8 flex justify-end gap-3">
                <button type="button" class="px-5 py-2 bg-white border border-gray-200 text-gray-700 rounded-sm hover:bg-gray-50 transition-all text-sm font-semibold shadow-sm h-[38px] inline-flex items-center"
                    x-on:click="$dispatch('close')">
                    {{ __('Annuler') }}
                </button>

                <button type="submit" class="px-5 py-2 bg-red-600 text-white rounded-sm hover:bg-red-700 transition-all text-sm font-semibold shadow-sm h-[38px] inline-flex items-center">
                    {{ __('Supprimer le compte') }}
                </button>
            </div>
        </form>
    </x-modal>
</section>