    <div class="mb-6 flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold dark:text-white">Server Matrix</h1>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Real-time status and whitelist controls</p>
        </div>
        <div class="space-x-3">
            <button hx-post="/admin/servers/sync-all/tx1" 
                    hx-swap="innerHTML" 
                    hx-target="#sync-result"
                    class="bg-fire hover:bg-orange-600 text-white px-4 py-2 rounded-md text-sm font-medium shadow transition-colors">
                🔥 Sync All Dallas
            </button>
            <button hx-post="/admin/servers/sync-all/nc1" 
                    hx-swap="innerHTML" 
                    hx-target="#sync-result"
                    class="bg-frost hover:bg-cyan-600 text-white px-4 py-2 rounded-md text-sm font-medium shadow transition-colors">
                ❄️ Sync All Charlotte
            </button>
            <span id="sync-result" class="text-sm ml-2"></span>
        </div>
    </div>

    <div hx-get="/admin/servers/matrix" 
         hx-trigger="load, every 15s" 
         class="w-full">
        
        <div class="flex items-center justify-center h-64">
            <div class="text-center">
                <div class="text-4xl mb-4 animate-spin">⏳</div>
                <p class="text-gray-500 dark:text-gray-400">Loading Fleet Telemetry...</p>
            </div>
        </div>

    </div>

<script>
async function saveVersion(identifier) {
    const input = document.getElementById('version-input-' + identifier);
    const result = document.getElementById('version-result-' + identifier);
    const version = input.value.trim();

    if (!version) {
        result.innerHTML = '<span style="color:#ef4444">Version cannot be empty</span>';
        return;
    }

    result.innerHTML = '<span style="color:#888">Saving...</span>';

    try {
        const res = await fetch('/admin/servers/' + identifier + '/set-version', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'CSRF-Token': document.querySelector('meta[name="csrf-token"]') ?
                    document.querySelector('meta[name="csrf-token"]').content :
                    '<%= csrfToken %>'
            },
            body: JSON.stringify({ version })
        });
        const text = await res.text();
        result.innerHTML = text;

        if (res.ok) {
            const span = document.getElementById('version-text-' + identifier);
            if (span) { span.textContent = version; span.style.color = '#4ade80'; }
        }
    } catch (err) {
        result.innerHTML = '<span style="color:#ef4444">❌ Failed to save</span>';
    }
}

function toggleVersionForm(identifier) {
    document.getElementById('version-form-' + identifier).style.display = 'block';
    document.getElementById('version-edit-btn-' + identifier).style.display = 'none';
}

function hideVersionForm(identifier) {
    document.getElementById('version-form-' + identifier).style.display = 'none';
    document.getElementById('version-edit-btn-' + identifier).style.display = 'inline';
}
</script>
