<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Felhom Hub — Customers</title>
    <link rel="stylesheet" href="/style.css?v={{hubVersion}}">
</head>
<body>
    {{template "icon_sprite"}}
    <div class="container">
        <header>
            <h1>Felhom <span>Hub</span></h1>
            <nav class="nav-links">
                <a href="/" class="nav-link">Dashboard</a>
                <a href="/configs" class="nav-link active">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 .Flash}}
        <div class="flash flash-success">
            {{if eq .Flash "deleted"}}Customer configuration deleted.{{end}}
        </div>
        {{end}}

        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h2 style="margin: 0;">Customers</h2>
            <a href="/configs/new" class="btn">+ Add Customer</a>
        </div>

        {{if not .Customers}}
        <div class="empty-state">
            <p>No customers yet.</p>
            <p class="hint">Add a customer configuration or wait for a controller to report in.</p>
        </div>
        {{else}}
        <table class="dashboard-table">
            <thead>
                <tr>
                    <th>Customer ID</th>
                    <th>Name</th>
                    <th>Domain</th>
                    <th>Status</th>
                    <th>Version</th>
                    <th>Floor</th>
                    <th>Config</th>
                </tr>
            </thead>
            <tbody>
                {{range .Customers}}
                <tr class="{{if .IsBlocked}}row-blocked{{end}}" onclick="window.location='/customers/{{.CustomerID}}'">
                    <td><code>{{.CustomerID}}</code></td>
                    <td>{{if .CustomerName}}{{.CustomerName}}{{else}}<span class="text-muted">—</span>{{end}}</td>
                    <td>{{if .Domain}}{{.Domain}}{{else}}<span class="text-muted">—</span>{{end}}</td>
                    <td>
                        {{if .IsBlocked}}
                        <span class="config-badge config-badge-blocked">BLOCKED</span>
                        {{else if .OverallStatus}}
                        <span class="status-badge status-badge-{{.OverallStatus}}">
                            {{if eq .OverallStatus "ok"}}OK{{else if eq .OverallStatus "warn"}}WARN{{else if eq .OverallStatus "down"}}DOWN{{else if eq .OverallStatus "disabled"}}PAUSED{{else if eq .OverallStatus "pending"}}PENDING{{else}}{{.OverallStatus}}{{end}}
                        </span>
                        {{if .HostCause}}<span class="status-badge status-badge-warn">{{.HostCause}}</span>{{end}}
                        {{else}}
                        <span class="text-muted">—</span>
                        {{end}}
                    </td>
                    <td>{{if .ControllerVersion}}<code>{{.ControllerVersion}}</code>{{else}}<span class="text-muted">—</span>{{end}}</td>
                    <td>
                        {{if .EffectiveFloor}}<code>v{{.EffectiveFloor}}</code>{{if .FloorOverride}}<span class="text-muted" style="font-size:0.8em;"> (override)</span>{{end}}{{if .BelowFloor}}<span style="color:#f59e0b;" title="below floor — will auto-update"> ●</span>{{end}}
                        {{else}}<span class="text-muted">—</span>{{end}}
                    </td>
                    <td>
                        {{if .HasConfig}}
                        <span class="config-badge config-badge-managed">MANAGED</span>
                        {{else}}
                        <span class="config-badge config-badge-manual">MANUAL</span>
                        {{end}}
                    </td>
                </tr>
                {{end}}
            </tbody>
        </table>
        {{end}}

        <footer>
            <p>Felhom Hub {{hubVersion}} — Customer Management</p>
        </footer>
    </div>
</body>
</html>
