{% extends "base.html" %}
{% block title %}Metrics - Supavision{% endblock %}
{% block content %}
<div class="page-header">
  <div class="page-header-left">
    <h2>Metrics</h2>
    <span class="page-subtitle">Numeric measurements from health checks. Sparklines show the 30-day trend.</span>
  </div>
</div>

{% if not infra_cards %}
<div class="empty-state">
  <svg class="empty-state-icon" aria-hidden="true" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="40" height="40" rx="3"/><path d="M12 34l8-10 6 6 10-14"/></svg>
  <h3>No metrics collected yet</h3>
  <p class="text-muted">Metrics are recorded after each health check. Add a resource and run a health check to see data here.</p>
  <div class="mt-4"><a href="/resources" class="btn">View Resources</a></div>
</div>
{% endif %}

{# ── Infrastructure Metrics ── #}
{% if infra_cards %}
<div class="resource-section">
  <div class="resource-section-header">
    <h3>Infrastructure</h3>
    <span class="text-muted text-xs ml-3">Collected during health checks. Sparklines show 30-day trend.</span>
  </div>
  {% for card in infra_cards %}
  <div class="stat-card mb-4">
    <div class="resource-section-header">
      <a href="/resources/{{ card.resource_id }}">{{ card.resource_name }}</a>
      <span class="badge badge--type">server</span>
    </div>
    <div class="metric-grid">
      {% for metric in card.metrics %}
      <div class="metric-card">
        <div class="metric-card-header">
          <span class="metric-name">{{ metric.name | replace('_', ' ') | capitalize }}</span>
        </div>
        <div>
          <span class="metric-value">{{ metric.display_value }}</span>
          <span class="metric-unit">{{ metric.unit }}</span>
        </div>
        {% if metric.sparkline_points %}
        <svg aria-hidden="true" class="sparkline" viewBox="0 0 {{ metric.sparkline_width }} {{ metric.sparkline_height }}" preserveAspectRatio="none">
          <polyline
            points="{{ metric.sparkline_points }}"
            stroke="var(--color-healthy)"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="none"
          />
        </svg>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}
{% endblock %}