{{-- resources/views/livewire/ui/dashboard/domains-panel.blade.php --}}
<div class="glass-card p-4">
    {{-- Header in der Box --}}
    <div class="flex items-center justify-between mb-3">
        <div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-1">
            <i class="ph ph-globe text-white/70 text-[13px]"></i>
            <span class="text-[11px] tracking-wide uppercase text-white/70">Domains</span>
        </div>
    </div>

    {{-- FLACHE LISTE: keine inneren Glass-Karten mehr --}}
    <ul class="mt-2 divide-y divide-white/8">
        @foreach($this->domains_with_badges as $domain)
            <li class="group px-2 py-3 md:py-3.5 flex items-center justify-between
                       rounded-lg hover:bg-white/[0.06] transition-colors">
                <div class="min-w-0 flex items-center gap-3">
                    <span class="size-8 rounded-full bg-white/5 border border-white/10 grid place-items-center text-white/70">
                        <i class="ph-duotone {{ $domain['icon'] ?? 'ph-globe' }} text-[15px]"></i>
                    </span>
                    <span class="truncate text-white/90">{{ $domain['name'] }}</span>
                </div>

                <div class="flex items-center gap-3">
                    {{-- Badge (kommt fertig aus der Klasse) – kleiner & flacher --}}
                    <span class="nx-chip border {{ $domain['cert_class'] }} text-[11px] py-0.5 px-2">
                        <i class="ph-duotone {{ $domain['cert_icon'] }} text-sm mr-1"></i>
                        {{ $domain['cert_label'] }}
                    </span>

                    <i class="ph-duotone ph-caret-right text-white/40 group-hover:text-white/70 transition"></i>
                </div>
            </li>
        @endforeach
    </ul>
</div>