Virtnet.bond/extensions/Servers/Proxmox/views/components/ui/server-status.blade.php

{{--
    Server Status Indicator Component - TailAdmin style
    
    Usage:
    <x-proxmox::ui.server-status status="running" />
    <x-proxmox::ui.server-status status="stopped" showLabel />
    <x-proxmox::ui.server-status status="running" minimal />
--}}

@props([
    'status',
    'showLabel' => true,
    'size' => 'md',
    'minimal' => false,
])

@php
    $statusConfig = [
        'running' => [
            'color' => 'success',
            'label' => 'Running',
            'pulse' => true,
        ],
        'stopped' => [
            'color' => 'muted',
            'label' => 'Stopped',
            'pulse' => false,
        ],
        'paused' => [
            'color' => 'warning',
            'label' => 'Paused',
            'pulse' => false,
        ],
        'suspended' => [
            'color' => 'warning',
            'label' => 'Suspended',
            'pulse' => false,
        ],
        'migrating' => [
            'color' => 'info',
            'label' => 'Migrating',
            'pulse' => true,
        ],
        'starting' => [
            'color' => 'info',
            'label' => 'Starting',
            'pulse' => true,
        ],
        'stopping' => [
            'color' => 'warning',
            'label' => 'Stopping',
            'pulse' => true,
        ],
        'unknown' => [
            'color' => 'danger',
            'label' => 'Unknown',
            'pulse' => false,
        ],
    ];
    
    $config = $statusConfig[strtolower($status)] ?? $statusConfig['unknown'];
    
    $colorClasses = [
        'success' => 'text-success-600 dark:text-success-400',
        'warning' => 'text-warning-600 dark:text-warning-400',
        'danger' => 'text-error-600 dark:text-error-400',
        'info' => 'text-blue-light-600 dark:text-blue-light-400',
        'muted' => 'text-gray-500 dark:text-gray-400',
    ];
    
    $bgClasses = [
        'success' => 'bg-success-50 dark:bg-success-500/15',
        'warning' => 'bg-warning-50 dark:bg-warning-500/15',
        'danger' => 'bg-error-50 dark:bg-error-500/15',
        'info' => 'bg-blue-light-50 dark:bg-blue-light-500/15',
        'muted' => 'bg-gray-100 dark:bg-gray-800',
    ];
    
    $dotColorClasses = [
        'success' => 'bg-success-500',
        'warning' => 'bg-warning-500',
        'danger' => 'bg-error-500',
        'info' => 'bg-blue-light-500',
        'muted' => 'bg-gray-400 dark:bg-gray-500',
    ];
    
    $sizeClasses = [
        'sm' => 'text-theme-xs px-2 py-1 gap-1.5',
        'md' => 'text-theme-sm px-2.5 py-1.5 gap-2',
        'lg' => 'text-base px-3 py-2 gap-2.5',
    ];
    
    $dotSizes = [
        'sm' => 'size-1.5',
        'md' => 'size-2',
        'lg' => 'size-2.5',
    ];
    
    $textSizes = [
        'sm' => 'text-theme-xs',
        'md' => 'text-theme-sm',
        'lg' => 'text-base',
    ];
@endphp

@if($minimal)
    {{-- Minimal dot-only variant --}}
    <div {{ $attributes->class(['inline-flex items-center', 'gap-1.5' => $showLabel]) }}>
        <span class="relative flex {{ $dotSizes[$size] ?? $dotSizes['md'] }}">
            @if($config['pulse'])
                <span class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-60 {{ $dotColorClasses[$config['color']] ?? $dotColorClasses['muted'] }}"></span>
            @endif
            <span class="relative inline-flex rounded-full {{ $dotSizes[$size] ?? $dotSizes['md'] }} {{ $dotColorClasses[$config['color']] ?? $dotColorClasses['muted'] }}"></span>
        </span>
        @if($showLabel)
            <span class="font-medium {{ $colorClasses[$config['color']] ?? $colorClasses['muted'] }} {{ $textSizes[$size] ?? $textSizes['md'] }}">{{ $config['label'] }}</span>
        @endif
    </div>
@else
    {{-- Full badge variant --}}
    <div 
        {{ $attributes->class([
            'inline-flex items-center font-medium rounded-full',
            $bgClasses[$config['color']] ?? $bgClasses['muted'],
            $colorClasses[$config['color']] ?? $colorClasses['muted'],
            $sizeClasses[$size] ?? $sizeClasses['md'],
        ]) }}
    >
        <span class="relative flex {{ $dotSizes[$size] ?? $dotSizes['md'] }}">
            @if($config['pulse'])
                <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-50"></span>
            @endif
            <span class="relative inline-flex rounded-full bg-current {{ $dotSizes[$size] ?? $dotSizes['md'] }}"></span>
        </span>
        @if($showLabel)
            <span>{{ $config['label'] }}</span>
        @endif
    </div>
@endif