{% extends "base.html" %}
{% block content %}
<section class="dashboard-grid page-{{ page.name }}">
  {% if page.stats %}
  <section class="panel metric-strip">
    <div class="panel-header">
      <div>
        <div class="panel-kicker">LIVE METRICS</div>
        <div class="panel-title">Runtime Telemetry</div>
      </div>
    </div>
    <div class="metric-grid">
      {% for card in page.stats %}
      <article class="metric-card {{ card.tone }}">
        <div class="metric-label">{{ card.label }}</div>
        <div class="metric-value">{{ card.value }}</div>
        <div class="metric-detail">{{ card.detail }}</div>
      </article>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if page.statuses %}
  <section class="panel status-panel">
    <div class="panel-header">
      <div>
        <div class="panel-kicker">HEALTH MATRIX</div>
        <div class="panel-title">SERVICE STATUS MATRIX</div>
      </div>
    </div>
    <div class="status-tile-grid">
      {% for tile in page.statuses %}
      <article class="status-tile {{ tile.state }}">
        <div class="status-tile-label">{{ tile.label }}</div>
        <div class="status-tile-value">{{ tile.value }}</div>
        <div class="status-tile-detail">{{ tile.detail }}</div>
      </article>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if page.actions %}
  <section class="panel action-panel" id="pageActions">
    <div class="panel-header">
      <div>
        <div class="panel-kicker">OPERATOR ACTIONS</div>
        <div class="panel-title">Attack Simulator Rail</div>
      </div>
    </div>
    <div class="action-grid">
      {% for action in page.actions %}
      <button type="button" class="action-button {{ action.kind }}" data-action="{{ action.action }}">
        <span>{{ action.label }}</span>
        <small>{{ action.detail }}</small>
      </button>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if page.topology %}
  <section class="panel topology-panel" id="topologyPanel">
    <div class="panel-header">
      <div>
        <div class="panel-kicker">LIVE TOPOLOGY</div>
        <div class="panel-title">{{ page.topology.title }}</div>
      </div>
    </div>
    <div
      class="topology-canvas"
      id="topologyCanvas"
      data-topology="true"
      data-topology-payload='{{ page.topology.to_dict()|tojson }}'
    ></div>
  </section>
  {% endif %}

  {% if page.traffic_chart %}
  <section class="panel chart-panel">
    <div class="panel-header">
      <div>
        <div class="panel-kicker">REALTIME CHART</div>
        <div class="panel-title">{{ page.traffic_chart.title }}</div>
      </div>
    </div>
    <canvas class="chart-canvas" id="chart-{{ page.traffic_chart.chart_id }}" data-chart='{{ page.traffic_chart.to_dict()|tojson }}'></canvas>
  </section>
  {% endif %}

  {% if page.attack_chart %}
  <section class="panel chart-panel">
    <div class="panel-header">
      <div>
        <div class="panel-kicker">ATTACK ANALYTICS</div>
        <div class="panel-title">{{ page.attack_chart.title }}</div>
      </div>
    </div>
    <canvas class="chart-canvas" id="chart-{{ page.attack_chart.chart_id }}" data-chart='{{ page.attack_chart.to_dict()|tojson }}'></canvas>
  </section>
  {% endif %}

  {% for chart in page.charts %}
  <section class="panel chart-panel">
    <div class="panel-header">
      <div>
        <div class="panel-kicker">ANALYTICS</div>
        <div class="panel-title">{{ chart.title }}</div>
      </div>
    </div>
    <canvas class="chart-canvas" id="chart-{{ chart.chart_id }}" data-chart='{{ chart.to_dict()|tojson }}'></canvas>
  </section>
  {% endfor %}

  {% if page.feed %}
  <section class="panel feed-panel" id="feedPanel">
    <div class="panel-header">
      <div>
        <div class="panel-kicker">EVENT STREAM</div>
        <div class="panel-title">{{ page.feed.title }}</div>
      </div>
    </div>
    <div class="event-feed">
      {% for entry in page.feed.entries %}
      <div class="feed-row {{ entry.level|lower }}">
        <span class="feed-time">[{{ entry.timestamp }}]</span>
        <span class="feed-level">{{ entry.level }}</span>
        <span class="feed-source">{{ entry.source }}</span>
        <span class="feed-message">{{ entry.message }}</span>
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if page.services %}
  <section class="panel services-panel" id="servicesPanel">
    <div class="panel-header">
      <div>
        <div class="panel-kicker">SERVICE MATRIX</div>
        <div class="panel-title">Container Runtime Health</div>
      </div>
    </div>
    <table class="terminal-table">
      <thead>
        <tr>
          <th>SERVICE</th>
          <th>STATE</th>
          <th>DETAIL</th>
        </tr>
      </thead>
      <tbody>
        {% for service in page.services %}
        <tr class="{{ service.status|lower }}">
          <td>{{ service.name }}</td>
          <td>{{ service.status }}</td>
          <td>{{ service.detail }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </section>
  {% endif %}

  {% if page.cta %}
  <section class="panel cta-panel" id="pageCta">
    <div class="panel-header">
      <div>
        <div class="panel-kicker">CLI HANDOFF</div>
        <div class="panel-title">{{ page.cta.title }}</div>
      </div>
    </div>
    <div class="cta-command">{{ page.cta.command }}</div>
    <div class="cta-detail">{{ page.cta.detail }}</div>
  </section>
  {% endif %}

  {% for table in page.tables %}
  <section class="panel data-panel">
    <div class="panel-header">
      <div>
        <div class="panel-kicker">DATA PANEL</div>
        <div class="panel-title">{{ table.title }}</div>
      </div>
    </div>
    {% if table.rows %}
    <table class="terminal-table">
      <thead>
        <tr>
          {% for column in table.columns %}
          <th>{{ column.label }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in table.rows %}
        <tr class="{{ row.state }}">
          {% for value in row.values %}
          <td>{{ value }}</td>
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="empty-state">{{ table.empty_message }}</div>
    {% endif %}
  </section>
  {% endfor %}
</section>

<script id="pageSnapshot" type="application/json">{{ page_json|tojson }}</script>
{% endblock %}