{% extends "base.html" %}
{% from "_macros.html" import pass_rate_badge, submission_badge, submission_badge_dual, score_view_toggle, status_badge, download_icon %}
{% block title %}{{ sub.round_label }} · {{ run.run_id }} · SForge{% endblock %}
{% block content %}

<div class="mb-4 flex items-center gap-2 text-sm">
  <a href="/" class="text-slate-400 hover:text-slate-700">&larr; runs</a>
  <span class="text-slate-300">/</span>
  <a href="/run/{{ run.run_id }}/{{ run.task }}" class="text-slate-400 hover:text-slate-700">{{ run.run_id }}</a>
  <span class="text-slate-300">/</span>
  <span class="mono text-slate-700">{{ sub.round_label }}</span>
</div>

<header class="bg-white border border-slate-200 rounded-lg p-5 mb-5">
  <div class="flex flex-wrap items-center gap-2 mb-4">
    <h1 class="text-lg font-semibold mono">{{ sub.round_label }}</h1>
    <span class="chip {% if sub.kind == 'auto' %}bg-cyan-50 text-cyan-700{% else %}bg-indigo-50 text-indigo-700{% endif %}">{{ sub.kind }}</span>
    {{ submission_badge_dual(sub, run) }}
    {% if sub.round_label == run.best_round %}<span class="chip bg-emerald-50 text-emerald-700">best</span>{% endif %}
    {% if sub.timed_out %}<span class="chip bg-amber-100 text-amber-700">timed-out</span>{% endif %}
    {% if run.has_rescaled %}<span class="text-xs ml-1">{{ score_view_toggle() }}</span>{% endif %}
    <span class="flex-1"></span>
    {{ download_icon("/run/" ~ run.run_id ~ "/" ~ run.task ~ "/submission/" ~ sub.round_label ~ "/archive", "code .tar.gz", "Download this submission's code patch (submission.tar.gz, the archive sent to the judge)") }}
    {{ download_icon("/run/" ~ run.run_id ~ "/" ~ run.task ~ "/submission/" ~ sub.round_label ~ "/raw", "test output", "Download the raw test_output.txt produced by running this submission") }}
  </div>

  {% if sub.kind == "game" %}
  <div class="grid grid-cols-2 sm:grid-cols-5 gap-4 text-sm">
    <div><div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Score</div><div class="text-lg font-semibold mono text-purple-700">{{ "%.4g"|format(sub.score or 0) }}</div></div>
    <div><div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Max</div><div class="text-lg font-semibold mono">{{ "%.4g"|format(sub.max_score or 0) }}</div></div>
    <div><div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Peak</div><div class="text-lg font-semibold mono">{{ "%.4g"|format(sub.peak_score or sub.score or 0) }}</div></div>
    <div><div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">% of max</div><div class="text-lg font-semibold mono">{{ "%.1f"|format(sub.pass_rate * 100) }}%</div></div>
    <div><div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Moves</div><div class="text-lg font-semibold mono">{{ sub.runtime_seconds|int }}</div></div>
  </div>
  {% else %}
  <div class="grid grid-cols-2 sm:grid-cols-{{ 6 if sub.score is not none else 5 }} gap-4 text-sm">
    <div><div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Total</div><div class="text-lg font-semibold mono">{{ sub.total_tests }}</div></div>
    <div><div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Passed</div><div class="text-lg font-semibold mono text-emerald-600">{{ sub.passed }}</div></div>
    <div><div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Failed</div><div class="text-lg font-semibold mono text-rose-600">{{ sub.failed }}</div></div>
    <div><div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Errors</div><div class="text-lg font-semibold mono text-orange-600">{{ sub.errors }}</div></div>
    {% if sub.score is not none %}<div><div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Score</div><div class="text-lg font-semibold mono text-purple-700">
      {%- if run.has_rescaled and sub.score_0_100 is not none -%}
      <span class="score-view-val" data-view="rescaled" title="rescaled 0-100">{{ "%.1f"|format(sub.score_0_100) }}</span><span class="score-view-val hidden" data-view="raw" title="raw score">{{ "%.4g"|format(sub.score) }}</span>
      {%- else -%}{{ "%.4g"|format(sub.score) }}{%- endif -%}
    </div></div>{% endif %}
    <div><div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Runtime</div><div class="text-lg font-semibold mono">{{ format_duration(sub.runtime_seconds) }}</div></div>
  </div>
  {% endif %}
