{% comment %}
Reusable Cost & Latency chart component.
Params: canvas_id (default: costLatencyChart), title (default: Cost & Latency Trends)
Expects parent Alpine scope: getCostLatencyDataForChart()
Parent should call refreshTrendChart() and set up filter watchers to update data.
{% endcomment %}
<c-card class="flex flex-col" style="height: 100%;" x-init="$nextTick(() => EvalCharts.initCostLatencyChart('{{ canvas_id|default:'costLatencyChart' }}', getCostLatencyDataForChart()))">
  <c-card-header class="shrink-0 flex items-center justify-between">
    <c-card-title>{{ title|default:"Cost & Latency Trends" }}</c-card-title>
    <button type="button" @click="EvalCharts.resetZoom('{{ canvas_id|default:'costLatencyChart' }}')" class="text-xs text-muted-foreground hover:text-foreground transition-colors">Reset zoom</button>
  </c-card-header>
  <c-card-content class="flex-1 flex flex-col" style="min-height: 0;">
    <div class="flex-1 relative min-h-0" style="max-height: 161px;">
      <canvas id="{{ canvas_id|default:'costLatencyChart' }}" class="w-full"></canvas>
    </div>
    <div class="mt-2 flex flex-wrap gap-3 text-xs shrink-0 text-muted-foreground">
      <span class="inline-flex items-center gap-1.5">
        <span class="w-4 border-t-[3px] rounded border-solid" style="border-color: #10b981"></span>
        <span>Cost ($)</span>
      </span>
      <span class="inline-flex items-center gap-1.5">
        <span class="w-4 border-t-[3px] rounded border-solid" style="border-color: #6366f1"></span>
        <span>Latency (s)</span>
      </span>
    </div>
  </c-card-content>
</c-card>