firefrost-services/services/arbiter-3.0/src/views/admin/servers/_matrix_body.ejs

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <div>
        <h2 class="text-lg font-bold mb-4 flex items-center gap-2 text-gray-800 dark:text-gray-200">
            <span>🔥</span> Dallas Node (TX1)
        </h2>
        <div class="space-y-4">
            <% txServers.forEach(server => { 
                const isOnline = server.log.is_online;
                const hasError = !!server.log.last_error;
                const discordComplete = server.discord?.complete;
                let borderClass = 'border-gray-200 dark:border-gray-700';
                if (isOnline && !hasError) borderClass = 'border-green-500 shadow-[0_0_10px_rgba(34,197,94,0.2)]';
                if (hasError) borderClass = 'border-red-500 shadow-[0_0_10px_rgba(239,68,68,0.2)]';
            %>
                <div class="bg-white dark:bg-darkcard rounded-lg border-l-4 <%= borderClass %> p-4">
                    <div class="flex justify-between items-start mb-2">
                        <div>
                            <h3 class="font-bold text-gray-900 dark:text-white"><%= server.name %></h3>
                            <p class="text-xs text-gray-500 font-mono"><%= server.identifier %></p>
                        </div>
                        <div class="text-right">
                            <span class="inline-flex items-center gap-1.5 text-xs font-medium px-2 py-1 rounded-full <%= isOnline ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400' %>">
                                <span class="w-1.5 h-1.5 rounded-full <%= isOnline ? 'bg-green-500 animate-pulse' : 'bg-gray-400' %>"></span>
                                <%= isOnline ? 'Online' : 'Offline' %>
                            </span>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4 text-sm mt-4 mb-4">
                        <div>
                            <span class="text-gray-500 dark:text-gray-400 block text-xs">Whitelist</span>
                            <span class="font-medium dark:text-gray-200">
                                <%= server.whitelistEnabled ? '✅ Enabled' : '🔓 Disabled' %>
                            </span>
                        </div>
                        <div>
                            <span class="text-gray-500 dark:text-gray-400 block text-xs">Last Sync</span>
                            <span class="font-medium dark:text-gray-200 text-xs">
                                <%= server.log.last_successful_sync ? new Date(server.log.last_successful_sync).toLocaleString() : 'Never' %>
                            </span>
                        </div>
                    </div>
                    <!-- Discord Channel Status -->
                    <div class="mb-4">
                        <span class="text-gray-500 dark:text-gray-400 block text-xs mb-1">Discord Channels</span>
                        <% if (discordComplete) { %>
                            <span class="text-green-600 dark:text-green-400 text-sm font-medium">✅ All 4 channels</span>
                        <% } else if (server.discord?.missing?.length > 0) { %>
                            <div class="bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-400 p-2 rounded text-xs">
                                <strong>Missing:</strong> <%= server.discord.missing.join(', ') %>
                            </div>
                        <% } else { %>
                            <span class="text-gray-500 dark:text-gray-400 text-sm">Unable to check</span>
                        <% } %>
                    </div>
                    <% if (hasError) { %>
                        <div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 p-2 rounded text-xs mb-4 break-words">
                            <strong>Error:</strong> <%= server.log.last_error %>
                        </div>
                    <% } %>
                    <div class="flex items-center gap-3 border-t border-gray-100 dark:border-gray-700 pt-3 mt-2">
                        <button hx-post="/admin/servers/<%= server.identifier %>/sync" hx-swap="innerHTML" class="text-sm font-medium bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white px-3 py-1.5 rounded">
                            ⚡ Sync Now
                        </button>
                        <button hx-post="/admin/servers/<%= server.identifier %>/toggle-whitelist" class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline">
                            Toggle Whitelist
                        </button>
                    </div>
                </div>
            <% }) %>
            <% if(txServers.length === 0) { %><p class="text-gray-500 text-sm">No servers found.</p><% } %>
        </div>
    </div>
    <div>
        <h2 class="text-lg font-bold mb-4 flex items-center gap-2 text-gray-800 dark:text-gray-200">
            <span>❄️</span> Charlotte Node (NC1)
        </h2>
        <div class="space-y-4">
            <% ncServers.forEach(server => { 
                const isOnline = server.log.is_online;
                const hasError = !!server.log.last_error;
                const discordComplete = server.discord?.complete;
                let borderClass = 'border-gray-200 dark:border-gray-700';
                if (isOnline && !hasError) borderClass = 'border-green-500 shadow-[0_0_10px_rgba(34,197,94,0.2)]';
                if (hasError) borderClass = 'border-red-500 shadow-[0_0_10px_rgba(239,68,68,0.2)]';
            %>
                <div class="bg-white dark:bg-darkcard rounded-lg border-l-4 <%= borderClass %> p-4">
                    <div class="flex justify-between items-start mb-2">
                        <div>
                            <h3 class="font-bold text-gray-900 dark:text-white"><%= server.name %></h3>
                            <p class="text-xs text-gray-500 font-mono"><%= server.identifier %></p>
                        </div>
                        <div class="text-right">
                            <span class="inline-flex items-center gap-1.5 text-xs font-medium px-2 py-1 rounded-full <%= isOnline ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400' %>">
                                <span class="w-1.5 h-1.5 rounded-full <%= isOnline ? 'bg-green-500 animate-pulse' : 'bg-gray-400' %>"></span>
                                <%= isOnline ? 'Online' : 'Offline' %>
                            </span>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4 text-sm mt-4 mb-4">
                        <div>
                            <span class="text-gray-500 dark:text-gray-400 block text-xs">Whitelist</span>
                            <span class="font-medium dark:text-gray-200">
                                <%= server.whitelistEnabled ? '✅ Enabled' : '🔓 Disabled' %>
                            </span>
                        </div>
                        <div>
                            <span class="text-gray-500 dark:text-gray-400 block text-xs">Last Sync</span>
                            <span class="font-medium dark:text-gray-200 text-xs">
                                <%= server.log.last_successful_sync ? new Date(server.log.last_successful_sync).toLocaleString() : 'Never' %>
                            </span>
                        </div>
                    </div>
                    <!-- Discord Channel Status -->
                    <div class="mb-4">
                        <span class="text-gray-500 dark:text-gray-400 block text-xs mb-1">Discord Channels</span>
                        <% if (discordComplete) { %>
                            <span class="text-green-600 dark:text-green-400 text-sm font-medium">✅ All 4 channels</span>
                        <% } else if (server.discord?.missing?.length > 0) { %>
                            <div class="bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-400 p-2 rounded text-xs">
                                <strong>Missing:</strong> <%= server.discord.missing.join(', ') %>
                            </div>
                        <% } else { %>
                            <span class="text-gray-500 dark:text-gray-400 text-sm">Unable to check</span>
                        <% } %>
                    </div>
                    <% if (hasError) { %>
                        <div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 p-2 rounded text-xs mb-4 break-words">
                            <strong>Error:</strong> <%= server.log.last_error %>
                        </div>
                    <% } %>
                    <div class="flex items-center gap-3 border-t border-gray-100 dark:border-gray-700 pt-3 mt-2">
                        <button hx-post="/admin/servers/<%= server.identifier %>/sync" hx-swap="innerHTML" class="text-sm font-medium bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white px-3 py-1.5 rounded">
                            ⚡ Sync Now
                        </button>
                        <button hx-post="/admin/servers/<%= server.identifier %>/toggle-whitelist" class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline">
                            Toggle Whitelist
                        </button>
                    </div>
                </div>
            <% }) %>
            <% if(ncServers.length === 0) { %><p class="text-gray-500 text-sm">No servers found.</p><% } %>
        </div>
    </div>
</div>