@php
    // Threshold tone for gauges/bars: >=90 offline, >=75 warning, else online.
    $tone = fn (int $v): string => $v >= 90 ? 'offline' : ($v >= 75 ? 'warning' : 'online');
    $barColor = ['online' => 'bg-online', 'warning' => 'bg-warning', 'offline' => 'bg-offline'];
    $statusLabel = ['online' => __('servers.status_online'), 'warning' => __('servers.status_warning'), 'offline' => __('servers.status_offline'), 'pending' => __('servers.status_pending')][$server->status] ?? ucfirst($server->status);

    $specs = $server->specs ?? [];
    $cores = $specs['cores'] ?? null;
    $ramGb = $specs['ram_gb'] ?? null;
    $diskGb = $specs['disk_gb'] ?? null;
    $ramUsed = $ramGb !== null ? round((float) $ramGb * $server->mem / 100, 1) : null;
    $diskUsed = $diskGb !== null ? (int) round((float) $diskGb * $server->disk / 100) : null;

    $specRows = [
        [__('servers.spec_arch'),   $specs['arch']   ?? '—'],
        [__('servers.spec_kernel'), $specs['kernel'] ?? '—'],
        [__('servers.spec_virt'),   $specs['virt']   ?? '—'],
        [__('servers.spec_cores'),  $cores ?? '—'],
        [__('servers.spec_ram'),    $ramGb !== null ? __('servers.gb', ['value' => $ramGb]) : '—'],
        [__('servers.spec_disk'),   $diskGb !== null ? __('servers.gb', ['value' => $diskGb]) : '—'],
    ];

    // Detected OS tooling (populated once the live profile loads).
    if (! empty($os)) {
        $pm = ($os['packageManager'] ?? 'none') !== 'none' ? $os['packageManager'] : '—';
        $fw = ($os['firewallTool'] ?? 'none') !== 'none' ? $os['firewallTool'] : '—';
        $specRows[] = [__('servers.spec_system'),          $os['familyLabel'] ?? '—'];
        $specRows[] = [__('servers.spec_package_manager'), $pm];
        $specRows[] = [__('servers.spec_firewall'),        $fw];
    }

    $vitals = [
        ['label' => __('servers.vital_cpu'),  'icon' => 'cpu',      'val' => (int) $server->cpu,  'sub' => ($loadAvg > 0 ? __('servers.load', ['value' => number_format($loadAvg, 2)]).' · ' : '').($cores ? __('servers.cores_count', ['count' => $cores]) : '—')],
        ['label' => __('servers.vital_ram'),  'icon' => 'activity', 'val' => (int) $server->mem,  'sub' => $ramUsed !== null ? __('servers.ram_used_of_total', ['used' => $ramUsed, 'total' => $ramGb]) : '—'],
        ['label' => __('servers.vital_disk'), 'icon' => 'server',   'val' => (int) $server->disk, 'sub' => $diskUsed !== null ? __('servers.disk_used_of_total', ['used' => $diskUsed, 'total' => $diskGb]) : '—'],
    ];
@endphp

