<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apps — Felhom Hub</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">Customers</a>
                <a href="/apps" class="nav-link active">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>

        <h2 style="margin-bottom: 1rem;">App Telemetry</h2>

        <!-- Period selector -->
        <div class="period-selector">
            <a href="?period=24h{{if .Sort}}&sort={{.Sort}}&order={{.Order}}{{end}}" class="period-btn{{if eq .Period "24h"}} active{{end}}">24h</a>
            <a href="?period=7d{{if .Sort}}&sort={{.Sort}}&order={{.Order}}{{end}}"  class="period-btn{{if or (eq .Period "7d") (eq .Period "")}} active{{end}}">7d</a>
            <a href="?period=30d{{if .Sort}}&sort={{.Sort}}&order={{.Order}}{{end}}" class="period-btn{{if eq .Period "30d"}} active{{end}}">30d</a>
        </div>

        <!-- Summary cards -->
        <div class="summary-cards">
            <div class="summary-card">
                <div class="card-number">{{.TotalApps}}</div>
                <div class="card-label">Total Apps</div>
            </div>
            <div class="summary-card">
                <div class="card-number">{{.TotalDeployments}}</div>
                <div class="card-label">Deployments</div>
            </div>
            <div class="summary-card">
                <div class="card-number" {{if gt .AppsWithErrors 0}}style="color: var(--red)"{{end}}>{{.AppsWithErrors}}</div>
                <div class="card-label">Apps with Errors</div>
            </div>
        </div>

        <!-- App table -->
        {{if .Apps}}
        <section class="card" style="padding: 0; overflow: hidden;">
            <table class="data-table">
                <thead>
                    <tr>
                        <th><a href="?period={{.Period}}&sort=name&order={{if eq .Sort "name"}}{{if eq .Order "asc"}}desc{{else}}asc{{end}}{{else}}asc{{end}}">App</a></th>
                        <th><a href="?period={{.Period}}&sort=deployments&order={{if eq .Sort "deployments"}}{{if eq .Order "asc"}}desc{{else}}asc{{end}}{{else}}desc{{end}}">Deployments</a></th>
                        <th><a href="?period={{.Period}}&sort=memory&order={{if eq .Sort "memory"}}{{if eq .Order "asc"}}desc{{else}}asc{{end}}{{else}}desc{{end}}">Avg Memory</a></th>
                        <th>P95 Memory</th>
                        <th>Catalog Estimate</th>
                        <th>Catalog Limit</th>
                        <th>Accuracy</th>
                        <th><a href="?period={{.Period}}&sort=errors&order={{if eq .Sort "errors"}}{{if eq .Order "asc"}}desc{{else}}asc{{end}}{{else}}desc{{end}}">Errors</a></th>
                        <th>Warnings</th>
                    </tr>
                </thead>
                <tbody>
                    {{range .Apps}}
                    <tr>
                        <td><a href="/apps/{{.AppName}}">{{if .DisplayName}}{{.DisplayName}}{{else}}{{.AppName}}{{end}}</a></td>
                        <td>{{.DeploymentCount}}</td>
                        <td>{{formatFloat .AvgMemoryMB}} MB</td>
                        <td>{{formatFloat .P95MemoryMB}} MB</td>
                        <td>{{if .CatalogEstimate}}{{.CatalogEstimate}}{{else}}—{{end}}</td>
                        <td>{{if .CatalogLimit}}{{.CatalogLimit}}{{else}}—{{end}}</td>
                        <td>
                            {{$ac := accuracyClass .P95MemoryMB .CatalogLimit}}
                            {{if eq $ac "ok"}}<span class="accuracy-dot accuracy-ok" title="P95 within limit"></span>
                            {{else if eq $ac "warn"}}<span class="accuracy-dot accuracy-warn" title="P95 &gt; 50% of limit"></span>
                            {{else if eq $ac "danger"}}<span class="accuracy-dot accuracy-danger" title="P95 exceeds limit"></span>
                            {{else}}—{{end}}
                        </td>
                        <td>{{if gt .TotalErrors 0}}<span class="badge badge-error">{{.TotalErrors}}</span>{{else}}0{{end}}</td>
                        <td>{{if gt .TotalWarnings 0}}<span class="badge badge-warn">{{.TotalWarnings}}</span>{{else}}0{{end}}</td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
        </section>
        {{else}}
        <div class="empty-state">
            <p>No telemetry data for the selected period.</p>
            <p class="hint">App telemetry will appear after the next report is received (requires controller v0.28.0+).</p>
        </div>
        {{end}}

        <footer style="margin-top: 2rem; color: var(--text-muted); font-size: 0.8rem; text-align: center;">
            Felhom Hub <span style="font-family: var(--font-mono)">{{hubVersion}}</span>
        </footer>
    </div>
</body>
</html>
