{% comment %}
  Case detail modal — side-by-side comparison of one case across all configs.
  Requires Alpine parent scope with: caseModalOpen, currentCaseId, caseData (from JSON blob).
  All data is loaded from the window.__matrixData JSON injected by the page template.
{% endcomment %}
<div class="fixed inset-0 z-50 flex items-center justify-center"
     x-show="caseModalOpen"
     x-cloak
     @keydown.escape.window="caseModalOpen = false">
  <div class="absolute inset-0 bg-black/50" @click="caseModalOpen = false"></div>
  <div class="relative bg-card border border-border rounded-xl shadow-xl w-full max-w-5xl max-h-[85vh] flex flex-col mx-4"
       @click.stop>
    <header class="flex items-center justify-between px-6 py-4 border-b border-border shrink-0">
      <div>
        <h2 class="text-lg font-semibold text-foreground" x-text="'Case: ' + currentCaseId"></h2>
        <p class="text-xs text-muted-foreground mt-0.5" x-text="currentCaseDomain ? '(' + currentCaseDomain + ')' : ''"></p>
      </div>
      <button @click="caseModalOpen = false"
              class="text-muted-foreground hover:text-foreground text-xl leading-none p-1">×</button>
    </header>

    <div class="flex-1 overflow-y-auto px-6 py-4 space-y-6">
      <section>
        <h3 class="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">Input</h3>
        <pre class="text-sm text-foreground bg-muted/50 rounded-lg p-3 whitespace-pre-wrap break-words max-h-32 overflow-y-auto" x-text="currentCaseInput"></pre>
      </section>

      <section>
        <h3 class="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-3">Config Results</h3>
        <div class="grid gap-4" :class="modalConfigResults.length <= 2 ? 'grid-cols-1 sm:grid-cols-2' : 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'">
          <template x-for="cr in modalConfigResults" :key="cr.config_run_id">
            <div class="border border-border rounded-lg p-4 space-y-3">
              <div class="flex items-center gap-2">
                <span class="font-semibold text-sm text-foreground" x-text="cr.config_name"></span>
                <template x-if="cr.is_baseline">
                  <span class="inline-flex items-center rounded-full bg-primary/10 text-primary px-2 py-0.5 text-[10px] font-semibold uppercase">baseline</span>
                </template>
              </div>

              <template x-if="cr.status === 'error'">
                <div class="rounded-md bg-eval-score-1/10 text-eval-score-1 px-3 py-2 text-xs">
                  <span class="font-semibold">Error:</span> <span x-text="cr.error_message || 'Unknown error'"></span>
                </div>
              </template>

              <template x-if="cr.status !== 'error'">
                <div class="space-y-3">
                  <div class="ct-collapsible">
                    <h4 class="ct-label">Output</h4>
                    <pre class="ct-text"
                         :style="!isOutputExpanded('modal-' + cr.config_run_id) ? 'max-height: 16rem; overflow: hidden;' : ''"
                         x-text="isOutputExpanded('modal-' + cr.config_run_id) ? (cr.output || '').trim() : truncatePrompt((cr.output || '').trim(), 300)"></pre>
                    <button type="button"
                            x-show="(cr.output || '').length > 300"
                            @click.stop="toggleOutput('modal-' + cr.config_run_id)"
                            class="ct-toggle">
                      <span x-text="isOutputExpanded('modal-' + cr.config_run_id) ? 'Show less' : 'Show more'"></span>
                      <svg :style="isOutputExpanded('modal-' + cr.config_run_id) ? 'transform: rotate(90deg)' : ''" style="width:0.75rem;height:0.75rem;transition:transform 0.15s;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                      </svg>
                    </button>
                  </div>

                  <template x-if="scoringEnabled && cr.passed !== null">
                    <div class="space-y-2">
                      <div class="flex items-center gap-2">
                        <span class="text-xs font-medium" :class="cr.passed ? 'text-eval-score-5' : 'text-eval-score-1'" x-text="cr.passed ? 'PASS' : 'FAIL'"></span>
                      </div>
                      <template x-if="cr.assertion_results && cr.assertion_results.length > 0">
                        <ul class="space-y-1">
                          <template x-for="a in cr.assertion_results" :key="a.type || a.assertion">
                            <li class="flex items-center gap-1.5 text-xs">
                              <span :class="a.passed ? 'text-eval-score-5' : 'text-eval-score-1'" x-text="a.passed ? '✓' : '✗'"></span>
                              <span class="text-foreground" x-text="a.type || a.assertion"></span>
                              <template x-if="!a.passed && a.failure">
                                <span class="text-muted-foreground" x-text="'— ' + a.failure"></span>
                              </template>
                            </li>
                          </template>
                        </ul>
                      </template>
                      <template x-if="enableLlmJudge && cr.judge_passed !== null">
                        <div class="text-xs text-muted-foreground">
                          Judge: <span class="font-medium text-foreground" x-text="cr.judge_passed ? 'Pass' : 'Fail'"></span>
                        </div>
                      </template>
                    </div>
                  </template>

                  <dl class="grid grid-cols-3 gap-x-3 gap-y-1 text-[11px] border-t border-border/50 pt-2">
                    <dt class="text-muted-foreground">Tokens in</dt>
                    <dt class="text-muted-foreground">Tokens out</dt>
                    <dt class="text-muted-foreground">Latency</dt>
                    <dd class="font-medium text-foreground" x-text="cr.input_tokens ?? '—'"></dd>
                    <dd class="font-medium text-foreground" x-text="cr.output_tokens ?? '—'"></dd>
                    <dd class="font-medium text-foreground" x-text="(cr.total_latency_seconds ?? '—') + 's'"></dd>
                  </dl>
                </div>
              </template>
            </div>
          </template>
        </div>
      </section>
    </div>
  </div>
</div>