{% extends "base.html" %}
{% block title %}Data health{% endblock %}
{% block description %}Live status of the on-demand data fetches, the endpoint guards, and the fetch log.{% endblock %}
{% block extra_css %}<link rel="stylesheet" href="{{ vite_asset('static_src/health/index.js', 'css') }}">{% endblock %}

{% block main %}
<div class="wrap">
  <div class="page-head">
    <h1>Data health</h1>
    <span class="health-asof" data-role="asof"></span>
  </div>

  {# Systems verdict (Phase 7): a one-line plain read distilling the whole page
     — are the upstreams healthy, are the jobs on schedule, how fresh is the
     last fetch. Filled + kept live by the page script from the same snapshot
     that drives the detail below, so it never disagrees with it. #}
  <div class="health-verdict" data-role="verdict" hidden>
    <span class="health-verdict__dot"></span>
    <div class="health-verdict__text">
      <p class="health-verdict__head" data-role="verdict-head"></p>
      <p class="health-verdict__detail" data-role="verdict-detail"></p>
    </div>
  </div>

  <p class="health-lede">
    This app fetches market data <strong>on demand</strong> &mdash; when you open
    a page &mdash; through a request guard per upstream; the timed jobs are the
    live intraday poll for the symbols on screen and the 15-minute home sweep
    that keeps the dashboard fresh. Laid open here: each guard and its hourly
    budget, those jobs, and a live tail of the fetch log.
  </p>

  {# Shown only while a job is fetching; the page script toggles `hidden`. #}
  <div class="health-banner" data-role="banner" hidden></div>

  <h2 class="section-title">Endpoints</h2>
  <div data-role="endpoints"></div>

  <h2 class="section-title">Background jobs</h2>
  <div data-role="jobs"></div>

  <h2 class="section-title">Activity log</h2>
  <div data-role="log"></div>

  {# Initial snapshot, rendered by the page script on load so there is no
     flash; `<`/`>`/`&` are pre-escaped to \uXXXX (see routes::health). #}
  <script type="application/json" id="health-data">{{ health_json|safe }}</script>
</div>
{% endblock %}

{% block extra_js %}<script type="module" src="{{ vite_asset('static_src/health/index.js') }}"></script>{% endblock %}