@props(['name', 'ip', 'status' => 'online', 'cpu' => 0, 'mem' => 0, 'os' => null])
@php
    $label = ['online' => 'Online', 'warning' => 'Warnung', 'offline' => 'Offline'][$status] ?? ucfirst($status);
@endphp
<a href="#" class="flex items-center gap-3 rounded-md border border-line bg-inset px-3 py-2.5 transition-colors hover:border-line-strong">
    <x-status-dot :status="$status" :ping="$status === 'online'" />
    <div class="min-w-0 flex-1">
        <p class="truncate text-sm text-ink">{{ $name }}</p>
        <p class="truncate font-mono text-[11px] text-ink-3">{{ $ip }}@if ($os) · {{ $os }}@endif</p>
    </div>
    <div class="hidden shrink-0 items-center gap-4 sm:flex">
        <div class="w-16">
            <p class="font-mono text-[10px] uppercase text-ink-4">CPU</p>
            <div class="mt-1 h-1 w-full overflow-hidden rounded-full bg-line">
                <div class="h-full rounded-full bg-accent" style="width: {{ $cpu }}%"></div>
            </div>
        </div>
        <div class="w-16">
            <p class="font-mono text-[10px] uppercase text-ink-4">RAM</p>
            <div class="mt-1 h-1 w-full overflow-hidden rounded-full bg-line">
                <div class="h-full rounded-full bg-cyan" style="width: {{ $mem }}%"></div>
            </div>
        </div>
    </div>
    <x-status-pill :status="$status" class="shrink-0">{{ $label }}</x-status-pill>
</a>