{% extends "base.html" %}
{% from "_macros.html" import crumbs %}
{% block title %}{{ host.name }} — Metrics — Steward{% endblock %}
{% block breadcrumb %}{{ crumbs([("Hosts", "/hosts/"), (host.name, "/hosts/" ~ host.id), ("Metrics", "")]) }}{% endblock %}
{% block content %}
{# Shell only: the current-state and history-chart sections stream in via HTMX
   below, so the heavy history query never blocks first paint and the data
   refreshes live (≈ the agent's push cadence) without a full reload. #}
<div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:0.75rem;">
  <h1 class="page-title" style="margin-bottom:0;">{{ host.name }}</h1>
  {% include "_time_range.html" %}
</div>

{# Current state — lazy + polled live (latest snapshot the server holds). #}
<div id="hm-current"
     hx-get="/plugins/host_agent/{{ host.id }}/metrics"
     hx-trigger="load, every {{ poll_seconds }}s"
     hx-swap="innerHTML">
  <div class="card empty">Loading metrics…</div>
</div>

{# History charts — lazy (never blocks paint), refreshed on a slow cadence and
   on range change; range comes from the shared #time-range input. #}
<div id="hm-charts"
     hx-get="/plugins/host_agent/{{ host.id }}/charts"
     hx-trigger="load, every {{ chart_poll_seconds }}s, rangeChange from:body"
     hx-include="#time-range"
     hx-swap="innerHTML"
     style="margin-top:1rem;">
  <div class="card empty">Loading charts…</div>
</div>
{% endblock %}