<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Dewey Admin</title>
    <link rel="icon" href="/static/favicon.svg" type="image/svg+xml" />
    <link rel="stylesheet" href="/static/console.css" />
  </head>
  <body>
    {% if deployment.name and not deployment.is_production %}
    <div class="deployment-banner" style="background: {{ deployment.color }};">{{ deployment.name|upper }}</div>
    {% endif %}
    <div class="shell">
      <header class="topbar">
        <div class="brandline">
          <div class="eyebrow">Dewey Admin</div>
          <h1 class="title">Operator Anomalies</h1>
          <div class="subtitle">{{ profile.email }}</div>
        </div>
        <div class="navlinks">
          <a class="navlink" href="/ui">Dashboard</a>
          <a class="navlink" href="/ui/anomalies">Anomalies</a>
          <a class="navlink" href="/ui/observability">Observability</a>
          <form class="logout-form" method="post" action="/logout">
            <button type="submit">Logout</button>
          </form>
        </div>
      </header>

      <main class="page">
        <section class="hero">
          <div class="hero-copy">
            <div class="eyebrow">Admin and operator review</div>
            <h2>Local anomaly records persisted in Dewey.</h2>
            <p>
              These records are read-only operational summaries. They stay local to Dewey and are
              exposed through authenticated API and UI surfaces only.
            </p>
          </div>
          <a class="pill pill-active" href="/ui/anomalies">Open anomaly view</a>
        </section>

        <section class="metrics">
          <article class="metric-card">
            <div class="metric-label">Anomalies</div>
            <div class="metric-value">{{ anomalies|length }}</div>
            <div class="metric-caption">Local anomaly records</div>
          </article>
          <article class="metric-card">
            <div class="metric-label">Open</div>
            <div class="metric-value">
              {{ anomalies | selectattr("status", "equalto", "open") | list | length }}
            </div>
            <div class="metric-caption">Records currently open</div>
          </article>
          <article class="metric-card">
            <div class="metric-label">Monitoring</div>
            <div class="metric-value">
              {{ anomalies | selectattr("status", "equalto", "monitoring") | list | length }}
            </div>
            <div class="metric-caption">Records under watch</div>
          </article>
          <article class="metric-card">
            <div class="metric-label">High Severity</div>
            <div class="metric-value">
              {{ anomalies | selectattr("severity", "equalto", "high") | list | length }}
            </div>
            <div class="metric-caption">High priority anomaly records</div>
          </article>
        </section>

        <section class="panel">
          <div class="panel-header">
            <div>
              <h3>Recent Anomalies</h3>
              <div class="panel-copy">Sorted by severity and title for quick review.</div>
            </div>
          </div>
          <div class="table-wrap">
            <table>
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Severity</th>
                  <th>Status</th>
                  <th>Summary</th>
                  <th>View</th>
                </tr>
              </thead>
              <tbody>
                {% for item in anomalies %}
                <tr>
                  <td class="mono">{{ item.anomaly_id }}</td>
                  <td>{{ item.severity }}</td>
                  <td>{{ item.status }}</td>
                  <td>{{ item.summary }}</td>
                  <td><a class="button" href="/ui/anomalies/{{ item.anomaly_id }}">Open</a></td>
                </tr>
                {% endfor %}
                {% if not anomalies %}
                <tr>
                  <td colspan="5"><div class="empty-state">No anomalies recorded yet.</div></td>
                </tr>
                {% endif %}
              </tbody>
            </table>
          </div>
        </section>
      </main>
    </div>
  </body>
</html>
