{% comment %}
  Metric dropdown card with chevron pill, full-row click target, and per-case breakdown.
  Variables:
    metric_key:   Alpine key for openMetrics toggle (e.g. "cost", "latency")
    metric_label: Display label (e.g. "Avg Total Cost")
    metric_value: Formatted average value (e.g. "$0.0142")
    delta:        Delta object with .arrow, .formatted, .css_class (optional)
    delta_key:    Key for delta lookup (same as metric_key usually)
    threshold:    Threshold status object with .met (bool) and .bound (str) (optional)
  Expects parent x-data to have: openMetrics (object), cases (array), thresholds (object, optional)
{% endcomment %}
<div>
  <div class="rounded-lg border border-border hover:border-muted-foreground/30 transition-colors cursor-pointer px-3 py-2.5"
       @click="openMetrics.{{ metric_key }} = !openMetrics.{{ metric_key }}">
    <div class="flex items-start justify-between">
      <div class="min-w-0">
        <p class="text-xs font-medium text-muted-foreground">{{ metric_label }}</p>
        <p class="text-lg font-bold text-foreground mt-0.5">{{ metric_value }}</p>
        {% if delta %}<p class="text-xs mt-0.5 {{ delta.css_class }}">{{ delta.arrow }} {{ delta.formatted }}</p>{% endif %}
        {% include "eval/components/_threshold_badge.html" with threshold=threshold %}
      </div>
      <div class="shrink-0 ml-2 mt-1 w-6 h-6 rounded-full bg-muted flex items-center justify-center transition-transform duration-200"
           :class="openMetrics.{{ metric_key }} ? 'rotate-180' : ''">
        <svg class="w-3.5 h-3.5 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
        </svg>
      </div>
    </div>
  </div>
  <div x-show="openMetrics.{{ metric_key }}" x-cloak
       x-transition:enter="transition ease-out duration-150"
       x-transition:enter-start="opacity-0 -translate-y-1"
       x-transition:enter-end="opacity-100 translate-y-0"
       x-transition:leave="transition ease-in duration-100"
       x-transition:leave-start="opacity-100 translate-y-0"
       x-transition:leave-end="opacity-0 -translate-y-1"
       class="mt-1.5 ml-1 space-y-0.5">
    <p class="text-[10px] font-medium text-muted-foreground uppercase tracking-wide mb-1">by gold set case</p>
    <template x-for="c in cases" :key="c.label">
      <div class="flex items-center justify-between py-1 px-2 rounded hover:bg-muted/50">
        <span class="text-xs font-medium text-foreground truncate" x-text="c.label"></span>
        <span class="text-xs tabular-nums ml-2 shrink-0"
              :class="(() => { let t = thresholds?.['{{ metric_key }}']; let v = c.raw?.['{{ metric_key }}']; if (!t || v == null) return 'text-muted-foreground'; return (v >= t.min && v <= t.max) ? 'text-eval-metric-good' : 'text-eval-metric-bad'; })()"
              x-text="c.{{ metric_key }}"></span>
      </div>
    </template>
  </div>
</div>