@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">
            <div>
                <h2 class="text-lg font-semibold text-white">Postfach löschen</h2>
                <div class="mt-0.5 text-white/70 text-sm flex items-center gap-1.5">
                    <span>{{ $email }}</span>
                </div>
            </div>
            <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">
    <div class="space-y-4">
        <div class="rounded-lg border border-rose-400/30 bg-rose-500/10 p-3 text-rose-200 text-sm">
            <b>Achtung:</b> Das Postfach wird gelöscht.
            @if(!$keep_server_mail)
                Alle E-Mails werden <u>entfernt</u>.
            @else
                E-Mails bleiben am Server erhalten.
            @endif
        </div>

        <label class="flex items-center gap-2 cursor-pointer select-none group">
            <input type="checkbox" class="peer sr-only" wire:model="keep_server_mail">
            <span class="w-5 h-5 flex items-center justify-center rounded-md border border-white/15 bg-white/5
                 peer-checked:bg-emerald-500/20 peer-checked:border-emerald-400/40"></span>
            <span class="text-white/80 text-sm">E-Mails am Server belassen</span>
        </label>

        <label class="flex items-center gap-2 cursor-pointer select-none group">
            <input type="checkbox" class="peer sr-only" wire:model="export_zip">
            <span class="w-5 h-5 flex items-center justify-center rounded-md border border-white/15 bg-white/5
                 peer-checked:bg-sky-500/20 peer-checked:border-sky-400/40"></span>
            <span class="text-white/80 text-sm">ZIP-Export der bisherigen E-Mails erstellen</span>
        </label>
    </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>

            <button type="button"
                    class="inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm bg-rose-500/20 text-rose-200 border border-rose-400/40 hover:bg-rose-500/30"
                    wire:click="$dispatch('mailbox:delete')">
                <i class="ph ph-trash-simple text-[16px]"></i> Endgültig löschen
            </button>
        </div>
    </div>
@endpush