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

    {{-- HEADER --}}
    <div class="flex items-start gap-4">
        <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>
            <p class="text-sm font-semibold text-gray-800">{{ t('translations.delete_title') }}</p>
            <p class="text-sm text-gray-500 mt-0.5">{{ t('translations.delete_description') }}</p>
        </div>
    </div>

    {{-- KEY INFO --}}
    <div class="bg-gray-50 border border-gray-200 rounded-lg px-4 py-3 space-y-1">
        <p class="text-[11px] text-gray-400">{{ t('translations.key') }}</p>
        <code class="text-xs font-mono text-gray-700 break-all">{{ $key }}</code>
        <p class="text-[11px] text-gray-400">{{ $count }} {{ t('translations.entries') }}</p>
    </div>

    {{-- BESTÄTIGUNG --}}
    <div>
        <label class="block text-xs font-medium text-gray-600 mb-1.5">{{ t('translations.confirm_type') }}</label>
        <input type="text" wire:model.live="confirmKey"
               placeholder="{{ $key }}"
               class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm font-mono focus:outline-none focus:border-red-400 placeholder:text-gray-300">
    </div>

    {{-- FOOTER --}}
    <div class="flex gap-2 justify-end pt-1">
        <button wire:click="$dispatch('closeModal')"
                class="px-4 py-2 text-sm text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
            {{ t('translations.cancel') }}
        </button>
        <button wire:click="delete"
                @disabled(!$this->canDelete)
                class="px-4 py-2 text-sm font-medium rounded-lg transition-colors
                    {{ $this->canDelete
                        ? 'bg-red-500 hover:bg-red-600 text-white'
                        : 'bg-red-200 text-white cursor-not-allowed' }}">
            {{ t('translations.delete') }}
        </button>
    </div>

</div>
