{% extends "base.html" %}
{% block content %}
<section class="hero glass">
  <div>
    <p class="eyebrow">Environment Health</p>
    <h1 data-fleet-env-title>Loading environment health</h1>
    <p class="lede" data-fleet-env-summary>
      This view shows observed service-local health and performance snapshots alongside desired and
      recorded deployment facts.
    </p>
  </div>
</section>

<section class="grid">
  <article class="panel glass">
    <div class="panel-header">
      <h2>Drift</h2>
    </div>
    <pre class="json-panel" data-fleet-drift-json></pre>
  </article>
  <article class="panel glass">
    <div class="panel-header">
      <h2>Observed Summary</h2>
    </div>
    <pre class="json-panel" data-fleet-observed-json></pre>
  </article>
</section>

<section class="grid">
  <article class="panel glass">
    <div class="panel-header">
      <h2>Slowest Endpoints</h2>
    </div>
    <ul class="stack" data-fleet-slowest-endpoints></ul>
  </article>
  <article class="panel glass">
    <div class="panel-header">
      <h2>Hottest Endpoints</h2>
    </div>
    <ul class="stack" data-fleet-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-slowest-db-queries></ul>
  </article>
  <article class="panel glass">
    <div class="panel-header">
      <h2>Most Frequent DB Queries</h2>
    </div>
    <ul class="stack" data-fleet-hottest-db-queries></ul>
  </article>
</section>

<section class="panel glass">
  <div class="panel-header">
    <h2>Environment Anomalies</h2>
    <span class="panel-kicker">Filtered by service and environment</span>
  </div>
  <div data-fleet-env-anomalies></div>
</section>

<section class="panel glass">
  <div class="panel-header">
    <h2>Schema Drift</h2>
  </div>
  <pre class="json-panel" data-fleet-schema-drift-json></pre>
</section>

<section class="grid">
  <article class="panel glass">
    <div class="panel-header">
      <h2>Desired</h2>
    </div>
    <pre class="json-panel" data-fleet-desired-json></pre>
  </article>
  <article class="panel glass">
    <div class="panel-header">
      <h2>Recorded</h2>
    </div>
    <pre class="json-panel" data-fleet-recorded-json></pre>
  </article>
</section>

<section class="grid">
  <article class="panel glass">
    <div class="panel-header">
      <h2>API Health</h2>
    </div>
    <pre class="json-panel" data-fleet-api-json></pre>
  </article>
  <article class="panel glass">
    <div class="panel-header">
      <h2>DB Health</h2>
    </div>
    <pre class="json-panel" data-fleet-db-json></pre>
  </article>
</section>

<section class="grid">
  <article class="panel glass">
    <div class="panel-header">
      <h2>Endpoint Health</h2>
    </div>
    <pre class="json-panel" data-fleet-endpoint-json></pre>
  </article>
  <article class="panel glass">
    <div class="panel-header">
      <h2>Auth Health</h2>
    </div>
    <pre class="json-panel" data-fleet-auth-json></pre>
  </article>
</section>
{% endblock %}