<!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?v={{hubVersion}}">
    <meta http-equiv="refresh" content="60">
</head>
<body>
    {{template "icon_sprite"}}
    <div class="container">
        <header>
            <h1>Felhom <span>Hub</span></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="/hosts" class="nav-link">Hosts</a>
                <a href="/offsite" class="nav-link">Offsite</a>
                <a href="/configuration" class="nav-link">Configuration</a>
            </nav>
        </header>

        {{if or .OffsiteTile .PBSTile}}
        <div class="offsite-gauges">
            {{with .OffsiteTile}}
            <a href="/offsite#tab=restic" class="offsite-tile offsite-tile-{{.Band}}">
                <span class="offsite-tile-label">Restic</span>
                <span class="offsite-tile-val">{{formatFloat .FillPercent}}% &middot; {{.RatioStr}}</span>
                {{if .Degraded}}<span class="offsite-tile-stale">stale</span>{{end}}
            </a>
            {{end}}
            {{with .PBSTile}}
            <a href="/offsite#tab=pbsdr" class="offsite-tile offsite-tile-{{.Band}}">
                <span class="offsite-tile-label">PBS DR</span>
                {{if .Unavailable}}<span class="offsite-tile-val" style="color:var(--text-3);">n/a</span>{{else}}<span class="offsite-tile-val">{{formatFloat .FillPercent}}%</span>{{end}}
                {{if .Degraded}}<span class="offsite-tile-stale">stale</span>{{end}}
            </a>
            {{end}}
        </div>
        {{end}}

        {{if not .Customers}}
        <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 .Customers}}
                <tr class="status-{{.OverallStatus}}" onclick="window.location='/customers/{{.CustomerID}}'">
                    <td class="customer-name">
                        <span class="status-dot status-dot-{{statusColor .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>
                        {{if .HostCause}}<span class="status-badge status-badge-warn">{{.HostCause}}</span>{{end}}
                    </td>
                    <td>{{if eq .OverallStatus "pending"}}—{{else}}{{if gt (add (add .EventCriticals .EventErrors) .EventWarnings) 0}}{{if gt .EventCriticals 0}}<span class="severity-badge severity-critical">{{.EventCriticals}}</span>{{end}}{{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>
