{% extends "base.html" %}
{% block content %}
<section class="hero glass">
  <div>
    <p class="eyebrow">Health</p>
    <h1>Kahlo polls follower services and keeps environment health state separate.</h1>
    <p class="lede">
      Static directory data, desired deployment state, Dayhoff-recorded deployment facts, and
      observed runtime health snapshots remain distinct. Drift is reported, not acted on.
    </p>
  </div>
</section>

<section class="grid">
  <article class="panel glass">
    <div class="panel-header">
      <h2>Service Health</h2>
    </div>
    <div class="card-grid" data-fleet-services></div>
  </article>
  <article class="panel glass">
    <div class="panel-header">
      <h2>Environment Health Rollups</h2>
    </div>
    <div class="card-grid" data-fleet-environments></div>
  </article>
</section>

<section class="grid">
  <article class="panel glass">
    <div class="panel-header">
      <h2>Slowest Endpoints</h2>
    </div>
    <ul class="stack" data-fleet-summary-slowest-endpoints></ul>
  </article>
  <article class="panel glass">
    <div class="panel-header">
      <h2>Hottest Endpoints</h2>
    </div>
    <ul class="stack" data-fleet-summary-hottest-endpoints></ul>
  </article>
</section>

<section class="grid">
  <article class="panel glass">
    <div class="panel-header">
      <h2>Slowest DB Queries</h2>
    </div>
    <ul class="stack" data-fleet-summary-slowest-db></ul>
  </article>
  <article class="panel glass">
    <div class="panel-header">
      <h2>Most Frequent DB Queries</h2>
    </div>
    <ul class="stack" data-fleet-summary-hottest-db></ul>
  </article>
</section>

<section class="panel glass">
  <div class="panel-header">
    <h2>Anomalies</h2>
    <span class="panel-kicker">Embedded from the aggregated anomaly projection</span>
  </div>
  <div data-fleet-anomalies></div>
</section>

<section class="panel glass">
  <div class="panel-header">
    <h2>Rollup Summary</h2>
  </div>
  <pre class="json-panel" data-fleet-summary-json></pre>
</section>

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