{% extends "base.html" %}
{% block title %}Dashboard · mocktrics Exporter{% endblock %}
{% block content %}
  <section class="mb-6">
    <div class="rounded-xl border bg-white p-6 shadow-sm">
      <h2 class="text-base font-semibold mb-2">Overview</h2>
      <p class="text-sm text-slate-600">A simple UI to inspect and manage metrics.</p>
      <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
        <div class="rounded-lg border p-4" id="collect-interval"
             hx-get="/ui/collect-interval" hx-trigger="load" hx-swap="innerHTML">
          <div class="text-slate-500">Collect Interval</div>
          <div class="mt-1 text-slate-500">Loading…</div>
        </div>
        <div class="rounded-lg border p-4">
          <div class="text-slate-500">Units Disabled</div>
          <div class="mt-1 font-medium">{{ 'Yes' if config.disable_units else 'No' }}</div>
        </div>
      </div>
    </div>
  </section>

  <section>
    <div class="mb-3 flex items-center justify-between">
      <h2 class="text-base font-semibold">Metrics</h2>
      <div class="flex items-center gap-2">
        <button
          class="inline-flex items-center rounded-md border border-indigo-600 text-indigo-700 px-3 py-1.5 text-sm hover:bg-indigo-50"
          hx-get="/ui/metric/new" hx-target="#new-metric-area" hx-swap="innerHTML"
        >New Metric</button>
      </div>
    </div>
    <div id="new-metric-area" class="mb-3"></div>
    <div id="metrics-list"
         hx-get="/ui/metrics"
         hx-trigger="load, every 10s[!document.querySelector('[data-form-open]') && !document.querySelector('details[open]')]"
         hx-swap="innerHTML">
      <div class="text-sm text-neutral-500">Loading metrics…</div>
    </div>
  </section>
{% endblock %}