@props([
    'serviceStatus',
    'serviceColor',
    'onlineUsers',
    'emulatorStatus',
    'dbStatus',
    'dbColor',
    'clientExists',
    'clientColor',
    'clientText',
    'rendererExists',
    'rendererColor',
    'rendererText',
    'webrootText',
    'webrootColor',
])

<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:16px;">
    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
            <div style="background:#3b82f615;padding:10px;border-radius:12px;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/></svg>
            </div>
            <span style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#94a3b8;">Emulator</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f1f5f9;">
            <span style="color:#64748b;">Status</span>
            <span style="font-weight:600;color:{{ $serviceColor }};background:{{ $serviceColor }}15;padding:2px 10px;border-radius:20px;font-size:12px;">{{ $serviceStatus }}</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f1f5f9;">
            <span style="color:#64748b;">Online</span>
            <span style="font-weight:600;color:#1e293b;">{{ $emulatorStatus }}</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f1f5f9;">
            <span style="color:#64748b;">Gebruikers</span>
            <span style="font-weight:700;color:#22c55e;font-size:18px;">{{ $onlineUsers }}</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:10px 0;">
            <span style="color:#64748b;">Database</span>
            <span style="font-weight:600;color:{{ $dbColor }};">{{ $dbStatus }}</span>
        </div>
    </div>
    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
            <div style="background:#8b5cf615;padding:10px;border-radius:12px;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
            </div>
            <span style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#94a3b8;">Nitro</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f1f5f9;">
            <span style="color:#64748b;">Client</span>
            <span style="font-weight:600;color:{{ $clientColor }};background:{{ $clientColor }}15;padding:2px 10px;border-radius:20px;font-size:12px;">{{ $clientText }}</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f1f5f9;">
            <span style="color:#64748b;">Renderer</span>
            <span style="font-weight:600;color:{{ $rendererColor }};background:{{ $rendererColor }}15;padding:2px 10px;border-radius:20px;font-size:12px;">{{ $rendererText }}</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:10px 0;">
            <span style="color:#64748b;">Webroot</span>
            <span style="font-weight:600;color:{{ $webrootColor }};background:{{ $webrootColor }}15;padding:2px 10px;border-radius:20px;font-size:12px;">{{ $webrootText }}</span>
        </div>
    </div>
</div>