<div class="space-y-5" wire:poll.10s="pollMetrics" wire:init="load">
    <a href="{{ route('servers.index') }}"
       class="inline-flex min-h-11 items-center gap-1.5 font-mono text-[11px] uppercase tracking-[0.2em] text-ink-3 hover:text-ink-2">
        <x-icon name="switcher" class="h-3.5 w-3.5 rotate-90" />
        {{ __('servers.back_to_fleet') }}
    </a>

    {{-- Hero header --}}
    <div class="flex flex-wrap items-center justify-between gap-4 rounded-xl border border-line bg-surface p-5 shadow-panel">
        <div class="flex min-w-0 items-center gap-4">
            <span @class([
                'grid h-12 w-12 shrink-0 place-items-center rounded-lg border',
                'border-online/30 bg-online/10 text-online' => $server->status === 'online',
                'border-warning/30 bg-warning/10 text-warning' => $server->status === 'warning',
                'border-offline/30 bg-offline/10 text-offline' => $server->status === 'offline',
                'border-cyan/30 bg-cyan/10 text-cyan' => $server->status === 'pending',
            ])>
                <x-icon name="server" class="h-6 w-6" />
            </span>
            <div class="min-w-0">
                <div class="flex flex-wrap items-center gap-2.5">
                    <h2 class="truncate font-display text-2xl font-semibold text-ink">{{ $server->name }}</h2>
                    <x-status-pill :status="$server->status">{{ $statusLabel }}</x-status-pill>
                </div>
                <p class="mt-1.5 flex flex-wrap items-center gap-x-2.5 gap-y-1 font-mono text-[11px] text-ink-3">
                    <span class="text-ink-2">{{ $server->hostname }}</span>
                    <span class="text-ink-4">·</span>
                    <span>{{ $server->ip }}</span>
                    <span class="text-ink-4">·</span>
                    <span>{{ $server->os }}</span>
                    <span class="text-ink-4">·</span>
                    <span>{{ __('servers.uptime', ['value' => $server->uptime ?: '—']) }}</span>
                    <span class="text-ink-4">·</span>
                    <span>{{ __('servers.last_seen', ['value' => optional($server->last_seen_at)->diffForHumans() ?? '—']) }}</span>
                </p>
            </div>
        </div>
        <div class="flex shrink-0 items-center gap-2">
            <x-btn variant="secondary" wire:click="$dispatch('openModal', { component: 'modals.system-update', arguments: { serverId: {{ $server->id }} } })">
                <x-icon name="rotate" class="h-3.5 w-3.5" /> {{ __('servers.system_updates') }}
            </x-btn>
            <x-btn variant="secondary" wire:click="openFiles">
                <x-icon name="folder" class="h-3.5 w-3.5" /> {{ __('servers.files') }}
            </x-btn>
        </div>
    </div>

    @if ($ready && ! $connected)
        <div class="flex items-center gap-2.5 rounded-lg border border-warning/25 bg-warning/10 px-4 py-3">
            <x-icon name="alert" class="h-4 w-4 shrink-0 text-warning" />
            <p class="text-sm text-ink-2">{{ __('servers.offline_banner') }}</p>
        </div>
    @endif

    {{-- SSH-Zugang (Credential) --}}
    @php
        $cred = $server->credential;
        $credStatus = $cred ? ($cred->disabled ? 'offline' : 'online') : null;
        $credStatusLabel = $cred ? ($cred->disabled ? __('servers.cred_locked') : __('servers.cred_active')) : null;
        $credAuthLabel = $cred ? ($cred->auth_type === 'key' ? __('servers.cred_auth_key') : __('servers.cred_auth_password')) : null;
    @endphp
    <x-panel :title="__('servers.ssh_access_title')" :subtitle="__('servers.ssh_access_subtitle')" :padded="false">
        @if ($cred)
            <div class="flex flex-wrap items-center gap-x-4 gap-y-3 px-4 py-4 sm:px-5">
                <span @class([
                    'grid h-10 w-10 shrink-0 place-items-center rounded-md border',
                    'border-online/30 bg-online/10 text-online' => ! $cred->disabled,
                    'border-offline/30 bg-offline/10 text-offline' => $cred->disabled,
                ])>
                    <x-icon name="shield" class="h-5 w-5" />
                </span>
                <div class="min-w-0 flex-1">
                    <div class="flex flex-wrap items-center gap-2">
                        <p class="truncate font-display text-sm font-semibold text-ink">{{ $cred->name ?: $cred->username }}</p>
                        <x-status-pill :status="$credStatus" class="shrink-0">{{ $credStatusLabel }}</x-status-pill>
                        <x-badge tone="neutral" class="shrink-0">{{ $credAuthLabel }}</x-badge>
                    </div>
                    <p class="mt-1.5 truncate font-mono text-[11px] text-ink-3">
                        <span class="text-ink-2">{{ $cred->username }}</span>@<span>{{ $server->ip }}</span>
                    </p>
                </div>
                <div class="flex shrink-0 flex-wrap items-center gap-2">
                    <x-btn variant="secondary" wire:click="$dispatch('openModal', { component: 'modals.edit-credential', arguments: { serverId: {{ $server->id }} } })">
                        <x-icon name="settings" class="h-3.5 w-3.5" /> {{ __('common.edit') }}
                    </x-btn>
                    <x-btn variant="secondary" wire:click="toggleCredential" wire:target="toggleCredential" wire:loading.attr="disabled">
                        <x-icon name="power" class="h-3.5 w-3.5" wire:loading.remove wire:target="toggleCredential" />
                        <svg wire:loading wire:target="toggleCredential" class="h-3.5 w-3.5 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
                        {{ $cred->disabled ? __('common.unlock') : __('common.lock') }}
                    </x-btn>
                    <x-btn variant="danger-soft" wire:click="confirmDeleteCredential">
                        <x-icon name="trash" class="h-3.5 w-3.5" /> {{ __('common.delete') }}
                    </x-btn>
                </div>
            </div>
        @else
            <div class="flex flex-wrap items-center gap-x-4 gap-y-3 px-4 py-4 sm:px-5">
                <span class="grid h-10 w-10 shrink-0 place-items-center rounded-md border border-line bg-inset text-ink-3">
                    <x-icon name="shield" class="h-5 w-5" />
                </span>
                <div class="min-w-0 flex-1">
                    <p class="truncate font-display text-sm font-semibold text-ink">{{ __('servers.cred_none_title') }}</p>
                    <p class="mt-1.5 font-mono text-[11px] text-ink-3">{{ __('servers.cred_none_hint') }}</p>
                </div>
                <x-btn variant="accent" class="shrink-0" wire:click="$dispatch('openModal', { component: 'modals.edit-credential', arguments: { serverId: {{ $server->id }} } })">
                    <x-icon name="plus" class="h-3.5 w-3.5" /> {{ __('servers.cred_deposit') }}
                </x-btn>
            </div>
        @endif
    </x-panel>

    {{-- Vitals: live gauges, full width, dense --}}
    <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
        @foreach ($vitals as $v)
            <div class="flex items-center gap-4 rounded-xl border border-line bg-surface p-4 shadow-panel">
                <x-ring :value="$v['val']" size="lg" :tone="$tone($v['val'])" />
                <div class="min-w-0">
                    <p class="flex items-center gap-1.5 font-mono text-xs uppercase tracking-[0.2em] text-accent-text">
                        <x-icon :name="$v['icon']" class="h-3.5 w-3.5" />{{ $v['label'] }}
                    </p>
                    <p class="mt-2 font-mono text-[11px] leading-relaxed text-ink-4">{{ $v['sub'] }}</p>
                </div>
            </div>
        @endforeach
    </div>

    @if ($ready)
        {{-- Spezifikationen + Sicherheit --}}
        <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
            <x-panel :title="__('servers.specs_title')" :subtitle="__('servers.specs_subtitle')" :padded="false">
                <dl class="divide-y divide-line">
                    @foreach ($specRows as [$key, $val])
                        <div class="flex items-center justify-between gap-3 px-4 py-2.5 sm:px-5">
                            <dt class="text-sm text-ink-2">{{ $key }}</dt>
                            <dd class="truncate font-mono text-sm text-ink">{{ $val }}</dd>
                        </div>
                    @endforeach
                </dl>
            </x-panel>

            <x-panel :title="__('servers.security_title')" :subtitle="__('servers.security_subtitle')" :padded="false">
                <div class="divide-y divide-line">
                    @foreach ($hardening as $check)
                        @php
                            $supported = $check['supported'] ?? true;
                            // Neutral rows (auto-updates) are a preference, not a security
                            // verdict: muted glyph + aktiv/inaktiv, never SICHER/OFFEN.
                            $neutral = $check['neutral'] ?? false;
                        @endphp
                        {{-- One calm state signal: a lock glyph (geschlossen = sicher, offen = offen);
                             unsupported/neutral items render muted, no warning tone. --}}
                        <div class="flex items-center gap-3.5 px-4 py-3 transition-colors hover:bg-raised/40 sm:px-5">
                            <span @class([
                                'grid h-9 w-9 shrink-0 place-items-center rounded-md border',
                                'border-online/25 bg-online/10 text-online' => $supported && ! $neutral && $check['secure'],
                                'border-warning/25 bg-warning/10 text-warning' => $supported && ! $neutral && ! $check['secure'],
                                'border-line bg-raised text-ink-4' => ! $supported || $neutral,
                            ])>
                                <x-icon :name="$supported && ! $neutral && ! $check['secure'] ? 'lock-open' : 'lock'" class="h-4 w-4" />
                            </span>
                            <div class="min-w-0 flex-1">
                                <p class="flex items-center gap-2 truncate text-sm text-ink">
                                    {{ $check['label'] }}
                                    @if (! $supported)
                                        <span class="shrink-0 font-mono text-[10px] uppercase tracking-wider text-ink-4">{{ __('common.unsupported') }}</span>
                                    @elseif ($neutral)
                                        <span class="shrink-0 font-mono text-[10px] uppercase tracking-wider text-ink-3">{{ $check['featureOn'] ? __('common.active') : __('common.inactive') }}</span>
                                    @else
                                        <span @class([
                                            'shrink-0 font-mono text-[10px] uppercase tracking-wider',
                                            'text-online' => $check['secure'],
                                            'text-warning' => ! $check['secure'],
                                        ])>{{ $check['secure'] ? __('servers.check_secure') : __('servers.check_open') }}</span>
                                    @endif
                                </p>
                                <p class="truncate font-mono text-[11px] text-ink-3">{{ $supported ? $check['detail'] : $check['reason'] }}</p>
                                {{-- Key-only warning: disabling password login leaves SSH-key access only. --}}
                                @if ($supported && $check['key'] === 'ssh_password' && $check['featureOn'])
                                    <p class="mt-0.5 font-mono text-[11px] text-ink-4">{{ __('servers.ssh_key_only_hint') }}</p>
                                @endif
                            </div>
                            @if ($supported)
                                @if ($check['key'] === 'fail2ban')
                                    <x-btn variant="secondary" size="sm" icon class="shrink-0" title="{{ __('servers.fail2ban_configure') }}"
                                           wire:click="$dispatch('openModal', { component: 'modals.fail2ban-config', arguments: { serverId: {{ $server->id }} } })">
                                        <x-icon name="settings" class="h-3.5 w-3.5" />
                                    </x-btn>
                                @endif
                                {{-- Uniform style across all rows (R10): always the bordered secondary button. --}}
                                <x-btn variant="secondary" size="sm" class="shrink-0"
                                       wire:click="$dispatch('openModal', { component: 'modals.hardening-action', arguments: { serverId: {{ $server->id }}, action: '{{ $check['key'] }}', enable: {{ $check['featureOn'] ? 'false' : 'true' }} } })">
                                    {{ $check['featureOn'] ? __('common.disable') : __('common.enable') }}
                                </x-btn>
                            @endif
                        </div>
                    @endforeach
                </div>
            </x-panel>
        </div>

        {{-- Firewall + fail2ban: only the tools actually installed, side-by-side on lg --}}
        @php
            $fw = $firewall ?? [];
            $fwTool = $fw['tool'] ?? 'ufw';
            $fwToolLabel = $fwTool === 'firewalld' ? 'firewalld' : 'UFW';
            $fwSupported = $fw['supported'] ?? false;
            $fwInstalled = $fw['installed'] ?? false;
            $fwActive = $fw['active'] ?? false;
            $fwManageable = $fw['manageable'] ?? false;
            $fwReadOnly = $fw['readOnly'] ?? false;
            $fwReadError = $fw['readError'] ?? false;
            $fwRules = $fw['rules'] ?? [];
            $fwDefaults = $fw['defaults'] ?? [];
            $actTone = ['ALLOW' => 'online', 'LIMIT' => 'warning', 'DENY' => 'offline', 'REJECT' => 'offline'];

            $f2b = $fail2ban ?? [];
            $f2bSupported = $f2b['supported'] ?? false;
            $f2bReadError = $f2b['readError'] ?? false;
            $f2bInstalled = $f2b['installed'] ?? false;
            $f2bActive = $f2b['active'] ?? false;
            $f2bJails = $f2b['jails'] ?? [];
            $f2bIgnore = $f2b['ignoreip'] ?? [];
            $f2bBanned = array_sum(array_map(fn ($j) => $j['currentlyBanned'] ?? 0, $f2bJails));

            // Show a panel when its tool is actually installed (active or inactive), OR
            // when the privileged read FAILED (readError) — a failed probe must stay
            // visible so the operator can tell it apart from a genuinely-absent tool
            // (both report installed=false). When truly absent, the Sicherheit checklist
            // row carries the "Aktivieren" install path — so the redundant "nicht
            // installiert" box is gone.
            $showFw = $fwSupported && ($fwInstalled || $fwReadError);
            $showF2b = $f2bSupported && ($f2bInstalled || $f2bReadError);
            $panelCount = ($showFw ? 1 : 0) + ($showF2b ? 1 : 0);
        @endphp

        @if ($panelCount > 0)
            {{-- Two tools → side-by-side; a lone tool is capped so it doesn't stretch edge-to-edge. --}}
            <div @class([
                'grid grid-cols-1 gap-3',
                'lg:grid-cols-2 lg:items-start' => $panelCount === 2,
                'lg:max-w-2xl' => $panelCount === 1,
            ])>
                @if ($showFw)
                    {{-- Firewall-Regeln --}}
                    <x-panel :title="__('servers.firewall_title')"
                             :subtitle="$fwToolLabel . ($fwActive ? __('servers.firewall_sub_active') : __('servers.firewall_sub_inactive'))"
                             :padded="false">
                        @if ($fwManageable)
                            <x-slot:actions>
                                <x-btn variant="accent" size="sm"
                                       wire:click="$dispatch('openModal', { component: 'modals.firewall-rule', arguments: { serverId: {{ $server->id }}, tool: '{{ $fwTool }}' } })">
                                    <x-icon name="plus" class="h-3.5 w-3.5" /> {{ __('servers.firewall_add_rule') }}
                                </x-btn>
                            </x-slot:actions>
                        @endif

                        @if ($fwReadError)
                            <div class="flex flex-wrap items-center gap-2.5 px-4 py-4 sm:px-5">
                                <x-icon name="alert" class="h-4 w-4 shrink-0 text-warning" />
                                <p class="font-mono text-[11px] text-ink-3">{{ __('servers.firewall_read_error') }}</p>
                            </div>
                        @elseif ($fwTool === 'firewalld' && ! $fwActive)
                            <div class="flex flex-wrap items-center justify-between gap-3 px-4 py-4 sm:px-5">
                                <p class="font-mono text-[11px] text-ink-3">{{ __('servers.firewalld_inactive') }}</p>
                                <x-btn variant="secondary" size="sm"
                                       wire:click="$dispatch('openModal', { component: 'modals.hardening-action', arguments: { serverId: {{ $server->id }}, action: 'firewall', enable: true } })">
                                    {{ __('common.enable') }}
                                </x-btn>
                            </div>
                        @else
                            <div class="flex flex-wrap items-center gap-2 border-b border-line px-4 py-2.5 sm:px-5">
                                @if ($fwTool === 'ufw')
                                    <span class="font-mono text-[10px] uppercase tracking-wider text-ink-4">{{ __('servers.firewall_default') }}</span>
                                    <x-badge tone="neutral">{{ __('servers.firewall_incoming', ['value' => $fwDefaults['incoming'] ?? '—']) }}</x-badge>
                                    <x-badge tone="neutral">{{ __('servers.firewall_outgoing', ['value' => $fwDefaults['outgoing'] ?? '—']) }}</x-badge>
                                @else
                                    <span class="font-mono text-[10px] uppercase tracking-wider text-ink-4">{{ __('servers.firewall_zone') }}</span>
                                    <x-badge tone="neutral">{{ $fwDefaults['zone'] ?? '—' }}</x-badge>
                                @endif
                            </div>

                            @if ($fwReadOnly)
                                <div class="flex items-start gap-2.5 border-b border-line bg-inset px-4 py-2.5 sm:px-5">
                                    <x-icon name="lock" class="mt-0.5 h-3.5 w-3.5 shrink-0 text-ink-4" />
                                    <p class="font-mono text-[11px] leading-relaxed text-ink-3">{{ __('servers.firewall_readonly') }}</p>
                                </div>
                            @endif

                            <div class="divide-y divide-line">
                                @forelse ($fwRules as $rule)
                                    {{-- $ruleTone, NOT $tone: the page-level $tone is a closure used by the
                                         gauges/Volumes panel; reusing the name here would clobber it. --}}
                                    @php $ruleTone = $actTone[$rule['action'] ?? 'ALLOW'] ?? 'online'; @endphp
                                    <div class="flex items-center gap-3 px-4 py-2.5 sm:px-5">
                                        <span @class([
                                            'h-2 w-2 shrink-0 rounded-full',
                                            'bg-online' => $ruleTone === 'online',
                                            'bg-warning' => $ruleTone === 'warning',
                                            'bg-offline' => $ruleTone === 'offline',
                                        ])></span>
                                        <div class="min-w-0 flex-1">
                                            <p class="truncate font-mono text-sm text-ink">{{ $rule['label'] ?? ($rule['to'] ?? $rule['raw']) }}</p>
                                            @if ($fwTool === 'ufw' && ($rule['from'] ?? '') !== '' && ! \Illuminate\Support\Str::contains($rule['from'], 'Anywhere'))
                                                <p class="truncate font-mono text-[11px] text-ink-3">{{ __('servers.firewall_rule_from', ['value' => $rule['from']]) }}</p>
                                            @endif
                                        </div>
                                        <span @class([
                                            'shrink-0 font-mono text-[10px] uppercase tracking-wider',
                                            'text-online' => $ruleTone === 'online',
                                            'text-warning' => $ruleTone === 'warning',
                                            'text-offline' => $ruleTone === 'offline',
                                        ])>{{ strtolower($rule['action'] ?? 'allow') }}</span>
                                        @unless ($fwReadOnly)
                                            <x-btn variant="danger-soft" size="sm" icon class="shrink-0" title="{{ __('servers.firewall_remove_rule') }}"
                                                   wire:click="confirmDeleteRule({{ $loop->index }})">
                                                <x-icon name="trash" class="h-3.5 w-3.5" />
                                            </x-btn>
                                        @endunless
                                    </div>
                                @empty
                                    <div class="px-4 py-4 sm:px-5">
                                        <p class="font-mono text-[11px] text-ink-3">{{ __('servers.firewall_no_rules') }}</p>
                                    </div>
                                @endforelse
                            </div>
                        @endif
                    </x-panel>
                @endif

                @if ($showF2b)
                    {{-- fail2ban-Status --}}
                    <x-panel :title="__('servers.fail2ban_title')"
                             :subtitle="$f2bActive ? __('servers.fail2ban_sub_active', ['count' => $f2bBanned]) : __('servers.fail2ban_sub_installed_inactive')"
                             :padded="false">
                        @if ($f2bActive)
                            <x-slot:actions>
                                <x-btn variant="secondary" size="sm" icon title="{{ __('servers.fail2ban_configure') }}"
                                       wire:click="$dispatch('openModal', { component: 'modals.fail2ban-config', arguments: { serverId: {{ $server->id }} } })">
                                    <x-icon name="settings" class="h-3.5 w-3.5" />
                                </x-btn>
                                <x-btn variant="accent" size="sm"
                                       wire:click="$dispatch('openModal', { component: 'modals.fail2ban-ban', arguments: { serverId: {{ $server->id }}, jails: {{ \Illuminate\Support\Js::from(array_map(fn ($j) => $j['name'], $f2bJails)) }} } })">
                                    <x-icon name="lock" class="h-3.5 w-3.5" /> {{ __('servers.fail2ban_ban_ip') }}
                                </x-btn>
                            </x-slot:actions>
                        @endif

                        @if ($f2bReadError)
                            <div class="flex flex-wrap items-center gap-2.5 px-4 py-4 sm:px-5">
                                <x-icon name="alert" class="h-4 w-4 shrink-0 text-warning" />
                                <p class="font-mono text-[11px] text-ink-3">{{ __('servers.fail2ban_read_error') }}</p>
                            </div>
                        @elseif (! $f2bActive)
                            <div class="flex flex-wrap items-center justify-between gap-3 px-4 py-4 sm:px-5">
                                <p class="font-mono text-[11px] text-ink-3">{{ __('servers.fail2ban_state_installed_inactive') }}</p>
                                <x-btn variant="secondary" size="sm"
                                       wire:click="$dispatch('openModal', { component: 'modals.hardening-action', arguments: { serverId: {{ $server->id }}, action: 'fail2ban', enable: true } })">
                                    {{ __('common.enable') }}
                                </x-btn>
                            </div>
                        @else
                            <div class="divide-y divide-line">
                                @foreach ($f2bJails as $jail)
                                    <div class="px-4 py-3 sm:px-5">
                                        <div class="flex flex-wrap items-center justify-between gap-2">
                                            <p class="font-mono text-sm text-ink">{{ $jail['name'] }}</p>
                                            <p class="font-mono text-[11px] text-ink-3">
                                                <span @class(['text-offline' => ($jail['currentlyBanned'] ?? 0) > 0])>{{ __('servers.fail2ban_banned', ['count' => $jail['currentlyBanned'] ?? 0]) }}</span>
                                                · {{ __('servers.fail2ban_failed', ['count' => $jail['currentlyFailed'] ?? 0]) }}
                                            </p>
                                        </div>
                                        @if (count($jail['bannedIps'] ?? []))
                                            <div class="mt-2 space-y-1">
                                                @foreach ($jail['bannedIps'] as $ip)
                                                    <div class="flex items-center justify-between gap-2">
                                                        <span class="min-w-0 break-all font-mono text-[11px] text-ink-2">{{ $ip }}</span>
                                                        <x-btn variant="secondary" size="sm" class="shrink-0" wire:click="unbanIp({{ \Illuminate\Support\Js::from($jail['name']) }}, {{ \Illuminate\Support\Js::from($ip) }})">{{ __('common.unlock') }}</x-btn>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @else
                                            <p class="mt-1 font-mono text-[11px] text-ink-4">{{ __('servers.fail2ban_no_banned') }}</p>
                                        @endif
                                    </div>
                                @endforeach
                            </div>

                            {{-- Whitelist (ignoreip) --}}
                            <div class="border-t border-line px-4 py-3 sm:px-5">
                                <p class="mb-2 font-mono text-[10px] uppercase tracking-wider text-ink-4">{{ __('servers.whitelist_label') }}</p>
                                <div class="flex flex-wrap gap-1.5">
                                    @foreach ($f2bIgnore as $ip)
                                        <span class="inline-flex items-center gap-1.5 rounded-sm border border-line bg-inset px-2 py-1 font-mono text-[11px] text-ink-2">
                                            {{ $ip }}
                                            @unless (in_array($ip, ['127.0.0.1/8', '::1'], true))
                                                <button type="button" wire:click="removeIgnore({{ \Illuminate\Support\Js::from($ip) }})" class="text-ink-4 hover:text-offline" title="{{ __('common.remove') }}">
                                                    <x-icon name="x" class="h-3 w-3" />
                                                </button>
                                            @endunless
                                        </span>
                                    @endforeach
                                </div>
                                <div class="mt-2.5 flex items-center gap-2">
                                    <input wire:model="newIgnoreIp" wire:keydown.enter="addIgnore" type="text" placeholder="{{ __('servers.whitelist_placeholder') }}"
                                           class="h-8 w-full max-w-xs rounded-md border border-line bg-inset px-2.5 font-mono text-[11px] text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none" />
                                    <x-btn variant="secondary" size="sm" wire:click="addIgnore">{{ __('common.add') }}</x-btn>
                                </div>
                            </div>
                        @endif
                    </x-panel>
                @endif
            </div>
        @endif

        {{-- Volumes + Netzwerk-Interfaces --}}
        <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
            <x-panel :title="__('servers.volumes_title')" :subtitle="__('servers.mountpoints', ['count' => count($volumes)])" :padded="false">
                <div class="divide-y divide-line">
                    @forelse ($volumes as $vol)
                        @php $vt = $tone((int) $vol['used']); @endphp
                        <div class="px-4 py-3 sm:px-5">
                            <div class="flex items-center justify-between gap-3">
                                <p class="truncate font-mono text-sm text-ink">{{ $vol['mount'] }}</p>
                                <p class="shrink-0 font-mono text-[11px] text-ink-3">
                                    <span class="text-ink-2">{{ $vol['fs'] }}</span> · {{ $vol['size'] }}
                                </p>
                            </div>
                            <div class="mt-2 flex items-center gap-3">
                                <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-inset">
                                    <div class="h-full rounded-full {{ $barColor[$vt] }}" style="width: {{ $vol['used'] }}%"></div>
                                </div>
                                <span class="tabular w-10 shrink-0 text-right font-mono text-[11px] text-ink-2">{{ $vol['used'] }}%</span>
                            </div>
                        </div>
                    @empty
                        <p class="px-5 py-8 text-center font-mono text-[11px] text-ink-3">{{ __('servers.no_volumes') }}</p>
                    @endforelse
                </div>
            </x-panel>

            <x-panel :title="__('servers.interfaces_title')" :subtitle="__('servers.interfaces_count', ['count' => count($interfaces)])" :padded="false">
                <div class="overflow-x-auto">
                    <table class="w-full min-w-[34rem] text-left">
                        <thead>
                            <tr class="border-b border-line font-mono text-[10px] uppercase tracking-wider text-ink-4">
                                <th class="px-4 py-2 font-medium sm:px-5">{{ __('servers.col_name') }}</th>
                                <th class="px-4 py-2 font-medium">{{ __('servers.col_ip') }}</th>
                                <th class="px-4 py-2 font-medium">{{ __('servers.col_mac') }}</th>
                                <th class="px-4 py-2 text-right font-medium">{{ __('servers.col_rx') }}</th>
                                <th class="px-4 py-2 pr-4 text-right font-medium sm:pr-5">{{ __('servers.col_tx') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-line">
                            @foreach ($interfaces as $if)
                                <tr class="font-mono text-[11px] text-ink-2">
                                    <td class="px-4 py-2.5 text-ink sm:px-5">{{ $if['name'] }}</td>
                                    <td class="px-4 py-2.5">{{ $if['ip'] }}</td>
                                    <td class="px-4 py-2.5">{{ $if['mac'] }}</td>
                                    <td class="tabular px-4 py-2.5 text-right">{{ $if['rx'] }}</td>
                                    <td class="tabular px-4 py-2.5 pr-4 text-right sm:pr-5">{{ $if['tx'] }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </x-panel>
        </div>

        {{-- SSH keys --}}
        <x-panel :title="__('servers.ssh_keys_title')" :subtitle="__('servers.ssh_keys_authorized', ['count' => count($sshKeys)])" :padded="false">
            <x-slot:actions>
                <x-btn variant="accent" wire:click="$dispatch('openModal', { component: 'modals.add-ssh-key', arguments: { serverId: {{ $server->id }} } })">
                    <x-icon name="plus" class="h-3.5 w-3.5" /> {{ __('servers.ssh_keys_add') }}
                </x-btn>
            </x-slot:actions>
            <div class="divide-y divide-line">
                @forelse ($sshKeys as $key)
                    <div class="flex items-center gap-3 px-4 py-3 sm:px-5">
                        <span class="grid h-7 w-7 shrink-0 place-items-center rounded-sm bg-raised text-ink-3">
                            <x-icon name="shield" class="h-3.5 w-3.5" />
                        </span>
                        <div class="min-w-0 flex-1">
                            <div class="flex items-center gap-2">
                                <p class="truncate font-mono text-sm text-ink">{{ $key['comment'] }}</p>
                                <x-badge tone="neutral" class="shrink-0">{{ $key['type'] }}</x-badge>
                            </div>
                            <p class="truncate font-mono text-[11px] text-ink-3">{{ $key['fingerprint'] }}</p>
                        </div>
                        <x-btn variant="danger-soft" icon wire:click="confirmKeyRemoval({{ $loop->index }})" title="{{ __('servers.ssh_keys_remove') }}">
                            <x-icon name="trash" class="h-3.5 w-3.5" />
                        </x-btn>
                    </div>
                @empty
                    <p class="px-5 py-8 text-center font-mono text-[11px] text-ink-3">{{ __('servers.ssh_keys_none') }}</p>
                @endforelse
            </div>
        </x-panel>
    @else
        {{-- skeletons for the SSH-loaded sections --}}
        <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
            @foreach ([__('servers.specs_title'), __('servers.security_title')] as $t)
                <x-panel :title="$t" :subtitle="__('servers.loading')" :padded="false">
                    <div class="space-y-3 p-4 sm:p-5">
                        <x-skeleton class="h-3 w-full" /><x-skeleton class="h-3 w-2/3" /><x-skeleton class="h-3 w-5/6" /><x-skeleton class="h-3 w-1/2" />
                    </div>
                </x-panel>
            @endforeach
        </div>
        <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
            @foreach ([__('servers.volumes_title'), __('servers.interfaces_title')] as $t)
                <x-panel :title="$t" :subtitle="__('servers.loading')" :padded="false">
                    <div class="space-y-3 p-4 sm:p-5">
                        <x-skeleton class="h-3 w-full" /><x-skeleton class="h-3 w-3/4" /><x-skeleton class="h-3 w-5/6" />
                    </div>
                </x-panel>
            @endforeach
        </div>
        <x-panel :title="__('servers.ssh_keys_title')" :subtitle="__('servers.loading')" :padded="false">
            <div class="space-y-3 p-4 sm:p-5"><x-skeleton class="h-3 w-2/3" /><x-skeleton class="h-3 w-1/2" /></div>
        </x-panel>
    @endif
</div>