@push('modal.header')
    <div class="px-5 pt-5 pb-3 border-b border-white/10 backdrop-blur rounded-t-2xl">
        <h2 class="text-[18px] font-semibold text-slate-100">
            Fail2Ban – {{ $jail }}
        </h2>
        <p class="text-[13px] text-slate-300/80">
            Aktuell gebannte IPs und Restlaufzeiten.
        </p>
    </div>
@endpush

<div class="p-5 space-y-3">
    @forelse($rows as $r)
        <div class="rounded-xl border px-4 py-3 {{ $r['box_class'] }}">
            <div class="flex items-center justify-between">
                <div class="text-white/90 font-mono text-[14px]">{{ $r['ip'] }}</div>
                <div class="text-[12px] text-white/80">
                    {{ $r['time_text'] }}
                </div>
            </div>
            <div class="mt-1 text-[12px] text-white/55">
                {{ $r['meta_text'] }}
            </div>
        </div>
    @empty
        <div class="rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white/70">
            Keine gebannten IPs in diesem Jail.
        </div>
    @endforelse
</div>

@push('modal.footer')
    <div class="px-5 py-3 border-t border-white/10 backdrop-blur rounded-b-2xl">
        <div class="flex items-center gap-2 justify-end">
            <button wire:click="$dispatch('f2b:refresh-banlist')" wire:loading.attr="disabled"
                    class="px-3 py-1.5 text-[12px] rounded-lg bg-white/5 border border-white/10 hover:bg-white/10">
                <i class="ph ph-arrows-clockwise text-[13px]"></i>
                <span wire:loading.remove>Neu prüfen</span>
                <span wire:loading>prüfe…</span>
            </button>
            <button wire:click="$dispatch('closeModal')"
                    class="px-3 py-1.5 rounded-lg text-sm bg-emerald-500/20 text-emerald-300 border border-emerald-400/30 hover:bg-emerald-500/30">
                Fertig
            </button>
        </div>
    </div>
@endpush