@push('modal.header')
    <div class="px-5 pt-5 pb-3 border-b border-white/10 backdrop-blur rounded-t-2xl">
        <div class="flex items-center justify-between">
            <h2 class="text-lg font-semibold text-white">Alias 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">
    {{-- Warnung --}}
    <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>

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

        <div class="flex items-center gap-2 text-sm">
            <span class="px-2 py-0.5 rounded-full border border-white/15 text-white/70 bg-white/5">
                Typ: {{ $isSingle ? 'Single' : 'Gruppe' }}
            </span>
            <span class="px-2 py-0.5 rounded-full border border-white/15 text-white/70 bg-white/5">
                Weiterleitung: {{ $targetLabel }}
            </span>
        </div>

        @if($extraRecipients > 0)
            <div class="text-xs text-white/60">+{{ $extraRecipients }} weitere Empfänger</div>
        @endif
    </div>

    {{-- Bestätigung --}}
    <div class="space-y-2">
        <label class="block text-sm text-white/70">
            Zur Bestätigung tippe die Alias-Adresse ein:
        </label>
        <input
            type="text"
            wire:model.live="confirm"
            placeholder="{{ $aliasEmail }}"
            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"
        />
        @error('confirm') <div class="text-rose-400 text-xs mt-1">{{ $message }}</div> @enderror
    </div>
</div>

@push('modal.footer')
    <div x-data="{ valid: @entangle('confirmMatches') }"
         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"
                wire:click="$dispatch('alias:delete')"
                :disabled="!valid"
                :class="valid
                ? 'bg-rose-500/20 text-rose-200 border border-rose-400/40 hover:bg-rose-500/30'
                : 'border border-white/10 bg-white/5 text-white/40 cursor-not-allowed'"
                class="px-4 py-2 rounded-lg text-sm transition-colors">
                <i class="ph ph-trash-simple"></i> Endgültig löschen
            </button>
        </div>
    </div>

    {{--    <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"--}}
{{--                wire:click="$dispatch('alias:delete')"--}}
{{--                @disabled(! $confirmMatches)--}}
{{--                class="px-4 py-2 rounded-lg text-sm--}}
{{--           {{ $confirmMatches--}}
{{--                ? 'bg-rose-500/20 text-rose-200 border border-rose-400/40 hover:bg-rose-500/30'--}}
{{--                : 'border border-white/10 bg-white/5 text-white/40 cursor-not-allowed' }}">--}}
{{--                <i class="ph ph-trash-simple"></i> Endgültig löschen--}}
{{--            </button>--}}
{{--        </div>--}}
{{--    </div>--}}
@endpush