{% extends "base.html" %}
{% block title %}ODD {{ date }} {{ time }} - Scenario Result Viewer{% endblock %}

{% block breadcrumb %}
<nav class="flex text-sm text-gray-500" aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2">
    <li><a href="/" class="hover:text-blue-600">Sessions</a></li>
    <li><span class="mx-1">/</span></li>
    <li><a href="/session/{{ ref }}" class="hover:text-blue-600">{{ date }} {{ time }}</a></li>
    <li><span class="mx-1">/</span></li>
    <li class="text-gray-800 font-medium">ODD</li>
  </ol>
</nav>
{% endblock %}

{% macro outcome_badge(outcome) %}
  {% if outcome == "pass" %}<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">PASS</span>
  {% elif outcome == "fail" %}<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">FAIL</span>
  {% elif outcome == "error" %}<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">ERROR</span>
  {% else %}<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">N/A</span>{% endif %}
{% endmacro %}

{% block content %}
<style>{{ oo_styles | safe }}</style>

<div class="mb-4 flex items-center justify-between">
  <div>
    <h1 class="text-2xl font-bold text-gray-800">Results on the ODD</h1>
    <p class="text-sm text-gray-500 mt-1">{{ results | length }} case(s) of {{ date }} {{ time }}. Each cell: the runs that spent time in it, coloured by what they did; click a cell to look inside it.</p>
  </div>
  <a href="/compare?s={{ ref | urlencode }}" class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm text-gray-700 hover:bg-gray-50">Compare with past runs</a>
</div>

{% if matrix_html %}
<div class="bg-white rounded-lg shadow p-4 mb-6 overflow-x-auto" id="odd-coverage">
  {{ matrix_html | safe }}
</div>
{% else %}
<div class="bg-white rounded-lg shadow p-6 mb-6 text-sm text-gray-600">
  No case of this session left a coverage file (<code>{stem}_coverage.json</code>): the ODD view needs a run with an ODD.
</div>
{% endif %}

{% if plot_html %}
<details class="bg-white rounded-lg shadow p-4 mb-6" {% if not conditions %}open{% endif %}>
  <summary class="cursor-pointer text-lg font-semibold text-gray-700">Drawn cases</summary>
  <div class="mt-3 overflow-x-auto">{{ plot_html | safe }}</div>
</details>
{% endif %}

<div class="mb-6" id="cell-cases">
  <h2 class="text-lg font-semibold text-gray-700 mb-2">
    {% if conditions %}Cases in
      {% for name, bucket in conditions %}<code class="text-sm bg-gray-100 px-1 rounded">{{ name }} = {{ bucket }}</code>{% if not loop.last %}, {% endif %}{% endfor %}
      <a href="/session/{{ ref }}/odd" class="ml-2 text-sm font-normal text-blue-600 hover:text-blue-800">(whole ODD)</a>
    {% else %}All cases{% endif %}
    <span class="text-sm font-normal text-gray-500">{{ in_cell | length }}</span>
  </h2>
  <div class="bg-white rounded-lg shadow overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200 text-sm">
      <thead class="bg-gray-50">
        <tr>
          <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">#</th>
          <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Case</th>
          <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Result</th>
          <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Drawn at</th>
          {% for key, (label, _) in metric_names.items() %}
          <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase whitespace-nowrap">{{ label }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200">
        {% for r in in_cell %}
        <tr class="hover:bg-gray-50 {% if r.outcome == 'fail' %}bg-red-50{% endif %}" data-outcome="{{ r.outcome }}">
          <td class="px-4 py-2 font-mono"><a class="text-blue-600 hover:text-blue-800" href="/session/{{ ref }}/{{ r.index }}#recording">{{ r.index }}</a></td>
          <td class="px-4 py-2 whitespace-nowrap">{{ r.label }}</td>
          <td class="px-4 py-2">{{ outcome_badge(r.outcome) }}</td>
          <td class="px-4 py-2 text-xs text-gray-600">
            {% for name, bucket in r.buckets.items() if name in varying %}<span class="inline-block bg-gray-100 rounded px-1 mr-1 mb-0.5 font-mono" title="{{ name }}">{{ name.split('.')[-1] }} {{ bucket }}</span>{% endfor %}
          </td>
          {% for key in metric_names %}
          <td class="px-4 py-2 text-right font-mono text-gray-700">{% if key in r.metrics %}{{ r.metrics[key] }}{% else %}<span class="text-gray-300">-</span>{% endif %}</td>
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>{{ oo_script | safe }}</script>
{% endblock %}