{% extends "base.html" %}
{% block content %}
<section class="hero glass">
  <div>
    <p class="eyebrow">Anomaly Detail</p>
    <h1 data-anomaly-title>Loading anomaly</h1>
    <p class="lede" data-anomaly-summary>
      This view shows the redacted anomaly record persisted by the source service and aggregated by
      Kahlo.
    </p>
  </div>
</section>

<section class="grid">
  <article class="panel glass">
    <div class="panel-header">
      <h2>Metadata</h2>
    </div>
    <pre class="json-panel" data-anomaly-json></pre>
  </article>
  <article class="panel glass">
    <div class="panel-header">
      <h2>Redacted Context</h2>
    </div>
    <pre class="json-panel" data-anomaly-context-json></pre>
  </article>
</section>

<section class="panel glass">
  <div class="panel-header">
    <h2>Projection Freshness</h2>
  </div>
  <pre class="json-panel" data-anomaly-detail-projection-json></pre>
</section>
{% endblock %}