@push('modal.header')
    <div class="px-5 pt-5 pb-3 border-b border-white/10
              backdrop-blur rounded-t-2xl relative">
        <div class="flex items-center justify-between">
            <h2 class="text-lg font-semibold text-white">Domain löschen</h2>
            <button wire:click="$dispatch('closeModal')" class="text-white/60 hover:text-white text-lg">
                <i class="ph ph-x"></i>
            </button>
        </div>
    </div>
@endpush

<div class="p-6 space-y-5">
    <div class="rounded-xl border border-rose-500/30 bg-rose-500/10 p-3 text-rose-200">
        <div class="flex items-center gap-2">
            <i class="ph ph-warning text-[18px]"></i>
            <span class="text-sm">Diese Aktion kann nicht rückgängig gemacht werden.</span>
        </div>
    </div>

    <div class="space-y-2">
        <div class="text-white/85">
            Du bist im Begriff, die Domain <span class="font-semibold">{{ $domain }}</span> zu löschen.
        </div>

        <div class="flex flex-wrap gap-2 text-sm">
            <span class="px-2 py-0.5 rounded-full border border-white/15 text-white/70 bg-white/5">
                <i class="ph ph-user-list text-[12px]"></i> {{ $mailboxes }} Postfächer
            </span>
            <span class="px-2 py-0.5 rounded-full border border-white/15 text-white/70 bg-white/5">
                <i class="ph ph-at text-[12px]"></i> {{ $aliases }} Aliasse
            </span>
        </div>

        @if($mailboxes > 0 || $aliases > 0)
            <div class="text-sm rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-amber-200 mt-5">
                Löschen ist aktuell blockiert: Entferne zuerst alle Postfächer und Aliasse.
            </div>
        @endif
    </div>

    <div class="space-y-2">
        <label class="block text-sm text-white/70">Zur Bestätigung tippe den Domain-Namen:</label>
        <input type="text" wire:model.defer="confirm" placeholder="{{ $domain }}"
               class="w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 text-sm focus:border-white/20 focus:ring-0">
    </div>
</div>

@push('modal.footer')
    <div class="px-5 py-3 border-t border-white/10 backdrop-blur rounded-b-2xl">
        <div class="flex justify-end gap-2">
            <button type="button" wire:click="$dispatch('closeModal')"
                    class="px-4 py-2 rounded-lg text-sm border border-white/10 text-white/70 hover:text-white hover:border-white/20">
                Abbrechen
            </button>

            @php $blocked = ($mailboxes > 0 || $aliases > 0); @endphp
            <button type="button" wire:click="$dispatch('domain:delete')"
                    class="px-4 py-2 rounded-lg text-sm
                {{ $blocked ? 'border border-white/10 bg-white/5 text-white/40 cursor-not-allowed'
                            : 'bg-rose-500/20 text-rose-200 border border-rose-400/40 hover:bg-rose-500/30' }}"
                    @if($blocked) disabled @endif>
                <i class="ph ph-trash-simple"></i> Endgültig löschen
            </button>
        </div>
    </div>
@endpush