{# HTMX partial: Sovereignty Metrics Progress Panel
   Loaded via hx-get="/sovereignty/metrics/panel"
   Refs: #981
#}
{% set phase_labels = {"pre-start": "Pre-start", "week1": "Week 1", "month1": "Month 1", "month3": "Month 3", "graduated": "Graduated"} %}
{% set phase_colors = {"pre-start": "var(--text-dim)", "week1": "var(--red)", "month1": "var(--amber)", "month3": "var(--green)", "graduated": "var(--purple)"} %}

{% set metric_labels = {
  "cache_hit_rate": "Cache Hit Rate",
  "api_cost": "API Cost / Task",
  "time_to_report": "Time to Report",
  "human_involvement": "Human Involvement",
  "local_artifacts": "Local Artifacts"
} %}

{% set metric_units = {
  "cache_hit_rate": "%",
  "api_cost": "$",
  "time_to_report": "min",
  "human_involvement": "%",
  "local_artifacts": ""
} %}

{% if alerts %}
<div class="sov-alerts">
  {% for alert in alerts %}
  <div class="sov-alert-item">
    <span class="sov-alert-icon">!</span>
    <span>{{ alert.message }}</span>
  </div>
  {% endfor %}
</div>
{% endif %}

<div class="grid grid-3">
{% for key, data in metrics.items() %}
  {% set label = metric_labels.get(key, key) %}
  {% set unit = metric_units.get(key, "") %}
  {% set phase = data.phase %}
  {% set color = phase_colors.get(phase, "var(--text-dim)") %}
  <div class="stat">
    <div class="stat-value" style="color: {{ color }}">
      {% if data.current is not none %}
        {% if key == "cache_hit_rate" or key == "human_involvement" %}
          {{ "%.0f"|format(data.current * 100) }}{{ unit }}
        {% elif key == "api_cost" %}
          {{ unit }}{{ "%.2f"|format(data.current) }}
        {% elif key == "time_to_report" %}
          {{ "%.1f"|format(data.current) }}{{ unit }}
        {% else %}
          {{ data.current|int }}
        {% endif %}
      {% else %}
        --
      {% endif %}
    </div>
    <div class="stat-label">{{ label }}</div>
    <div class="stat-label" style="font-size: 0.7rem; color: {{ color }}">
      {{ phase_labels.get(phase, phase) }}
    </div>
  </div>
{% endfor %}
</div>
