{% extends "base.html" %}
{% block title %}Metric sources{% endblock %}
{% block page_id %}metric_sources{% endblock %}
{% block head %}
<style>
  .ms-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1000px) { .ms-layout { grid-template-columns: minmax(320px, 2fr) minmax(0, 3fr); } }
  .ms-layout > * { min-width: 0; }
  .ms-fields { display: grid; gap: 12px; }
  .ms-fields input, .ms-fields select, .ms-fields textarea { width: 100%; min-width: 0; }
  .ms-fields input[type="checkbox"] { width: auto; }
  .ms-fields fieldset { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .ms-fields legend { padding: 0 6px; }
  .ms-groups { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-groups label { display: flex; align-items: center; gap: 7px; }
  .ms-json { font-family: var(--mono); min-height: 130px; resize: vertical; }
  .ms-wrap { overflow-wrap: anywhere; white-space: pre-wrap; }
  .ms-log { max-height: 180px; overflow: auto; }
  .ms-source-selected { background: var(--bg-3); }
  .ms-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
</style>
{% endblock %}
{% block content %}
<div class="a-page-head">
  <h1>Metric sources</h1>
  <div class="a-sub">Desktop source configurations and the samples actually collected from each source.</div>
</div>
<div class="a-toolbar">
  <a class="a-btn" href="{{ aida_rel('monitoring') }}">Monitoring dashboard</a>
  <button class="a-btn" id="ms-refresh" type="button">Refresh sources</button>
  <button class="a-btn a-btn--primary" id="ms-new" type="button">New source</button>
</div>
<div id="ms-message" aria-live="polite"></div>
<p id="ms-note" class="a-hint">Loading saved desktop sources...</p>
<section class="a-card" aria-labelledby="ms-list-title">
  <div class="a-card-head"><h2 id="ms-list-title">Saved sources</h2><span id="ms-count"></span></div>
  <div id="ms-list"></div>
</section>
<section class="a-card" aria-labelledby="ms-legacy-title">
  <h2 id="ms-legacy-title">Legacy web sources</h2>
  <p class="a-hint">Review sources from the older web catalog before copying selected configurations into the desktop source catalog. Import does not start collection.</p>
  <div class="ms-buttons">
    <button class="a-btn" id="ms-legacy-review" type="button">Review legacy sources</button>
    <button class="a-btn" id="ms-legacy-import" type="button" disabled>Import selected sources</button>
  </div>
  <p id="ms-legacy-note" class="a-hint" aria-live="polite">No legacy import has been reviewed.</p>
  <div id="ms-legacy-list"></div>
</section>
<div class="ms-layout">
  <section class="a-card" aria-labelledby="ms-editor-title">
    <h2 id="ms-editor-title">New source</h2>
    <p id="ms-draft-note" class="a-hint" aria-live="polite"></p>
    <form id="ms-form" class="ms-fields">
      <label class="a-field" for="ms-name"><span>Source name</span><input class="a-input" id="ms-name" required maxlength="120" autocomplete="off"></label>
      <label class="a-field" for="ms-type"><span>Source type</span><select class="a-select" id="ms-type">
        <option value="local_system">Local system (this PC)</option>
        <option value="prometheus">Prometheus scrape</option>
        <option value="http_api">HTTP / REST API</option>
      </select></label>
      <label class="a-field" for="ms-interval"><span>Collection interval (seconds)</span><input class="a-input" id="ms-interval" type="number" min="1" max="86400" step="1" required value="60"></label>
      <fieldset id="ms-local"><legend>Local metric groups</legend><div class="ms-groups" id="ms-groups"></div></fieldset>
      <fieldset id="ms-remote" hidden><legend>Endpoint and private headers</legend>
        <label class="a-field" for="ms-url"><span>Endpoint URL</span><input class="a-input" id="ms-url" type="url" autocomplete="off" spellcheck="false"><span id="ms-url-note" class="a-hint"></span></label>
        <label class="a-field" for="ms-headers"><span>Headers (JSON object)</span><textarea class="a-input ms-json" id="ms-headers" rows="3" autocomplete="off" spellcheck="false"></textarea><span class="a-hint">Leave blank to retain stored private headers. Enter {} or choose Clear stored headers to remove them.</span></label>
        <label><input id="ms-clear-headers" type="checkbox"> Clear stored headers</label>
      </fieldset>
      <label class="a-field" for="ms-config"><span>Additional source configuration (JSON object)</span><textarea class="a-input ms-json" id="ms-config" rows="7" spellcheck="false">{}</textarea><span id="ms-config-note" class="a-hint"></span></label>
      <div class="ms-buttons">
        <button class="a-btn a-btn--primary" id="ms-save" type="submit">Save source</button>
        <button class="a-btn" id="ms-reload" type="button">Reload saved source</button>
        <button class="a-btn a-btn--danger" id="ms-delete" type="button">Delete source</button>
      </div>
    </form>
  </section>
  <section class="a-card" aria-labelledby="ms-observed-title">
    <h2 id="ms-observed-title">Source observations</h2>
    <div id="ms-provenance"></div>
    <div class="ms-buttons">
      <button class="a-btn a-btn--primary" id="ms-start" type="button">Start collection</button>
      <button class="a-btn" id="ms-stop" type="button">Stop collection</button>
      <button class="a-btn" id="ms-test" type="button">Test saved source</button>
      <button class="a-btn" id="ms-history-refresh" type="button">Refresh samples</button>
    </div>
    <p id="ms-action-note" class="ms-wrap" role="status" aria-live="polite">Select a saved source to view its observations.</p>
    <pre id="ms-job" class="ms-wrap ms-log" aria-label="Actual collection job output"></pre>
    <div class="a-toolbar">
      <button class="a-btn" id="ms-json" type="button">Download history JSON</button>
      <button class="a-btn" id="ms-csv" type="button">Download history CSV</button>
    </div>
    <p id="ms-sample-note" class="a-hint" aria-live="polite"></p>
    <div id="ms-samples"></div>
  </section>
</div>
{% endblock %}
{% block scripts %}<script src="{{ aida_rel('static/js/metric_sources.js') }}"></script>{% endblock %}