@extends('clients.layouts.app')

@section('title', 'Network Status')

@section('content')
    <div class="space-y-8 animate-in fade-in duration-700">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 pb-2">
            <div>
                <h1 class="text-4xl font-black text-slate-900 dark:text-white tracking-tight italic">Network Status</h1>
                <p class="text-sm text-slate-400 font-medium mt-1 uppercase tracking-widest">Real-time health and
                    infrastructure updates</p>
            </div>
            <div class="flex items-center space-x-2 bg-emerald-50 dark:bg-emerald-500/10 px-4 py-2 rounded-lg">
                <span class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></span>
                <span class="text-[10px] font-black text-emerald-500 uppercase tracking-widest">All Systems
                    Operational</span>
            </div>
        </div>

        @php
            $servers = [
                ['name' => 'Premium Hosting (US-East)', 'status' => 'Online', 'uptime' => '99.98%', 'load' => '0.45'],
                ['name' => 'Managed VPS Cluster', 'status' => 'Online', 'uptime' => '100%', 'load' => '1.12'],
                ['name' => 'DNS Cluster (Global)', 'status' => 'Online', 'uptime' => '100%', 'load' => '0.08'],
            ];
        @endphp

        <div class="space-y-6">
            <div
                class="bg-white dark:bg-[#1e293b] rounded-lg border border-slate-100 dark:border-white/5 shadow-sm overflow-hidden">
                <table class="w-full text-left">
                    <thead>
                        <tr class="bg-slate-50 dark:bg-white/5">
                            <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">
                                Infrasctructure Node</th>
                            <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Status
                            </th>
                            <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Uptime
                            </th>
                            <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Load</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-white/5">
                        @foreach($servers as $server)
                            <tr>
                                <td class="px-8 py-6 font-bold text-slate-700 dark:text-white">{{ $server['name'] }}</td>
                                <td class="px-8 py-6 text-emerald-500 font-black italic">{{ $server['status'] }}</td>
                                <td class="px-8 py-6 text-slate-500 font-bold">{{ $server['uptime'] }}</td>
                                <td class="px-8 py-6 text-slate-500 font-bold uppercase tracking-widest">{{ $server['load'] }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection