{% extends 'eval/base.html' %}
{% load static %}
{% load eval_tags %}
{% block title %}{{ run.name|default:run }} | Eval Admin{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'eval/css/experiment-run-detail.css' %}">
<style>
  .tc-layout { display: grid; gap: 16px; }
  .tc-layout--tree-only { grid-template-columns: 1fr; }
  .tc-layout--with-viewer { grid-template-columns: 1fr 380px; }
  .tc-grid { display: grid; grid-template-columns: 1fr 120px 70px; align-items: center; }
  .tc-row { padding: 5px 8px; border-radius: 6px; }
  .tc-row:hover { background: #f4f4f5; }
  .tc-row--selected { background: #eff6ff !important; }
  .tc-col-node { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .tc-col-bar { padding: 0 8px; }
  .tc-bar-track { height: 6px; background: #f4f4f5; border-radius: 4px; overflow: hidden; }
  .tc-col-latency { text-align: right; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .tc-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; line-height: 1.4; }
  .tc-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .tc-cost { font-size: 11px; color: #16a34a; font-weight: 600; flex-shrink: 0; }
  .tc-tool-ann { font-size: 11px; color: #a1a1aa; flex-shrink: 0; }
  .tc-viewer { border: 1px solid #e4e4e7; border-radius: 12px; padding: 20px; background: #fff; position: sticky; top: 16px; max-height: calc(100vh - 180px); overflow-y: auto; }
  .tc-connector { color: rgba(161,161,170,0.45); user-select: none; flex-shrink: 0; width: 14px; text-align: center; font-size: 11px; }
  .tc-header { height: 28px; font-size: 10px; font-weight: 600; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #e4e4e7; margin-bottom: 4px; }
  .tc-font { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 13px; }
  .tc-viewer-metric { border-radius: 8px; border: 1px solid #e4e4e7; padding: 10px 12px; }
  .tc-viewer-label { font-size: 10px; color: #a1a1aa; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; margin: 0; }
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<script src="{% static 'eval/js/eval-charts.js' %}"></script>
<script src="{% static 'eval/js/eval-assertion-card.js' %}"></script>
<script src="{% static 'eval/js/eval-experiment-run-detail.js' %}"></script>
{% endblock %}

{% block action_bar %}
<c-detail-nav
  back_url="{% url 'Eval:experiment_evals' %}"
  back_label="Experiment Evals"
  title="{{ run.name|default:run }}"
  meta="{{ run.run_at|date:'M j, Y g:i A' }} | {{ run.get_run_mode_display|default:run.run_mode }}{% if run.target_subagent %} · {{ run.target_subagent }}{% endif %} | {{ run.gold_set.name }}{% if criteria_label %} · {{ criteria_label }}{% endif %}"
  prev_url="{% if prev_run %}{% url 'Eval:experiment_run_detail' run_id=prev_run.run_id %}{% endif %}"
  next_url="{% if next_run %}{% url 'Eval:experiment_run_detail' run_id=next_run.run_id %}{% endif %}"
/>
{% endblock %}

{% block content %}
<div x-data="experimentRunDetail({{ scoring_enabled|yesno:'true,false' }}, {{ run.enable_llm_judge|yesno:'true,false' }})"
     x-init="init()">

  {{ matrix_data|json_script:"matrix-data" }}

  <div class="exp-run-layout">

    {% include "eval/components/_experiment_config_sidebar.html" %}

    <div class="exp-run-main">

      <div class="exp-tab-bar">
        <button class="exp-tab" :class="activeTab === 'overview' && 'exp-tab--active'" @click="activeTab = 'overview'" type="button">Overview</button>
        <button class="exp-tab" :class="activeTab === 'heatmap' && 'exp-tab--active'" @click="activeTab = 'heatmap'" type="button">Case Heatmap</button>
        <button class="exp-tab" :class="activeTab === 'trace-context' && 'exp-tab--active'" @click="activeTab = 'trace-context'" type="button">Trace Context</button>
        <button class="exp-tab" :class="activeTab === 'ranking' && 'exp-tab--active'" @click="activeTab = 'ranking'" type="button">Ranking</button>
      </div>

      <div x-show="activeTab === 'overview'">
        {% include "eval/components/_experiment_tab_overview.html" %}
      </div>
      <div x-show="activeTab === 'heatmap'" x-cloak>
        {% include "eval/components/_experiment_tab_heatmap.html" %}
      </div>
      <div x-show="activeTab === 'trace-context'" x-cloak>
        {% include "eval/components/_experiment_tab_trace_context.html" %}
      </div>
      <div x-show="activeTab === 'ranking'" x-cloak>
        {% include "eval/components/_experiment_tab_ranking.html" %}
      </div>

    </div>
  </div>
</div>

<script>
  window.__radarConfigs = {{ radar_json|safe }};
  {% if prev_run %}window.__prevRunUrl = "{% url 'Eval:experiment_run_detail' run_id=prev_run.run_id %}";{% endif %}
  {% if next_run %}window.__nextRunUrl = "{% url 'Eval:experiment_run_detail' run_id=next_run.run_id %}";{% endif %}
</script>
{% endblock %}