{% comment %}
Reusable Regression Pass Rate Trends chart component.
Params: canvas_id (default: passRateTrendChart), title (default: Regression Pass Rate Trends), pass_rate_domains (optional)
Expects parent Alpine scope: getPassRateDataForChart(), passRateOverlay, passRateDomains
Parent should call refreshPassRateChart() and set up filter watchers to update data.
{% endcomment %}
<c-card class="flex flex-col" style="height: 100%;" x-init="$nextTick(() => { EvalCharts.initPassRateTrendChart('{{ canvas_id|default:'passRateTrendChart' }}', getPassRateDataForChart(), passRateOverlay, passRateDomains); $watch('passRateOverlay', () => EvalCharts.applyPassRateOverlayWithRetry('{{ canvas_id|default:'passRateTrendChart' }}', passRateOverlay, passRateDomains), { deep: true }); })">
  <c-card-header class="shrink-0 flex flex-col gap-2">
    <div class="flex items-center justify-between">
      <c-card-title>{{ title|default:"Regression Pass Rate Trends" }}</c-card-title>
      <button type="button" @click="EvalCharts.resetZoom('{{ canvas_id|default:'passRateTrendChart' }}')" class="text-xs text-muted-foreground hover:text-foreground transition-colors">Reset zoom</button>
    </div>
    <div class="flex flex-wrap items-center gap-2" x-show="passRateDomains && passRateDomains.length">
      <span class="text-[11px] font-medium text-muted-foreground">Overlay:</span>
      <template x-for="d in passRateDomains" :key="d.key">
        <button type="button" @click="passRateOverlay[d.key] = !passRateOverlay[d.key]; $nextTick(() => EvalCharts.applyPassRateOverlayWithRetry('{{ canvas_id|default:'passRateTrendChart' }}', passRateOverlay, passRateDomains))" class="h-7 px-2.5 rounded-md text-xs font-medium transition-colors border"
                :class="passRateOverlay[d.key] ? '' : 'border-input bg-transparent text-muted-foreground hover:bg-muted/50'"
                :style="passRateOverlay[d.key] && d.color ? { backgroundColor: d.color.replace(/[\d.]+\)$/, '0.15)'), borderColor: d.color, color: 'inherit' } : {}" x-text="d.label"></button>
      </template>
    </div>
  </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:'passRateTrendChart' }}" class="w-full"></canvas>
    </div>
    <div class="mt-2 flex flex-wrap gap-3 text-xs shrink-0 text-muted-foreground" x-show="passRateDomains && passRateDomains.length">
      <template x-for="d in passRateDomains" :key="d.key">
        <span class="inline-flex items-center gap-1.5 transition-opacity" :class="passRateOverlay[d.key] ? '' : 'opacity-50'">
          <span class="w-4 border-t rounded border-solid" :style="'border-color: ' + (d.color || 'rgba(139, 92, 246, 0.9)')"></span>
          <span :class="passRateOverlay[d.key] ? 'text-foreground' : ''" x-text="d.label"></span>
        </span>
      </template>
    </div>
  </c-card-content>
</c-card>