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

{% block content %}
<div class="max-w-7xl mx-auto px-6 py-6 space-y-6">
    <div class="flex items-center gap-3">
        <a href="/runs" class="btn btn-ghost btn-sm">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                 stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
            </svg>
            Back to History
        </a>
        <h2 class="text-lg font-semibold">Run Comparison</h2>
    </div>

    <!-- Header: side-by-side run info -->
    <div class="grid grid-cols-2 gap-4">
        <div class="panel p-4 space-y-2">
            <div class="flex items-center gap-2">
                <span class="badge badge-sm
                    {% if left_run.status.name == 'COMPLETED' %}badge-success
                    {% elif left_run.status.name == 'FAILED' %}badge-error
                    {% elif left_run.status.name == 'PARTIAL' %}badge-warning
                    {% else %}badge-ghost{% endif %}">
                    {{ left_run.status.name | format_status }}
                </span>
                <span class="font-semibold">{{ left_display }}</span>
            </div>
            <div class="text-sm text-base-content/60 space-y-1">
                {% if left_target %}
                <div>Target: {{ left_target.name }}{% if left_target.uri %} <span class="font-mono text-xs">{{ left_target.uri }}</span>{% endif %}</div>
                {% endif %}
                <div>Started: {{ left_run.started_at.strftime('%Y-%m-%d %H:%M') if left_run.started_at else "—" }}</div>
                <div>Duration: {{ left_duration or "—" }}</div>
                <div>ID: <span class="font-mono text-xs">{{ left_run.id[:12] }}</span></div>
            </div>
        </div>
        <div class="panel p-4 space-y-2">
            <div class="flex items-center gap-2">
                <span class="badge badge-sm
                    {% if right_run.status.name == 'COMPLETED' %}badge-success
                    {% elif right_run.status.name == 'FAILED' %}badge-error
                    {% elif right_run.status.name == 'PARTIAL' %}badge-warning
                    {% else %}badge-ghost{% endif %}">
                    {{ right_run.status.name | format_status }}
                </span>
                <span class="font-semibold">{{ right_display }}</span>
            </div>
            <div class="text-sm text-base-content/60 space-y-1">
                {% if right_target %}
                <div>Target: {{ right_target.name }}{% if right_target.uri %} <span class="font-mono text-xs">{{ right_target.uri }}</span>{% endif %}</div>
                {% endif %}
                <div>Started: {{ right_run.started_at.strftime('%Y-%m-%d %H:%M') if right_run.started_at else "—" }}</div>
                <div>Duration: {{ right_duration or "—" }}</div>
                <div>ID: <span class="font-mono text-xs">{{ right_run.id[:12] }}</span></div>
            </div>
        </div>
    </div>

    <!-- Module coverage comparison -->
    <div class="panel p-4">
        <h3 class="font-semibold mb-3">Module Coverage</h3>
        <div class="grid grid-cols-2 gap-4">
            <div>
                <span class="text-xs text-base-content/50 uppercase tracking-wider">Left</span>
                <div class="flex gap-1 mt-1 flex-wrap">
                    {% for mod in left_modules %}
                    <span class="badge badge-sm {% if mod in right_modules %}badge-ghost{% else %}badge-warning{% endif %}">
                        {{ mod }}{% if mod not in right_modules %} (only){% endif %}
                    </span>
                    {% endfor %}
                    {% if not left_modules %}
                    <span class="text-sm text-base-content/40">No modules</span>
                    {% endif %}
                </div>
            </div>
            <div>
                <span class="text-xs text-base-content/50 uppercase tracking-wider">Right</span>
                <div class="flex gap-1 mt-1 flex-wrap">
                    {% for mod in right_modules %}
                    <span class="badge badge-sm {% if mod in left_modules %}badge-ghost{% else %}badge-warning{% endif %}">
                        {{ mod }}{% if mod not in left_modules %} (only){% endif %}
                    </span>
                    {% endfor %}
                    {% if not right_modules %}
                    <span class="text-sm text-base-content/40">No modules</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Finding diff -->
    <div class="space-y-4">
        <h3 class="font-semibold">Finding Diff</h3>

        <div class="grid grid-cols-3 gap-3 text-sm">
            <div class="text-center">
                <span class="badge badge-warning badge-sm">{{ left_only | length }}</span>
                Left only
            </div>
            <div class="text-center">
                <span class="badge badge-ghost badge-sm">{{ common | length }}</span>
                Common
            </div>
            <div class="text-center">
                <span class="badge badge-info badge-sm">{{ right_only | length }}</span>
                Right only
            </div>
        </div>

        {% if left_only %}
        <div class="panel p-4">
            <h4 class="text-sm font-semibold text-warning mb-2">Left Only ({{ left_only | length }})</h4>
            <div class="overflow-x-auto">
                <table class="table table-xs">
                    <thead>
                        <tr><th>Severity</th><th>Module</th><th>Category</th><th>Title</th></tr>
                    </thead>
                    <tbody>
                        {% for f in left_only %}
                        <tr>
                            <td><span class="badge badge-xs">{{ f.severity.name }}</span></td>
                            <td>{{ f.module }}</td>
                            <td>{{ f.category }}</td>
                            <td>{{ f.title }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}

        {% if common %}
        <div class="panel p-4">
            <h4 class="text-sm font-semibold text-base-content/60 mb-2">Common ({{ common | length }})</h4>
            <div class="overflow-x-auto">
                <table class="table table-xs">
                    <thead>
                        <tr><th>Severity</th><th>Module</th><th>Category</th><th>Title</th></tr>
                    </thead>
                    <tbody>
                        {% for f in common %}
                        <tr>
                            <td><span class="badge badge-xs">{{ f.severity.name }}</span></td>
                            <td>{{ f.module }}</td>
                            <td>{{ f.category }}</td>
                            <td>{{ f.title }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}

        {% if right_only %}
        <div class="panel p-4">
            <h4 class="text-sm font-semibold text-info mb-2">Right Only ({{ right_only | length }})</h4>
            <div class="overflow-x-auto">
                <table class="table table-xs">
                    <thead>
                        <tr><th>Severity</th><th>Module</th><th>Category</th><th>Title</th></tr>
                    </thead>
                    <tbody>
                        {% for f in right_only %}
                        <tr>
                            <td><span class="badge badge-xs">{{ f.severity.name }}</span></td>
                            <td>{{ f.module }}</td>
                            <td>{{ f.category }}</td>
                            <td>{{ f.title }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}

        {% if not left_only and not right_only and not common %}
        <div class="panel p-8 text-center text-base-content/40">
            <p>No findings in either run.</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}