<div class="p-6 space-y-5">

    {{-- HEADER --}}
    <div class="flex items-start gap-3">
        <div class="w-10 h-10 rounded-xl bg-red-50 flex items-center justify-center shrink-0">
            <x-heroicon-o-exclamation-triangle class="w-5 h-5 text-red-500"/>
        </div>
        <div>
            <h2 class="text-base font-semibold text-gray-800">
                {{ t('settings.danger.confirm_title') }}
            </h2>
            <p class="text-sm text-gray-500 mt-0.5">
                {{ t('settings.danger.confirm_description') }}
            </p>
        </div>
    </div>

    {{-- WARNING --}}
    <div class="bg-red-50 border border-red-100 rounded-xl px-4 py-3 text-sm text-red-600 leading-relaxed">
        {{ t('settings.danger.delete_description') }}
    </div>

    {{-- PASSWORD --}}
    <div>
        <label class="block text-xs font-medium text-gray-500 mb-1">{{ t('settings.danger.password') }}</label>
        <input type="password"
               wire:model.defer="password"
               placeholder="••••••••"
               class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-red-400 @error('password') border-red-300 @enderror">
        @error('password')
            <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
        @enderror
    </div>

    {{-- ACTIONS --}}
    <div class="flex justify-end gap-2 pt-1">
        <button wire:click="$dispatch('closeModal')"
                class="px-4 py-2 text-sm rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors">
            {{ t('settings.danger.cancel') }}
        </button>
        <button wire:click="delete"
                wire:loading.attr="disabled"
                wire:target="delete"
                class="px-4 py-2 text-sm rounded-lg bg-red-600 text-white font-medium hover:bg-red-700 transition-colors flex items-center gap-2">
            <span wire:loading.remove wire:target="delete">
                {{ t('settings.danger.confirm_delete') }}
            </span>
            <span wire:loading wire:target="delete" class="flex items-center gap-2">
                <svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-dasharray="31.4" stroke-dashoffset="10"/>
                </svg>
            </span>
        </button>
    </div>

</div>
