<% 
    const isOnline = server.log.is_online;
    const hasError = !!server.log.last_error;
    
    let borderClass = 'border-gray-200 dark:border-gray-700'; // Default / Offline
    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 relative overflow-hidden">
    
    <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>

    <% 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" id="controls-<%= server.identifier %>">
        <button hx-post="/admin/servers/<%= server.identifier %>/sync"
                hx-target="#controls-<%= server.identifier %>"
                hx-swap="innerHTML"
                <%= !isOnline ? 'disabled' : '' %>
                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 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
            ⚡ Sync Now
        </button>

        <button hx-post="/admin/servers/<%= server.identifier %>/toggle-whitelist"
                hx-confirm="Changing the whitelist requires a server restart to take effect. Continue?"
                hx-target="#controls-<%= server.identifier %>"
                hx-swap="beforeend"
                class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline">
            Toggle Whitelist
        </button>
    </div>
</div>
