{% extends "base.html" %}
{% block content %}
<section class="hero glass dashboard-hero">
  <div>
    <p class="eyebrow">Sandbox Deployment View</p>
    <h1>Kahlo watches one sandbox stack at a time.</h1>
    <p class="lede">
      The dashboard keeps Dayhoff deployment facts, live service health, drift, anomalies, and
      service relationships visible in one stack-local view without turning Kahlo into a deploy
      manager.
    </p>
  </div>
  <div class="summary-strip" data-dashboard-summary>
    <div class="summary-chip">
      <span class="metric-label">Services</span>
      <strong data-summary-service-count>0</strong>
    </div>
    <div class="summary-chip">
      <span class="metric-label">Healthy</span>
      <strong data-summary-healthy>0</strong>
    </div>
    <div class="summary-chip">
      <span class="metric-label">Degraded</span>
      <strong data-summary-degraded>0</strong>
    </div>
    <div class="summary-chip">
      <span class="metric-label">Unavailable</span>
      <strong data-summary-unavailable>0</strong>
    </div>
    <div class="summary-chip">
      <span class="metric-label">Drifted</span>
      <strong data-summary-drifted>0</strong>
    </div>
    <div class="summary-chip">
      <span class="metric-label">Anomalies</span>
      <strong data-summary-anomalies>0</strong>
    </div>
    <div class="summary-chip summary-chip-wide">
      <span class="metric-label">Last Fleet Refresh</span>
      <strong data-summary-refreshed>Unknown</strong>
    </div>
  </div>
</section>

<section class="grid dashboard-grid">
  <article class="panel glass">
    <div class="panel-header">
      <div>
        <p class="eyebrow">Co-Deployed Services</p>
        <h2>Overview</h2>
      </div>
      <span class="panel-kicker" data-dashboard-environment>Unknown stack</span>
    </div>
    <div class="card-grid" data-dashboard-services></div>
  </article>
  <article class="panel glass topology-panel">
    <div class="panel-header">
      <div>
        <p class="eyebrow">Live-Discovered Topology</p>
        <h2>Service DAG</h2>
      </div>
      <span class="panel-kicker">Configured + observed edges</span>
    </div>
    <div class="topology-shell">
      <div class="topology-stage">
        <div id="kahlo-topology" class="topology-canvas">
          <div class="topology-loading">Loading stack topology…</div>
        </div>
      </div>
      <aside class="topology-sidebar">
        <div class="topology-sidebar-panel">
          <h3>Selected Service</h3>
          <div data-dashboard-graph-detail>
            <p class="lede">Choose a node to inspect current health, drift, session notes, and dependencies.</p>
          </div>
        </div>
        <div class="topology-sidebar-panel">
          <h3>Operator Notes</h3>
          <ul class="dashboard-notes" data-dashboard-notes>
            <li>Loading stack-local notes…</li>
          </ul>
        </div>
      </aside>
    </div>
  </article>
</section>

<section class="grid dashboard-grid">
  <article class="panel glass">
    <div class="panel-header">
      <h2>Projection Freshness</h2>
    </div>
    <pre class="json-panel" data-dashboard-projection-json></pre>
  </article>
  <article class="panel glass">
    <div class="panel-header">
      <h2>Dashboard Summary</h2>
    </div>
    <pre class="json-panel" data-dashboard-stack-json></pre>
  </article>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dagre@0.8.5/dist/dagre.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.5.0/cytoscape-dagre.min.js"></script>
{% endblock %}