Forge Server Card code

@props([
    'name',
    'provider' => null,
    'type' => null,
    'region' => null,
    'ip' => null,
    'status' => 'Ready',
    'statusVariant' => 'green',
    'php' => null,
    'database' => null,
    'os' => null,
    'tags' => [],
    'metrics' => [],
    'href' => null,
])

@php
    /*
    | Forge-style server summary card. Designed for overview grids where status,
    | IP details, installed services and resource meters need to scan quickly.
    |
    | Usage:
    |   <x-ui.forge-server-card name="web-01" provider="Laravel VPS" ip="203.0.113.10" />
    */
    $tagList = collect($tags)->filter()->values();
    $metricList = collect($metrics)->filter(fn (array $metric): bool => filled($metric['label'] ?? null))->values();

    $classes = 'block min-w-0 rounded-xl border border-gray-200 bg-white p-5 shadow-sm transition dark:border-gray-800 dark:bg-gray-900';
@endphp

@if ($href)
    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes.' hover:border-brand-300 hover:bg-gray-50 dark:hover:border-brand-800 dark:hover:bg-gray-900/70']) }}>
@else
    <article {{ $attributes->merge(['class' => $classes]) }}>
@endif
        <div class="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
            <div class="min-w-0">
                <p class="truncate text-base font-semibold text-gray-900 dark:text-white">{{ $name }}</p>
                <div class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
                    @if ($provider)
                        <span>{{ $provider }}</span>
                    @endif
                    @if ($type)
                        <span>{{ $type }}</span>
                    @endif
                    @if ($region)
                        <span>{{ $region }}</span>
                    @endif
                </div>
            </div>

            <x-ui.badge :variant="$statusVariant" size="sm" dot class="w-fit sm:shrink-0">{{ $status }}</x-ui.badge>
        </div>

        <x-ui.status-bar class="mt-4" :items="array_values(array_filter([
            $ip ? ['icon' => 'globe', 'label' => 'IP', 'value' => $ip] : null,
            $php ? ['icon' => 'code', 'label' => 'PHP', 'value' => $php] : null,
            $database ? ['icon' => 'database', 'label' => 'DB', 'value' => $database] : null,
            $os ? ['icon' => 'disc', 'label' => 'OS', 'value' => $os] : null,
        ]))" />

        @if ($metricList->isNotEmpty())
            <div class="mt-5 grid gap-3 sm:grid-cols-2">
                @foreach ($metricList as $metric)
                    <x-ui.forge-resource-meter
                        :label="$metric['label']"
                        :value="$metric['value'] ?? null"
                        :detail="$metric['detail'] ?? null"
                        :percent="$metric['percent'] ?? null"
                        :variant="$metric['variant'] ?? 'brand'"
                        :icon="$metric['icon'] ?? null"
                        class="border-gray-100 bg-gray-50 p-3 dark:border-gray-800 dark:bg-gray-950/40"
                    />
                @endforeach
            </div>
        @endif

        @if ($tagList->isNotEmpty())
            <div class="mt-5 flex flex-wrap gap-2">
                @foreach ($tagList as $tag)
                    <x-ui.badge variant="gray" size="sm">{{ $tag }}</x-ui.badge>
                @endforeach
            </div>
        @endif
@if ($href)
    </a>
@else
    </article>
@endif