{% comment %}
One judged conversation on the scenario result page: a repetition, or the
whole result of a single-rep run. Context: rep (see infra.ui._rep_view).
{% endcomment %}
<div class="space-y-4">
  {% if rep.agentic %}
  <div class="bg-surface-raised rounded-xl border {% if rep.agentic.status == 'FAIL' or rep.agentic.status == 'ERROR' %}border-red-900/40{% elif rep.agentic.status == 'INCONCLUSIVE' %}border-amber-900/40{% else %}border-emerald-900/40{% endif %} p-4">
    <div class="flex items-center justify-between gap-3 mb-3">
      <h3 class="text-sm font-semibold text-violet-300">Agentic Safety</h3>
      <span class="text-xs font-semibold {% if rep.agentic.status == 'PASS' %}text-emerald-300{% elif rep.agentic.status == 'INCONCLUSIVE' %}text-amber-300{% else %}text-red-300{% endif %}">{{ rep.agentic.status }}</span>
    </div>
    <div class="space-y-1.5">
      {% for check in rep.agentic.checks %}
      <details class="rounded bg-surface-overlay/50 px-3 py-2">
        <summary class="cursor-pointer text-xs text-gray-300"><span class="mr-2 {% if check.status == 'PASS' %}text-emerald-400{% elif check.status == 'INCONCLUSIVE' %}text-amber-400{% else %}text-red-400{% endif %}">{{ check.status }}</span>{{ check.id }} — {{ check.summary }}</summary>
        {% if check.expected or check.observed %}<div class="mt-2 text-[11px] text-gray-500">Expected: {{ check.expected|default:'—' }} · Observed: {{ check.observed|default:'—' }}</div>{% endif %}
        {% if check.evidence_span_ids %}<div class="mt-1 text-[11px] text-gray-500">Evidence spans: {{ check.evidence_span_ids|join:', ' }}</div>{% endif %}
      </details>
      {% endfor %}
    </div>
  </div>
  {% endif %}
  {% if rep.summary %}
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    <div class="flex items-center gap-2 mb-2">
      <h3 class="text-sm font-semibold text-gray-300">Judge verdict</h3>
      {% include "partials/severity_badge.html" with sev=rep.severity %}
    </div>
    <p class="text-sm text-gray-300 whitespace-pre-wrap">{{ rep.summary }}</p>
  </div>
  {% endif %}

  {% if rep.has_grade %}
  {# Judge-specific output: score / dimension scores, yes-no, checklist items, feedback. #}
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    <div class="flex flex-wrap items-center gap-3 mb-2">
      <h3 class="text-sm font-semibold text-gray-300">Judge grade</h3>
      {% if rep.grade.score %}<span class="text-lg font-bold text-gray-100" title="Judge score (1–10); severity is derived from it">{{ rep.grade.score }}<span class="text-xs font-normal text-gray-500">/10</span></span>{% endif %}
      {% if rep.grade.abstained is not None %}<span class="px-2 py-0.5 rounded-full text-xs {% if rep.grade.abstained %}bg-sky-900/40 text-sky-300{% else %}bg-gray-800 text-gray-300{% endif %}">{% if rep.grade.abstained %}abstained{% else %}answered{% endif %}</span>{% endif %}
      {% if not rep.summary %}{% include "partials/severity_badge.html" with sev=rep.severity %}{% endif %}
    </div>
    {% if rep.grade.fields %}
    <dl class="grid grid-cols-2 sm:grid-cols-4 gap-x-4 gap-y-2 text-xs">
      {% for label, value in rep.grade.fields %}<div class="min-w-0"><dt class="text-gray-500">{{ label }}</dt><dd class="text-gray-200 truncate" title="{{ value }}">{{ value }}</dd></div>{% endfor %}
    </dl>
    {% endif %}
    {% for label, value in rep.grade.notes %}
    <p class="mt-3 text-[11px] uppercase tracking-wide text-gray-500">{{ label }}</p>
    <p class="text-sm text-gray-300 whitespace-pre-wrap break-words">{{ value }}</p>
    {% endfor %}
    {% for label, value in rep.grade.json_notes %}
    <details class="mt-3">
      <summary class="cursor-pointer text-[11px] uppercase tracking-wide text-gray-500 hover:text-gray-300">{{ label }}</summary>
      <pre class="mt-1 max-h-64 overflow-auto rounded-lg bg-surface p-3 text-[11px] text-gray-400">{{ value }}</pre>
    </details>
    {% endfor %}
  </div>
  {% endif %}

  {% if rep.issues or rep.positives or rep.recommendations %}
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    <div class="bg-surface-raised rounded-xl border {% if rep.issues %}border-red-900/40{% else %}border-gray-800{% endif %} p-4">
      <h3 class="text-sm font-semibold {% if rep.issues %}text-red-300{% else %}text-gray-400{% endif %} mb-2">Issues found ({{ rep.issues|length }})</h3>
      {% if rep.issues %}
      <ul class="space-y-1.5">{% for x in rep.issues %}<li class="text-sm text-gray-200 flex gap-2"><span class="text-red-400 shrink-0">•</span><span>{{ x }}</span></li>{% endfor %}</ul>
      {% else %}<p class="text-xs text-gray-500">None.</p>{% endif %}
    </div>
    <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
      <h3 class="text-sm font-semibold text-emerald-300 mb-2">Positive behaviours ({{ rep.positives|length }})</h3>
      {% if rep.positives %}
      <ul class="space-y-1.5">{% for x in rep.positives %}<li class="text-sm text-gray-200 flex gap-2"><span class="text-emerald-400 shrink-0">✓</span><span>{{ x }}</span></li>{% endfor %}</ul>
      {% else %}<p class="text-xs text-gray-500">None recorded.</p>{% endif %}
    </div>
    <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
      <h3 class="text-sm font-semibold text-gray-300 mb-2">Recommendations ({{ rep.recommendations|length }})</h3>
      {% if rep.recommendations %}
      <ul class="space-y-1.5">{% for x in rep.recommendations %}<li class="text-sm text-gray-200 flex gap-2"><span class="text-gray-500 shrink-0">→</span><span>{{ x }}</span></li>{% endfor %}</ul>
      {% else %}<p class="text-xs text-gray-500">None.</p>{% endif %}
    </div>
  </div>
  {% endif %}

  {% if rep.conversation %}
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    <h3 class="text-sm font-semibold text-gray-300 mb-3">Conversation <span class="text-gray-500 font-normal">({{ rep.turns }} turn{{ rep.turns|pluralize }})</span></h3>
    <div class="space-y-3">
      {% for m in rep.conversation %}
      <div class="flex {% if m.is_target %}justify-end{% endif %}">
        <div class="max-w-[92%] md:max-w-[80%] rounded-xl px-3 py-2.5 {% if m.is_target %}bg-blue-950/40 border border-blue-900/40{% else %}bg-surface-overlay/70 border border-gray-800{% endif %}">
          <p class="text-[10px] uppercase tracking-wide font-semibold mb-1 {% if m.is_target %}text-blue-400{% else %}text-gray-500{% endif %}">{{ m.speaker }}{% if m.turn %} · turn {{ m.turn }}{% endif %}</p>
          <p class="text-sm text-gray-200 whitespace-pre-wrap break-words">{{ m.content }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {% if rep.rationale %}
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    <h3 class="text-sm font-semibold text-gray-300 mb-2">Judge rationale</h3>
    <p class="text-sm text-gray-300 whitespace-pre-wrap">{{ rep.rationale }}</p>
  </div>
  {% endif %}

  {% if rep.trace %}
  <div class="bg-surface-raised rounded-xl border border-violet-900/40 p-4">
    <div class="flex flex-wrap items-center gap-3 mb-2">
      <h3 class="text-sm font-semibold text-violet-300">Target trace</h3>
      <span class="text-xs text-gray-500">spans the target exported under this rep's {{ rep.trace.trace_ids|length }} trace{{ rep.trace.trace_ids|length|pluralize }}</span>
    </div>
    {% if rep.trace.trace_ids %}
    <div class="flex flex-wrap gap-1.5 mb-3">
      {% for tid in rep.trace.trace_ids %}
      <code class="px-1.5 py-0.5 rounded bg-surface-overlay/70 border border-gray-800 text-[11px] text-gray-300" title="{{ tid }}">{{ tid|slice:":12" }}…</code>
      {% endfor %}
    </div>
    {% endif %}
    {% if rep.trace.spans %}
    <ul class="space-y-1.5">
      {% for s in rep.trace.spans %}
      <li class="flex items-center gap-2 text-sm">
        <span class="shrink-0 px-1.5 py-0.5 rounded bg-surface-overlay/60 border border-gray-800 text-[10px] uppercase tracking-wide {% if s.kind == 'LLM' %}text-sky-300{% elif s.kind == 'RETRIEVER' %}text-emerald-300{% elif s.kind == 'TOOL' %}text-amber-300{% elif s.kind == 'AGENT' %}text-fuchsia-300{% elif s.kind == 'GUARDRAIL' %}text-fuchsia-300{% elif s.kind == 'EVALUATOR' %}text-fuchsia-300{% elif s.kind == 'SPAN_KIND_SERVER' %}text-violet-300{% elif s.kind == 'SPAN_KIND_CLIENT' %}text-cyan-300{% elif s.kind == 'SPAN_KIND_INTERNAL' %}text-gray-400{% elif s.kind == 'CHAIN' %}text-gray-400{% else %}text-gray-300{% endif %}" title="{{ s.kind }}">{{ s.kind }}</span>
        <span class="text-gray-200 truncate" title="{{ s.name }}">{{ s.name }}</span>
        {% if s.attributes.tool_name %}<span class="text-gray-500 text-xs truncate" title="{{ s.attributes.tool_name }}">· {{ s.attributes.tool_name }}</span>{% endif %}
        {% if s.dur_ms > 0 %}<span class="shrink-0 ml-auto text-[11px] text-gray-500 tabular-nums">{{ s.dur_ms }} ms</span>{% endif %}
      </li>
      {% endfor %}
    </ul>
    {% if rep.trace.hidden_spans %}
    <p class="mt-2 text-xs text-gray-500">+ {{ rep.trace.hidden_spans }} more span{{ rep.trace.hidden_spans|pluralize }} (shorter / beyond preview).</p>
    {% endif %}
    {% else %}
    <p class="text-xs text-gray-500">The target exported no spans under this rep's trace{{ rep.trace.trace_ids|length|default:0|pluralize }} (tracing was on; the target's OTel may not be wired for this deployment).</p>
    {% endif %}
  </div>
  {% endif %}

  {% if rep.tokens or rep.other %}
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    {% if rep.tokens %}
    <h3 class="text-sm font-semibold text-gray-300 mb-2">Token usage <span class="text-gray-500 font-normal">({{ rep.total_tokens }} total)</span></h3>
    <div class="grid grid-cols-3 gap-3 text-center">
      {% for t in rep.tokens %}
      <div class="rounded-lg bg-surface-overlay/50 px-2 py-2">
        <p class="text-[10px] uppercase text-gray-500">{{ t.role }}</p>
        <p class="text-xs text-gray-300 mt-0.5">{{ t.input|default:"0" }} in · {{ t.output|default:"0" }} out</p>
      </div>
      {% endfor %}
    </div>
    {% endif %}
    {% if rep.other %}
    <div class="{% if rep.tokens %}mt-3 pt-3 border-t border-gray-800{% endif %} space-y-1.5">
      {% for key, value in rep.other.items %}
      <div class="flex items-start gap-2 text-xs"><span class="text-gray-500 shrink-0 min-w-[120px]">{{ key }}</span><span class="text-gray-300 break-all">{{ value }}</span></div>
      {% endfor %}
    </div>
    {% endif %}
  </div>
  {% endif %}

  {% if rep.images %}
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    <h3 class="text-sm font-semibold text-gray-300 mb-3">Attached image{{ rep.images|length|pluralize }}</h3>
    <div class="flex flex-wrap gap-3">
      {% for uri in rep.images %}
      <div class="max-w-[16rem]">
        <img data-img-uri="{{ uri }}" alt="attached image"
             class="file-preview-img max-h-40 rounded border border-gray-800 cursor-pointer bg-surface-overlay"
             onerror="this.style.display='none'">
        <div class="text-[10px] text-gray-500 font-mono truncate mt-1" title="{{ uri }}">{{ uri }}</div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}
</div>