{% from "components.html" import closer, dot, pill, scrim with context %}
{{ scrim("/runs") }}
<section class="panel panel--run{{ " panel--terminal" if tab == "terminal" }}"
         role="dialog"
         aria-label="Run #{{ run.seq }}">
    <header class="panel__header run__header" id="run-header">
        <div class="panel__title">
            <h2 class="panel__name">Run #{{ run.seq }}</h2>
            {{ pill(run.status, run.tone) }}
            <span class="table__id">{{ run.id }}</span>
            <div class="run__actions">
                {% if run.stoppable %}
                    <a class="button button--secondary"
                       href="/runs/{{ run.id }}/stop"
                       hx-get="/runs/{{ run.id }}/stop"
                       hx-target="#overlay">Stop run</a>
                {% elif run.deletable %}
                    <a class="button button--outline-danger"
                       href="/runs/{{ run.id }}/delete"
                       hx-get="/runs/{{ run.id }}/delete"
                       hx-target="#overlay">Delete</a>
                {% endif %}
                <a class="button button--secondary"
                   href="/runs/{{ run.id }}/rerun"
                   hx-get="/runs/{{ run.id }}/rerun"
                   hx-target="#overlay">Rerun</a>
                {{ closer("/runs") }}
            </div>
        </div>
        <p class="panel__facts">
            <span class="run__strong">{{ run.workspace }}</span>
            <span class="run__sep">·</span>
            <span class="run__mono">{{ run.image }}</span>
            <span class="run__sep">·</span>
            <span class="run__strong">
                {% if run.runner_tone %}{{ dot(run.runner_tone, small=true) }}{% endif %}
                {{ run.runner }}
            </span>
            <span class="run__sep">·</span>
            <span>{{ run.started }}</span>
            <span class="run__sep">·</span>
            <span class="run__mono">{{ run.elapsed }}</span>
            <span class="run__sep">·</span>
            <span>{{ run.attempt }}</span>
        </p>
    </header>
    <nav class="run__tabs">
        <a class="run__tab{{ " run__tab--active" if tab == "overview" }}"
           href="/runs/{{ run.id }}"
           hx-get="/runs/{{ run.id }}"
           hx-target="#overlay">Overview</a>
        <a class="run__tab{{ " run__tab--active" if tab == "terminal" }}"
           href="/runs/{{ run.id }}/terminal"
           hx-get="/runs/{{ run.id }}/terminal"
           hx-target="#overlay">Terminal</a>
        <a class="run__tab{{ " run__tab--active" if tab == "logs" }}"
           href="/runs/{{ run.id }}/logs"
           hx-get="/runs/{{ run.id }}/logs"
           hx-target="#overlay">Logs &amp; Audit</a>
        <a class="run__tab{{ " run__tab--active" if tab == "gates" }}"
           href="/runs/{{ run.id }}/gates"
           hx-get="/runs/{{ run.id }}/gates"
           hx-target="#overlay">Gates</a>
        {% if diff %}
            <a class="run__tab{{ " run__tab--active" if tab == "changes" }}"
               href="/runs/{{ run.id }}/changes"
               hx-get="/runs/{{ run.id }}/changes"
               hx-target="#overlay">{{ diff.label }}</a>
        {% endif %}
    </nav>
    {% if tab == "terminal" %}
        {% include "partials/run_terminal.html" %}
    {% elif tab == "logs" %}
        {% include "partials/run_logs.html" %}
    {% elif tab == "changes" %}
        {% include "partials/run_changes.html" %}
    {% elif tab == "gates" %}
        {% include "partials/run_gates.html" %}
    {% else %}
        <div class="run__body" id="run-overview">
            <div class="run__column">
                {% with title="Run", facts=run.run, link=none %}
                    {% include "partials/run_facts_card.html" %}
                {% endwith %}
                {% with title="Policy", facts=run.policy, link=("/profiles/" ~ run.profile_id ~ "/edit" if run.profile_id else none), label="Edit profile" %}
                    {% include "partials/run_facts_card.html" %}
                {% endwith %}
            </div>
            <div class="run__column">
                {% include "partials/run_runner_card.html" %}
                {% include "partials/run_lifecycle_card.html" %}
            </div>
            {% if mcp %}
                {% include "partials/run_mcp_card.html" %}
            {% endif %}
            {% if run.model %}
                {% include "partials/run_model_card.html" %}
            {% endif %}
        </div>
    {% endif %}
    {# Only the header and the overview body are redrawn: other tabs hold a terminal or a form. #}
    <div hidden
         hx-get="/runs/{{ run.id }}"
         hx-trigger="every 5s"
         hx-select-oob="#run-header{{ ',#run-overview' if tab == 'overview' }}"
         hx-swap="none"></div>
</section>