{% extends "base.html" %}
{% block title %}q-ai — Runs{% endblock %}

{% block content %}
<div id="operations-root" data-run-id="{{ run_id or '' }}" class="max-w-7xl mx-auto px-6 py-6">
    {% if not results_mode and not workflow_run %}
    {# Run history view — no active run #}
    {% include "partials/run_history.html" %}
    {% else %}

    <a href="/runs" class="inline-flex items-center gap-1 text-xs hover:opacity-80 mb-3">
        <span class="text-white">&larr;</span> <span style="color: #06b6d4;">Run History</span>
    </a>

    {% if results_mode and is_terminal %}
        {% include "partials/overview_header.html" %}
    {% else %}
        {% include "partials/status_bar.html" %}

        <div id="child-run-badges" class="flex gap-2 flex-wrap mb-4">
            {% if child_runs %}
                {% for child in child_runs %}
                <span class="badge badge-sm
                    {% if child.status.value == 1 %}badge-info
                    {% elif child.status.value == 2 %}badge-success
                    {% elif child.status.value == 3 %}badge-error
                    {% elif child.status.value == 4 %}badge-ghost
                    {% elif child.status.value == 5 %}badge-warning
                    {% elif child.status.value == 6 %}badge-warning
                    {% else %}badge-ghost{% endif %}">
                    {{ child.module }}: {{ child.status.name | format_status | lower }}
                </span>
                {% endfor %}
            {% endif %}
        </div>

        <div id="waiting-banner" class="hidden alert alert-warning mb-4">
            <span id="waiting-message"></span>
            <button id="resume-btn" class="btn btn-sm btn-primary hidden"
                    onclick="resumeWorkflow()">Resume</button>
        </div>
    {% endif %}

        <!-- Main panel area -->
        <div>
            {% if results_mode and workflow_modules %}
            <div role="tablist" class="tabs tabs-bordered mb-4">
                {% for mod in workflow_modules %}
                <button type="button" role="tab"
                        class="tab {% if loop.first %}tab-active{% endif %}"
                        aria-selected="{{ 'true' if loop.first else 'false' }}"
                        tabindex="{{ '0' if loop.first else '-1' }}"
                        onclick="switchTab(this, '{{ mod }}')">{{ mod }}</button>
                {% endfor %}
            </div>

            <div class="panel p-4 min-h-[200px]">
                {% for mod in workflow_modules %}
                <div id="tab-{{ mod }}" {% if not loop.first %}class="hidden"{% endif %}>
                    {% if mod == 'audit' and mod in child_by_module %}
                        {% include "partials/audit_results_tab.html" %}
                    {% elif mod == 'inject' and mod in child_by_module %}
                        {% include "partials/inject_results_tab.html" %}
                    {% elif mod == 'proxy' and mod in child_by_module %}
                        {% include "partials/proxy_results_tab.html" %}
                    {% elif mod == 'ipi' and mod in child_by_module %}
                        {% set ipi_guidance = child_guidance.get("ipi") if child_guidance is defined else None %}
                        {% if ipi_guidance is none and child_by_module.get("ipi") %}
                            {% set no_guidance_available = true %}
                        {% endif %}
                        {% include "partials/ipi_tab.html" %}
                    {% elif mod == 'cxp' and mod in child_by_module %}
                        {% set cxp_guidance = child_guidance.get("cxp") if child_guidance is defined else None %}
                        {% set cxp_run_id = child_by_module["cxp"].id %}
                        {% if cxp_guidance is none and child_by_module.get("cxp") %}
                            {% set no_guidance_available = true %}
                        {% endif %}
                        {% include "partials/cxp_tab.html" %}
                    {% elif mod in child_by_module %}
                        <p class="text-sm text-base-content/40">
                            Results view for {{ mod }} coming soon.
                        </p>
                    {% else %}
                        <p class="text-sm text-base-content/40">
                            Module did not execute in this run.
                        </p>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            {% elif results_mode and is_report_run and report_html %}
            {# Generate report workflow — render report markdown as HTML #}
            <div class="panel p-6 min-h-[200px] prose prose-sm max-w-none">
                {{ report_html | safe }}
            </div>
            {% elif results_mode %}
            {# Results mode but no module tabs (e.g. generate_report workflow) #}
            <div class="panel p-4 min-h-[200px]">
                <p class="text-sm text-base-content/40">
                    This workflow has no module results to display.
                </p>
                {% if child_by_module %}
                <div class="mt-4 space-y-2">
                    {% for mod, child in child_by_module.items() %}
                    <div class="text-sm">
                        <span class="badge badge-ghost badge-xs">{{ mod }}</span>
                        <span class="text-base-content/60 ml-1">{{ child.status.name | format_status | lower }}</span>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
            {% endif %}

            <script>
            function switchTab(el, name) {
                document.querySelectorAll('[role="tab"]').forEach(t => {
                    t.classList.remove('tab-active');
                    t.setAttribute('aria-selected', 'false');
                    t.setAttribute('tabindex', '-1');
                });
                el.classList.add('tab-active');
                el.setAttribute('aria-selected', 'true');
                el.setAttribute('tabindex', '0');
                document.querySelectorAll('[id^="tab-"]').forEach(d => d.classList.add('hidden'));
                document.getElementById('tab-' + name).classList.remove('hidden');
            }
            </script>
        </div>

    {% endif %}
</div>
<script src="/static/ws.js"></script>
{% endblock %}