{% extends "base.html" %}
{% block title %}— {{ experiment }}{% endblock %}
{% block content %}

<style>
/* ── report typography ── */
.report-content{font-size:.875rem;line-height:1.7;color:#475569}
.report-content h1{font-size:1.5rem;font-weight:700;margin:1.5rem 0 .75rem;color:#0f172a;letter-spacing:-.01em}
.report-content h2{font-size:1.125rem;font-weight:700;margin:2rem 0 .6rem;color:#1e293b;
  border-bottom:2px solid #e2e8f0;padding-bottom:.35rem;display:flex;align-items:center;gap:.5rem}
.report-content h2::before{content:'';display:inline-block;width:4px;height:1.1em;
  background:#6366f1;border-radius:2px;flex-shrink:0}
.report-content h3{font-size:.9375rem;font-weight:600;margin:1.5rem 0 .5rem;color:#334155}
.report-content h4{font-size:.875rem;font-weight:600;margin:1.25rem 0 .4rem;color:#475569;text-transform:uppercase;letter-spacing:.04em;font-size:.75rem}
.report-content p{margin:.6rem 0;color:#475569}
.report-content blockquote{border-left:3px solid #6366f1;background:#f8f7ff;padding:.6rem 1rem;margin:.75rem 0;border-radius:0 .375rem .375rem 0;color:#4338ca;font-size:.85rem}
.report-content blockquote p{color:#4338ca;margin:0}

/* ── tables ── */
.report-content table{border-collapse:collapse;width:100%;font-size:.8125rem;margin:1rem 0;box-shadow:0 1px 3px rgba(0,0,0,.06);border-radius:.5rem;overflow:hidden}
.report-content thead tr{background:#f1f5f9}
.report-content th{text-align:left;padding:.5rem .85rem;font-weight:700;color:#475569;text-transform:uppercase;font-size:.68rem;letter-spacing:.06em;border-bottom:2px solid #e2e8f0}
.report-content td{padding:.45rem .85rem;border-bottom:1px solid #f1f5f9;color:#334155;vertical-align:middle}
.report-content tbody tr:last-child td{border-bottom:none}
.report-content tbody tr:hover td{background:#f8fafc}
.report-content td:has(code){font-variant-numeric:tabular-nums}

/* ── code ── */
.report-content code{font-family:ui-monospace,monospace;background:#f1f5f9;padding:.1rem .35rem;border-radius:.25rem;font-size:.8em;color:#3730a3;border:1px solid #e2e8f0}
.report-content pre{background:#1e293b;border-radius:.5rem;padding:.85rem 1rem;overflow-x:auto;font-size:.8rem;margin:1rem 0;color:#e2e8f0}
.report-content pre code{background:transparent;border:none;color:inherit;padding:0;font-size:inherit}

/* ── lists ── */
.report-content ul{padding-left:1.5rem;margin:.5rem 0;list-style:disc}
.report-content ol{padding-left:1.5rem;margin:.5rem 0;list-style:decimal}
.report-content li{margin:.3rem 0;color:#475569}
.report-content strong{font-weight:700;color:#1e293b}
.report-content em{font-style:italic;color:#64748b}

/* ── warning callout ── */
.report-content h2:has(+ p > em), .report-content h2[id*="warning"]{color:#b45309}
.report-content h2[id*="warning"]::before{background:#f59e0b}
</style>

<div class="mb-6">
  <div class="flex items-center gap-2 text-sm text-slate-500 mb-2">
    <a href="/results" class="hover:underline">Results</a>
    <span>›</span>
    <span class="font-mono text-slate-700">{{ experiment }}</span>
  </div>
  <div class="flex items-center justify-between">
    <h1 class="text-2xl font-bold text-slate-900 font-mono">{{ experiment }}</h1>
    <button
      hx-post="/results/{{ experiment }}/report"
      hx-target="#report-content"
      hx-swap="innerHTML"
      hx-indicator="#report-spinner"
      @click="tab = 'report'"
      class="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium
             bg-indigo-600 text-white hover:bg-indigo-700 transition-colors">
      <span id="report-spinner" class="htmx-indicator">↻</span>
      Regenerate Report
    </button>
  </div>
  {% if report_generated %}
  <p class="text-xs text-slate-400 mt-1">Report generated automatically — no prior report was found on disk.</p>
  {% endif %}
</div>

<div x-data="{ tab: '{{ initial_tab }}' }">

  <!-- Tab bar -->
  <div class="flex gap-1 mb-4 border-b border-slate-200">
    <button
      @click="tab = 'report'"
      :class="tab === 'report'
        ? 'border-b-2 border-indigo-600 text-indigo-700 font-medium'
        : 'text-slate-500 hover:text-slate-700'"
      class="px-4 py-2 text-sm -mb-px">
      Report
    </button>
    <button
      @click="tab = 'journal'"
      :class="tab === 'journal'
        ? 'border-b-2 border-indigo-600 text-indigo-700 font-medium'
        : 'text-slate-500 hover:text-slate-700'"
      class="px-4 py-2 text-sm -mb-px">
      Journal
    </button>
    <button
      @click="tab = 'runs'"
      :class="tab === 'runs'
        ? 'border-b-2 border-indigo-600 text-indigo-700 font-medium'
        : 'text-slate-500 hover:text-slate-700'"
      class="px-4 py-2 text-sm -mb-px">
      Runs ({{ runs | length }})
    </button>
  </div>

  <!-- Runs tab -->
  <div x-show="tab === 'runs'" x-cloak>
    {% if runs %}
    <div class="bg-white rounded-lg border border-slate-200 shadow-sm overflow-hidden">
      <table class="min-w-full divide-y divide-slate-200 text-sm">
        <thead class="bg-slate-50">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Run ID</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Status</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Verdict</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Duration</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Started</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          {% for run in runs %}
          <tr class="hover:bg-slate-50">
            <td class="px-6 py-3">
              <a href="/results/{{ experiment }}/{{ run.run_id }}"
                 class="font-mono font-medium text-indigo-600 hover:underline">{{ run.run_id }}</a>
            </td>
            <td class="px-6 py-3">
              {% set sc = {'complete': 'bg-green-100 text-green-800', 'incomplete': 'bg-amber-100 text-amber-800'}.get(run.status, 'bg-slate-100 text-slate-600') %}
              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ sc }}">
                {{ run.status }}
              </span>
            </td>
            <td class="px-6 py-3">
              {% set vc = {'pass': 'bg-green-100 text-green-800', 'fail': 'bg-red-100 text-red-800',
                           'inconclusive': 'bg-amber-100 text-amber-800'}.get(run.verdict, 'bg-slate-100 text-slate-600') %}
              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ vc }}">
                {{ run.verdict }}
              </span>
            </td>
            <td class="px-6 py-3 text-slate-500 text-xs">
              {% if run.duration_seconds %}
                {{ "%.1f" | format(run.duration_seconds) }}s
              {% else %}—{% endif %}
            </td>
            <td class="px-6 py-3 text-slate-500 text-xs">{{ run.timestamp_start | default('—') }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="bg-white rounded-lg border border-slate-200 shadow-sm px-6 py-12 text-center">
      <p class="text-sm text-slate-400">No runs recorded for this experiment.</p>
    </div>
    {% endif %}
  </div>

  <!-- Report tab -->
  <div x-show="tab === 'report'" x-cloak>
    <div class="bg-white rounded-lg border border-slate-200 shadow-sm">
      <div id="report-content" class="px-8 py-6">
        {% if report_html %}
        <div class="report-content">{{ report_html | safe }}</div>
        {% else %}
        <p class="text-sm text-slate-400 text-center py-8">
          No report found. Click <strong class="text-slate-600">Regenerate Report</strong> to create one.
        </p>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Journal tab -->
  <div x-show="tab === 'journal'" x-cloak>
    <div id="journal-panel">
      {% include "partials/experiment_journal.html" %}
    </div>
  </div>

</div>
{% endblock %}