/**
 * index page HTML template for wssshd
 *
 * Copyright (C) 2024 Stefy Lanza <stefy@nexlab.net> and SexHack.me
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

#ifndef INDEX_PAGE_H
#define INDEX_PAGE_H

// index page HTML template
static const char *index_page_html =
"<!DOCTYPE html>\n"
"<html lang=\"en\">\n"
"<head>\n"
"    <meta charset=\"UTF-8\">\n"
"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n"
"    <title>Dashboard - WSSSHD control panel</title>\n"
"    <link rel=\"icon\" href=\"/favicon.ico\" type=\"image/x-icon\">\n"
"    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css\" rel=\"stylesheet\">\n"
"    <link href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css\" rel=\"stylesheet\">\n"
"</head>\n"
"<body>\n"
"<nav class=\"navbar navbar-expand-lg navbar-dark bg-primary\">\n"
"<div class=\"container\">\n"
"<a class=\"navbar-brand\" href=\"/\">\n"
"<i class=\"fas fa-terminal\"></i> WSSSHD control panel</a>\n"
"<div class=\"navbar-nav ms-auto\">\n"
"<span class=\"navbar-text me-3\">%s</span>\n"
"<a class=\"nav-link\" href=\"/logout\">Logout</a>\n"
"</div></div></nav>\n"
"%s\n"
"<div class=\"container mt-4\">\n"
"<div class=\"row\">\n"
"    <div class=\"col-md-8\">\n"
"        <div class=\"card\">\n"
"            <div class=\"card-header\">\n"
"                <h3 class=\"card-title mb-0\">\n"
"                    <i class=\"fas fa-server\"></i> Registered Clients\n"
"                </h3>\n"
"            </div>\n"
"            <div class=\"card-body\">\n"
"                <div id=\"client-list\">%s</div>\n"
"            </div>\n"
"        </div>\n"
"    </div>\n"
"\n"
"    <div class=\"col-md-4\">\n"
"        <div class=\"card\">\n"
"            <div class=\"card-header\">\n"
"                <h3 class=\"card-title mb-0\">\n"
"                    <i class=\"fas fa-cogs\"></i> Quick Actions\n"
"                </h3>\n"
"            </div>\n"
"            <div class=\"card-body\">\n"
"                %s\n"
"                <button class=\"btn btn-outline-secondary btn-sm w-100\" onclick=\"location.reload()\">\n"
"                    <i class=\"fas fa-sync\"></i> Refresh Status\n"
"                </button>\n"
"            </div>\n"
"        </div>\n"
"\n"
"        <div class=\"card mt-3\">\n"
"            <div class=\"card-header\">\n"
"                <h3 class=\"card-title mb-0\">\n"
"                    <i class=\"fas fa-info-circle\"></i> System Info\n"
"                </h3>\n"
"            </div>\n"
"            <div class=\"card-body\">\n"
"                <p class=\"mb-1\"><strong>WebSocket Port:</strong> <span id=\"websocket-port\">%d</span></p>\n"
"                <p class=\"mb-1\"><strong>Domain:</strong> <span id=\"domain\">%s</span></p>\n"
"                <p class=\"mb-0\"><strong>Connected Clients:</strong> <span id=\"client-count\">%d</span></p>\n"
"            </div>\n"
"        </div>\n"
"    </div>\n"
"</div>\n"
"</div>\n"
"<script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js\"></script>\n"
"<script>\n"
"function showNotification(message, type = 'info') {\n"
"    const notificationArea = document.getElementById('notification-area');\n"
"    const notification = document.createElement('div');\n"
"    notification.className = `alert alert-${type} alert-dismissible fade show`;\n"
"    notification.innerHTML = `${message}<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"></button>`;\n"
"    notificationArea.appendChild(notification);\n"
"    setTimeout(() => {\n"
"        if (notification.parentNode) {\n"
"            notification.remove();\n"
"        }\n"
"    }, 5000);\n"
"}\n"
"\n"
"function updateClients() {\n"
"    fetch('/api/clients')\n"
"        .then(response => response.json())\n"
"        .then(data => {\n"
"            // Update client count\n"
"            document.getElementById('client-count').textContent = data.count;\n"
"\n"
"            // Generate HTML for client list\n"
"            let clientListHtml = '';\n"
"            if (data.count === 0) {\n"
"                clientListHtml = '<div class=\"text-center py-5\"><i class=\"fas fa-server fa-4x text-muted mb-3\"></i><h4 class=\"text-muted\">No clients registered</h4><p class=\"text-muted\">Clients will appear here when they register.</p></div>';\n"
"            } else {\n"
"                for (const [clientId, clientData] of Object.entries(data.clients)) {\n"
"                    const statusIcon = clientData.status === 'connected' ? 'fa-desktop text-success' : 'fa-server text-warning';\n"
"                    const statusText = clientData.status === 'connected' ? 'Connected' : 'Registered';\n"
"                    const services = clientData.services;\n"
"                    let actionsHtml = '';\n"
"                    if (services.includes('ssh')) {\n"
"                        actionsHtml += `<a href=\"/terminal/${clientId}\" class=\"btn btn-primary btn-sm me-1\"><i class=\"fas fa-terminal\"></i> SSH</a>`;\n"
"                    }\n"
"                    if (services.includes('vnc')) {\n"
"                        actionsHtml += `<a href=\"/vnc/${clientId}\" class=\"btn btn-info btn-sm me-1\"><i class=\"fas fa-desktop\"></i> VNC</a>`;\n"
"                    }\n"
"                    clientListHtml += `\n"
"                        <div class=\"col-md-4 mb-3\">\n"
"                            <div class=\"card client-card h-100\">\n"
"                                <div class=\"card-body text-center\">\n"
"                                    <i class=\"fas ${statusIcon} fa-3x mb-3\"></i>\n"
"                                    <h5 class=\"card-title\">${clientId}</h5>\n"
"                                    <p class=\"card-text text-muted\">${statusText}</p>\n"
"                                    <p class=\"card-text small\">Services: ${services}</p>\n"
"                                    <div class=\"d-flex justify-content-center\">${actionsHtml}</div>\n"
"                                </div>\n"
"                            </div>\n"
"                        </div>`;\n"
"                }\n"
"            }\n"
"\n"
"            // Update client list only if changed\n"
"            const clientListDiv = document.getElementById('client-list');\n"
"            if (clientListDiv.innerHTML !== clientListHtml) {\n"
"                clientListDiv.innerHTML = clientListHtml;\n"
"            }\n"
"        })\n"
"        .catch(error => {\n"
"            console.log('Error fetching client data:', error);\n"
"        });\n"
"}\n"
"\n"
"// Update every 5 seconds\n"
"setInterval(updateClients, 5000);\n"
"\n"
"// Initial update after 1 second\n"
"setTimeout(updateClients, 1000);\n"
"</script>\n"
"</body>\n"
"</html>\n";

#endif /* INDEX_PAGE_H */
