{% if metrics %}
  <div class="space-y-3">
  {% for m in metrics %}
    <div id="metric-{{ m.id }}" class="w-full rounded-lg border bg-white p-3 shadow-sm">
      <div class="flex items-start justify-between gap-3">
        <div>
          <div class="text-sm font-medium metric-title">{{ m.name }}</div>
          <div class="text-xs text-slate-600 metric-doc">{{ m.documentation or 'No description' }}</div>
          {% if m.labels and m.labels|length %}
          <div class="mt-1 flex flex-wrap gap-1 metric-labels">
            {% for lbl in m.labels %}
              <span class="inline-flex items-center rounded border bg-slate-50 border-slate-200 px-1.5 py-0.5 text-[11px] text-slate-700">{{ lbl }}</span>
            {% endfor %}
          </div>
          {% endif %}
        </div>
        <div class="flex gap-2 metric-actions">
          <button
            type="button"
            class="inline-flex items-center rounded-md border px-2 py-1 text-xs hover:bg-slate-50 minimize-toggle"
            hx-on="click: {
              const card = this.closest('[id^=metric-]');
              const collapsed = card?.dataset.metricCollapsed === '1';
              const id = '{{ m.id }}';
              let set = new Set(JSON.parse(localStorage.getItem('collapsedMetrics') || '[]'));
              if (collapsed) {
                delete card.dataset.metricCollapsed;
                this.innerText = 'Minimize';
                set.delete(id);
              } else {
                card.dataset.metricCollapsed = '1';
                card.querySelectorAll('details[open]').forEach(d => d.open = false);
                const add = card.querySelector('[id^=add-value-]');
                if (add) add.innerHTML = '';
                this.innerText = 'Expand';
                set.add(id);
              }
              localStorage.setItem('collapsedMetrics', JSON.stringify(Array.from(set)));
            }"
          >Minimize</button>
          {% if not m.read_only %}
          <button
            class="inline-flex items-center rounded-md border border-indigo-600 text-indigo-700 px-2 py-1 text-xs hover:bg-indigo-50"
            hx-get="/ui/metric/{{ m.id }}/add-value"
            hx-target="#add-value-{{ m.id }}"
            hx-swap="innerHTML">
            Add Labelset
          </button>
          <button
            class="inline-flex items-center rounded-md border bg-red-600 border-red-600 px-2 py-1 text-xs text-white hover:bg-red-700"
            hx-delete="/metric/{{ m.id }}"
            hx-confirm="Delete metric '{{ m.name }}'?"
            hx-target="#metrics-list" hx-swap="innerHTML">
            Delete
          </button>
          {% else %}
          <span class="inline-flex items-center rounded-md border px-2 py-1 text-[11px] text-neutral-500">Read-only</span>
          {% endif %}
        </div>
      </div>

      {% if m['values'] %}
      <div class="mt-2 space-y-1 metric-values">
        {% for v in m['values'] %}
        <div class="flex items-start justify-between gap-3 rounded border px-2 py-1">
          <div class="flex items-center gap-2 flex-wrap">
            <div class="flex items-center gap-1">
              {% if v['labels'] and v['labels']|length %}
                {% for lbl in v['labels'] %}
                  <span class="inline-flex items-center rounded bg-slate-100 px-1.5 py-0.5 text-[11px] text-slate-700">{{ lbl }}</span>
                {% endfor %}
              {% else %}
                <span class="text-[11px] text-slate-500">—</span>
              {% endif %}
            </div>
            <span class="inline-flex items-center rounded border border-indigo-200 bg-indigo-50 px-1.5 py-0.5 text-[10px] font-mono uppercase text-indigo-700">{{ v['kind'] }}</span>
          </div>
          <div class="flex items-center gap-2">
            <details id="inspect-{{ m.id }}-{{ v['labels'] | join('-') | replace(' ', '_') }}"
                     class="inline-block" hx-preserve
                     hx-on="toggle: document.getElementById('inspect-panel-{{ m.id }}-{{ v['labels'] | join('-') | replace(' ', '_') }}')?.classList.toggle('hidden', !this.open)">
              <summary class="cursor-pointer inline-flex items-center rounded-md border border-slate-300 px-2 py-0.5 text-[11px] hover:bg-slate-50">Inspect</summary>
              <div class="sr-only"
                   hx-get="/ui/metric/{{ m.id }}/value?{% for l in v['labels'] %}labels={{ l }}{% if not loop.last %}&{% endif %}{% endfor %}"
                   hx-trigger="toggle once from:closest details"
                   hx-target="#inspect-panel-{{ m.id }}-{{ v['labels'] | join('-') | replace(' ', '_') }}"
                   hx-swap="innerHTML"></div>
            </details>
            {% if not m.read_only %}
            <button
              class="inline-flex items-center rounded-md border px-2 py-0.5 text-[11px] hover:bg-slate-50"
              hx-delete="/metric/{{ m.id }}/value?{% for l in v['labels'] %}labels={{ l }}{% if not loop.last %}&{% endif %}{% endfor %}"
              hx-confirm="Delete labelset on '{{ m.name }}'?"
              hx-target="#metrics-list" hx-swap="innerHTML">
              Delete
            </button>
            {% endif %}
          </div>
        </div>
        <div id="inspect-panel-{{ m.id }}-{{ v['labels'] | join('-') | replace(' ', '_') }}" class="hidden" hx-preserve></div>
        {% endfor %}
      </div>
      {% endif %}

      {% if not m.read_only %}
      <div id="add-value-{{ m.id }}" hx-preserve></div>
      {% endif %}
    </div>
  {% endfor %}
  </div>
{% else %}
  <div class="rounded-lg border bg-white p-4 text-sm text-neutral-600">No metrics yet.</div>
{% endif %}