<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Dewey Anomaly Detail</title>
    <link rel="icon" href="{{ static_url('favicon.svg') }}" type="image/svg+xml" />
    <link rel="stylesheet" href="{{ static_url('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 Operator Console</div>
          <h1 class="title">Anomaly Detail</h1>
          <div class="subtitle">{{ profile.email }}</div>
        </div>
        <div class="navlinks">
          <a class="navlink" href="/ui/anomalies">Back to Anomalies</a>
          <a class="navlink" href="/ui">Dashboard</a>
          <a class="navlink" href="/ui/observability">Observability</a>
          <form class="logout-form" method="post" action="/auth/logout">
            <button type="submit">Logout</button>
          </form>
        </div>
      </header>

      <main class="page">
        <section class="hero">
          <div class="hero-copy">
            <div class="eyebrow">Local anomaly record</div>
            <h2>{{ anomaly.title }}</h2>
            <p>{{ anomaly.summary }}</p>
          </div>
          <span class="pill pill-active">{{ anomaly.severity }} severity</span>
        </section>

        <section class="content-grid">
          <section class="panel">
            <div class="panel-header">
              <div>
                <h3>Record</h3>
                <div class="panel-copy">Immutable local anomaly metadata.</div>
              </div>
            </div>
            <div class="stack">
              <div><span class="eyebrow">ID</span><div class="mono">{{ anomaly.anomaly_id }}</div></div>
              <div><span class="eyebrow">Category</span><div>{{ anomaly.category }}</div></div>
              <div><span class="eyebrow">Status</span><div>{{ anomaly.status }}</div></div>
              <div><span class="eyebrow">Source</span><div class="mono">{{ anomaly.source }}</div></div>
              <div><span class="eyebrow">Source View</span><div class="mono">{{ anomaly.source_view_url }}</div></div>
            </div>
          </section>

          <section class="panel">
            <div class="panel-header">
              <div>
                <h3>Operational Context</h3>
                <div class="panel-copy">Redacted fields are kept local and read-only.</div>
              </div>
            </div>
            <div class="stack">
              <span class="pill">First seen {{ anomaly.first_seen_at }}</span>
              <span class="pill">Last seen {{ anomaly.last_seen_at }}</span>
              <span class="pill">Occurrences {{ anomaly.occurrence_count }}</span>
              {% if anomaly.recommended_action %}
              <div class="note">{{ anomaly.recommended_action }}</div>
              {% endif %}
              <pre class="panel" style="white-space: pre-wrap; margin: 0; background: rgba(11, 17, 32, 0.78);">{{ anomaly.redacted_context | tojson(indent=2) }}</pre>
            </div>
          </section>
        </section>
      </main>
    </div>
  </body>
</html>