</header>

{# Code diff #}
<section class="bg-white border border-slate-200 rounded-lg overflow-hidden mb-5">
  <details>
    <summary class="px-4 py-3 cursor-pointer text-sm font-semibold text-slate-700 hover:bg-slate-50 select-none">
      Code diff vs previous submission
    </summary>
    <div class="px-4 py-3 border-t border-slate-100"
         hx-get="/run/{{ run.run_id }}/{{ run.task }}/submission/{{ sub.round_label }}/diff"
         hx-trigger="intersect once"
         hx-swap="innerHTML">
      <span class="text-xs text-slate-400">Loading diff...</span>
    </div>
  </details>
</section>

{# Tests #}
<section class="bg-white border border-slate-200 rounded-lg overflow-hidden">
  <div class="px-4 py-3 border-b border-slate-100 flex items-center justify-between flex-wrap gap-2">
    <h2 class="text-sm font-semibold text-slate-700">{% if sub.kind == "game" %}Session{% else %}Tests{% endif %}</h2>
    <div class="flex items-center gap-1.5 text-xs">
      {% set base = "/run/" ~ run.run_id ~ "/" ~ run.task ~ "/submission/" ~ sub.round_label %}
      <a href="{{ base }}" class="chip {% if not active_status %}bg-slate-800 text-white{% else %}bg-slate-100 text-slate-600 hover:bg-slate-200{% endif %}">all</a>
      {% for key, count in status_counts.items()|sort %}
        <a href="{{ base }}?status={{ key }}" class="chip {% if key == active_status %}bg-slate-800 text-white{% else %}bg-slate-100 text-slate-600 hover:bg-slate-200{% endif %}">{{ key }} ({{ count }})</a>
      {% endfor %}
      <a href="{{ base }}/raw" target="_blank" class="text-slate-400 hover:text-slate-700 ml-1">raw log &nearr;</a>
    </div>
  </div>

  {% if sub.kind == "game" %}
  <div class="p-8 text-center text-slate-400 text-sm">Game session details are in the raw log.</div>
  {% elif tests %}
  <table class="w-full text-sm">
    <thead class="bg-slate-50 text-slate-500 text-left text-xs">
      <tr>
        <th class="px-4 py-2 font-medium w-24">Status</th>
        <th class="px-4 py-2 font-medium">Test</th>
        <th class="px-4 py-2 font-medium w-16 text-right">Detail</th>
      </tr>
    </thead>
    <tbody>
      {% for t in tests %}
      {% set slug = loop.index %}
      <tr class="border-t border-slate-100">
        <td class="px-4 py-2">{{ status_badge(t.status) }}</td>
        <td class="px-4 py-2 mono text-xs text-slate-600">{{ t.name }}</td>
        <td class="px-4 py-2 text-right">
          {% if t.status in ("FAILED", "ERROR") %}
          <button class="text-indigo-500 hover:underline text-xs"
                  hx-get="/run/{{ run.run_id }}/{{ run.task }}/submission/{{ sub.round_label }}/test?name={{ t.name|urlencode }}"
                  hx-target="#judger-{{ slug }}"
                  hx-swap="innerHTML"
                  onclick="this.closest('tr').nextElementSibling.classList.toggle('hidden')">view</button>
          {% endif %}
        </td>
      </tr>
      {% if t.status in ("FAILED", "ERROR") %}
      <tr class="hidden border-t border-slate-100 bg-slate-50">
        <td colspan="3" class="p-0"><div id="judger-{{ slug }}" class="p-4"><span class="text-xs text-slate-400">loading...</span></div></td>
      </tr>
      {% endif %}
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="p-8 text-center text-slate-400 text-sm">No tests to show{% if active_status %} for <span class="mono">{{ active_status }}</span>{% endif %}.</div>
  {% endif %}
</section>

{% endblock %}