@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">Suche</h2>
                <div class="mt-1 text-[11px] text-white/50">Tipp: ⌘K / Ctrl+K öffnet die Suche überall.</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">
        {{-- Input --}}
        <div class="">
            <div class="relative">
                <i class="ph ph-magnifying-glass text-white/50 absolute left-3 top-1/2 -translate-y-1/2"></i>
                <input type="text" autofocus
                       placeholder="Suche nach Domain, Postfach oder Benutzer …"
                       wire:model.live.debounce.300ms="q"
                       class="w-full rounded-2xl bg-white/5 border border-white/10 pl-9 pr-3.5 py-2.5 text-white/90 placeholder:text-white/50">
            </div>
        </div>

        {{-- Ergebnisse --}}
        <div class="space-y-4 max-h-[60vh] overflow-auto">
            @php $res = $this->results; @endphp

            {{-- Domains --}}
            @if(!empty($res['domains']))
                <div>
                    <div class="text-[11px] uppercase tracking-wide text-white/60 mb-1">Domains</div>
                    <div class="rounded-xl border border-white/10 overflow-hidden divide-y divide-white/10">
                        @foreach($res['domains'] as $r)
                            <button type="button"
                                    class="w-full text-left px-3.5 py-2.5 hover:bg-white/5 flex items-center justify-between"
                                    wire:click="go('domain', {{ $r['id'] }})">
                                <div class="min-w-0">
                                    <div class="text-white/90 truncate">{{ $r['title'] }}</div>
                                    <div class="text-white/50 text-xs truncate">{{ $r['sub'] }}</div>
                                </div>
                                <i class="ph ph-arrow-up-right text-white/50"></i>
                            </button>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Postfächer --}}
            @if(!empty($res['mailboxes']))
                <div>
                    <div class="text-[11px] uppercase tracking-wide text-white/60 mb-1">Postfächer</div>
                    <div class="rounded-xl border border-white/10 overflow-hidden divide-y divide-white/10">
                        @foreach($res['mailboxes'] as $r)
                            <button type="button"
                                    class="w-full text-left px-3.5 py-2.5 hover:bg-white/5 flex items-center justify-between"
                                    wire:click="go('mailbox', {{ $r['id'] }})">
                                <div class="min-w-0">
                                    <div class="text-white/90 truncate">{{ $r['title'] }}</div>
                                    <div class="text-white/50 text-xs truncate">{{ $r['sub'] }}</div>
                                </div>
                                <i class="ph ph-pencil-simple text-white/50"></i>
                            </button>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Benutzer (optional) --}}
            @if(!empty($res['users']))
                <div>
                    <div class="text-[11px] uppercase tracking-wide text-white/60 mb-1">Benutzer</div>
                    <div class="rounded-xl border border-white/10 overflow-hidden divide-y divide-white/10">
                        @foreach($res['users'] as $r)
                            <button type="button"
                                    class="w-full text-left px-3.5 py-2.5 hover:bg-white/5 flex items-center justify-between"
                                    wire:click="go('user', {{ $r['id'] }})">
                                <div class="min-w-0">
                                    <div class="text-white/90 truncate">{{ $r['title'] }}</div>
                                    <div class="text-white/50 text-xs truncate">{{ $r['sub'] }}</div>
                                </div>
                                <i class="ph ph-user text-white/50"></i>
                            </button>
                        @endforeach
                    </div>
                </div>
            @endif

            @if(empty($res['domains']) && empty($res['mailboxes']) && empty($res['users']) && trim($q) !== '')
                {{-- EMPTY STATE (no results) --}}
                <div class="relative rounded-2xl border border-white/10 bg-white/[0.03] p-6 overflow-hidden">
                    {{-- Rings background (SVG, dotted, fading outward) --}}
                    <div class="pointer-events-none absolute inset-0 grid place-items-center">
                        <svg class="w-[540px] max-w-[78vw] aspect-square opacity-70" viewBox="0 0 540 540" fill="none">
                            @php
                                $rings = [
                                    ['r'=>70,  'o'=>.32],
                                    ['r'=>120, 'o'=>.22],
                                    ['r'=>175, 'o'=>.15],
                                    ['r'=>230, 'o'=>.10],
                                    ['r'=>280, 'o'=>.07],
                                ];
                            @endphp
                            @foreach($rings as $ring)
                                <circle cx="270" cy="270" r="{{ $ring['r'] }}"
                                        stroke="rgba(255,255,255,{{ $ring['o'] }})"
                                        stroke-width="1.5"
                                        stroke-dasharray="2 6"
                                        vector-effect="non-scaling-stroke"/>
                            @endforeach
                        </svg>
                    </div>

                    {{-- Foreground content (on top of rings & icons) --}}
                    <div class="relative z-10">
                        <div class="mx-auto max-w-xl text-center space-y-4">
                            {{-- Center magnifier --}}
                            <div class="mx-auto size-14 rounded-2xl grid place-items-center bg-white/[0.07] border border-white/10 shadow-[0_10px_40px_-10px_rgba(0,0,0,.5)]">
                                <i class="ph ph-magnifying-glass text-white/80 text-xl"></i>
                            </div>

                            <div>
                                <h3 class="text-white font-semibold text-xl">Keine Treffer</h3>
                                <p class="text-white/70 mt-1">
                                    Wir konnten zu <span class="font-medium text-white">„{{ $q }}“</span> nichts finden.
                                </p>
                            </div>

                            {{-- Actions --}}
                            <div class="flex items-center justify-center gap-2 pt-2">
                                <button type="button"
                                        class="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-3.5 py-2 text-white/85 hover:text-white hover:border-white/20"
                                        wire:click="$set('q','')">
                                    <i class="ph ph-broom text-[16px]"></i> Suche leeren
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>