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

{% block content %}
<div id="operations-root" data-run-id="{{ run_id or '' }}" class="max-w-7xl mx-auto px-6 py-6">
    <!-- Status bar -->
    <div class="panel p-4 mb-6 flex items-center gap-6">
        <div class="flex items-center gap-2">
            {% if workflow_run %}
                {% set status_name = workflow_run.status.name %}
                {% if status_name == 'COMPLETED' %}
                    <span id="workflow-status-badge" class="badge badge-sm badge-success">{{ status_name }}</span>
                {% elif status_name == 'FAILED' %}
                    <span id="workflow-status-badge" class="badge badge-sm badge-error">{{ status_name }}</span>
                {% elif status_name == 'RUNNING' %}
                    <span id="workflow-status-badge" class="badge badge-sm badge-info">{{ status_name }}</span>
                {% elif status_name == 'PARTIAL' %}
                    <span id="workflow-status-badge" class="badge badge-sm badge-warning">{{ status_name }}</span>
                {% elif status_name == 'WAITING_FOR_USER' %}
                    <span id="workflow-status-badge" class="badge badge-sm badge-warning">{{ status_name }}</span>
                {% else %}
                    <span id="workflow-status-badge" class="badge badge-sm badge-ghost">{{ status_name }}</span>
                {% endif %}
                <span id="workflow-name" class="text-sm font-medium">{{ workflow_run.name or 'Workflow' }}</span>
            {% else %}
                <span id="workflow-status-badge" class="badge badge-sm badge-ghost">IDLE</span>
                <span id="workflow-name" class="text-sm font-medium">No active workflow</span>
            {% endif %}
        </div>
        <div class="text-sm text-base-content/40 ml-auto flex items-center gap-3">
            {% if workflow_run %}
            <a href="/operations?run_id={{ workflow_run.id }}" class="btn btn-outline btn-secondary btn-xs">Refresh</a>
            {% endif %}
            Elapsed: <span id="workflow-elapsed">--:--</span>
        </div>
    </div>

    <!-- Child run badges row -->
    <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.lower() }}
            </span>
            {% endfor %}
        {% endif %}
    </div>

    <!-- Waiting banner (hidden initially) -->
    <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>

    <div class="flex gap-6">
        <!-- Main panel area -->
        <div class="flex-1">
            <div role="tablist" class="tabs tabs-bordered mb-4">
                <button type="button" role="tab" class="tab tab-active" aria-selected="true" tabindex="0" onclick="switchTab(this, 'audit')">audit</button>
                <button type="button" role="tab" class="tab" aria-selected="false" tabindex="-1" onclick="switchTab(this, 'proxy')">proxy</button>
                <button type="button" role="tab" class="tab" aria-selected="false" tabindex="-1" onclick="switchTab(this, 'inject')">inject</button>
                <button type="button" role="tab" class="tab" aria-selected="false" tabindex="-1" onclick="switchTab(this, 'chain')">chain</button>
                <button type="button" role="tab" class="tab" aria-selected="false" tabindex="-1" onclick="switchTab(this, 'ipi')">ipi</button>
                <button type="button" role="tab" class="tab" aria-selected="false" tabindex="-1" onclick="switchTab(this, 'cxp')">cxp</button>
                <button type="button" role="tab" class="tab" aria-selected="false" tabindex="-1" onclick="switchTab(this, 'rxp')">rxp</button>
            </div>

            <div class="panel p-4 min-h-[200px]">
                <div id="tab-audit">
                    {% include "partials/audit_tab.html" %}
                </div>
                <div id="tab-inject" class="hidden">
                    {% include "partials/inject_tab.html" %}
                </div>
                <div id="tab-proxy" class="hidden">
                    {% include "partials/proxy_tab.html" %}
                </div>
                <div id="tab-chain" class="hidden">
                    {% include "partials/chain_tab.html" %}
                </div>
                <div id="tab-ipi" class="hidden">
                    {% include "partials/ipi_tab.html" %}
                </div>
                <div id="tab-cxp" class="hidden">
                    {% include "partials/cxp_tab.html" %}
                </div>
                <div id="tab-rxp" class="hidden">
                    {% include "partials/rxp_tab.html" %}
                </div>
            </div>

            <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>

        <!-- Findings sidebar -->
        <div class="w-72 shrink-0">
            <h3 class="text-sm font-semibold uppercase tracking-wider text-base-content/50 mb-3">
                Findings
            </h3>
            <div class="panel min-h-[200px] p-4">
                <div id="findings-sidebar-content">
                    {% include "partials/findings_sidebar.html" %}
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/ws.js"></script>
{% endblock %}