<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Felhom Hub — Customer Overview</title>
    <link rel="stylesheet" href="/style.css">
    <meta http-equiv="refresh" content="60">
</head>
<body>
    <div class="container">
        <header>
            <h1>Felhom Hub</h1>
            <nav class="nav-links">
                <a href="/" class="nav-link active">Dashboard</a>
                <a href="/configs" class="nav-link">Customers</a>
                <a href="/apps" class="nav-link">Apps</a>
                <a href="/configuration" class="nav-link">Configuration</a>
            </nav>
        </header>

        {{if not .}}
        <div class="empty-state">
            <p>No customer reports received yet.</p>
            <p class="hint">Configure <code>hub.enabled: true</code> in customer controller.yaml to start receiving reports.</p>
        </div>
        {{else}}
        <table class="dashboard-table">
            <thead>
                <tr>
                    <th>Customer</th>
                    <th>Status</th>
                    <th>Events</th>
                    <th>Last Seen</th>
                    <th>CPU</th>
                    <th>Memory</th>
                    <th>Disk</th>
                    <th>Containers</th>
                    <th>Last Backup</th>
                    <th>Version</th>
                </tr>
            </thead>
            <tbody>
                {{range .}}
                <tr class="status-{{.OverallStatus}}" onclick="window.location='/customers/{{.CustomerID}}'">
                    <td class="customer-name">
                        <span class="status-dot" style="color: {{statusColor .OverallStatus}}">{{statusIcon .OverallStatus}}</span>
                        {{if .CustomerName}}{{.CustomerName}}{{else}}{{.CustomerID}}{{end}}
                    </td>
                    <td>
                        <span class="status-badge status-badge-{{.OverallStatus}}">
                            {{if eq .OverallStatus "ok"}}OK{{else if eq .OverallStatus "warn"}}WARN{{else if eq .OverallStatus "disabled"}}PAUSED{{else if eq .OverallStatus "pending"}}PENDING{{else}}DOWN{{end}}
                        </span>
                    </td>
                    <td>{{if eq .OverallStatus "pending"}}—{{else}}{{if gt (add .EventErrors .EventWarnings) 0}}{{if gt .EventErrors 0}}<span class="severity-badge severity-error">{{.EventErrors}}</span>{{end}}{{if gt .EventWarnings 0}}<span class="severity-badge severity-warning">{{.EventWarnings}}</span>{{end}}{{else}}<span class="text-muted">—</span>{{end}}{{end}}</td>
                    <td>{{if eq .OverallStatus "pending"}}—{{else}}{{timeAgo .ReceivedAt}}{{end}}</td>
                    <td>{{if eq .OverallStatus "pending"}}—{{else}}{{formatFloat .CPUPercent}}%{{end}}</td>
                    <td>{{if eq .OverallStatus "pending"}}—{{else}}{{formatFloat .MemoryPercent}}%{{end}}</td>
                    <td>{{if eq .OverallStatus "pending"}}—{{else}}{{.DiskSummary}}{{end}}</td>
                    <td>{{if eq .OverallStatus "pending"}}—{{else}}{{.ContainerRunning}}/{{.ContainerTotal}}{{end}}</td>
                    <td>{{.BackupAge}}</td>
                    <td>{{if .ControllerVersion}}<code>{{.ControllerVersion}}</code>{{else}}—{{end}}</td>
                </tr>
                {{end}}
            </tbody>
        </table>
        {{end}}

        <footer>
            <p>Auto-refreshes every 60 seconds &middot; Felhom Hub {{hubVersion}}</p>
        </footer>
    </div>
</body>
</html>
