{% extends "base.html" %}
{% block title %}q-ai — Intel · {{ overview_row.target.name }}{% endblock %}

{% set target = overview_row.target %}

{% block content %}
<div class="max-w-5xl mx-auto px-6 pt-12 lg:pt-16 pb-6 lg:pb-8">

    {# ── Target header ── #}
    <div class="intel-target-header" style="margin-bottom: 2rem;">
        <div class="intel-card-header" style="margin-bottom: 0.5rem;">
            <div class="intel-card-bar"></div>
            <span class="intel-card-name">{{ target.name }}</span>
        </div>
        <p class="font-mono text-sm" style="color: #94a3b8;">
            <span>{{ target.type }}</span>
            <span style="color: #475569;"> · </span>
            <span>{{ target.uri or "—" }}</span>
        </p>
        <p style="margin-top: 0.5rem;">
            <a href="/intel" style="color: #64748b; font-size: 0.85rem;">← Back to Intel</a>
        </p>
    </div>

    {# ── Sections ── #}
    <div class="intel-detail-sections" style="display: flex; flex-direction: column; gap: 1.5rem;">

        {# Imports #}
        <section id="imports" class="intel-card">
            <div class="intel-card-header">
                <div class="intel-card-bar"></div>
                <span class="intel-card-name">Imports</span>
            </div>
            {% if import_runs %}
            <div class="intel-import-rows">
                {% for run in import_runs %}
                <a class="intel-import-row"
                   id="import-run-{{ run.run_id }}"
                   href="/runs?run_id={{ run.run_id }}">
                    <span class="intel-import-col-age">{{ run.started_at | format_age }}</span>
                    <span class="intel-import-col-source">{{ run.source or "—" }}</span>
                    <span class="intel-import-col-count">
                        {{ run.finding_count }} finding{{ "" if run.finding_count == 1 else "s" }}
                    </span>
                    <span class="intel-import-col-status">
                        {{ run.status.name | format_status | lower }}
                    </span>
                </a>
                {% endfor %}
            </div>
            {% else %}
            <div class="intel-section-body">
                <p class="intel-card-desc" style="margin-bottom: 0;">
                    No imports yet.
                    <a href="/intel#card-import" style="color: #06b6d4;">Import findings</a>
                    from external tools (Garak, PyRIT, SARIF, BIPIA) to populate this section.
                </p>
            </div>
            {% endif %}
        </section>

        {# Probe Runs #}
        <section id="probe-runs" class="intel-card">
            <div class="intel-card-header">
                <div class="intel-card-bar"></div>
                <span class="intel-card-name">Probe Runs</span>
            </div>
            {% if probe_runs %}
                {% set latest_probe = probe_runs[0] %}
                {% if latest_probe.finished_at is none %}
                <p class="intel-probe-summary">
                    Latest probe: {{ latest_probe.status.name | format_status | lower }}
                    &mdash; not yet completed
                </p>
                {% elif latest_probe.metadata_available %}
                <p class="intel-probe-summary">
                    Latest probe: {{ latest_probe.finished_at | format_age }} ago
                    &mdash; {{ latest_probe.total_probes }} probes
                    across {{ latest_probe.category_count }} categories,
                    {{ "%.0f" | format(latest_probe.overall_compliance_rate * 100) }}% compliance,
                    {{ latest_probe.overall_severity.name | lower }} severity,
                    {{ latest_probe.status.name | format_status | lower }}
                </p>
                {% else %}
                <p class="intel-probe-summary">
                    Latest probe: {{ latest_probe.finished_at | format_age }} ago
                    &mdash; {{ latest_probe.status.name | format_status | lower }}
                </p>
                {% endif %}
                <div class="intel-probe-rows">
                    {% for run in probe_runs %}
                    <a class="intel-probe-row"
                       id="probe-run-{{ run.run_id }}"
                       href="/runs?run_id={{ run.run_id }}">
                        <span class="intel-probe-col-age">{{ run.finished_at | format_age }}</span>
                        {% if run.metadata_available %}
                        <span class="intel-probe-col-counts">
                            {{ run.total_probes }} probes / {{ run.category_count }} cats
                        </span>
                        <span class="intel-probe-col-rate">
                            {{ "%.0f" | format(run.overall_compliance_rate * 100) }}%
                        </span>
                        <span class="intel-probe-col-severity">
                            {{ run.overall_severity.name | lower }}
                        </span>
                        {% else %}
                        <span class="intel-probe-col-counts intel-probe-col-muted">
                            metadata unavailable
                        </span>
                        <span class="intel-probe-col-rate"></span>
                        <span class="intel-probe-col-severity"></span>
                        {% endif %}
                        <span class="intel-probe-col-status">
                            {{ run.status.name | format_status | lower }}
                        </span>
                    </a>
                    {% endfor %}
                </div>
            {% else %}
            <div class="intel-section-body">
                <p class="intel-card-desc" style="margin-bottom: 0;">
                    No probe runs yet.
                    <a href="/intel#card-probe" style="color: #06b6d4;">Run a probe</a>
                    to measure IPI susceptibility.
                </p>
            </div>
            {% endif %}
        </section>

        {# Sweep Runs #}
        <section id="sweep-runs" class="intel-card">
            <div class="intel-card-header">
                <div class="intel-card-bar"></div>
                <span class="intel-card-name">Sweep Runs</span>
            </div>
            {% if sweep_runs %}
                {% set latest = sweep_runs[0] %}
                {% if latest.finished_at is none %}
                <p class="intel-sweep-summary">
                    Latest sweep: {{ latest.status.name | format_status | lower }}
                    &mdash; not yet completed
                </p>
                {% elif latest.metadata_available and latest.reps is not none %}
                <p class="intel-sweep-summary">
                    Latest sweep: {{ latest.finished_at | format_age }} ago
                    &mdash; {{ latest.template_count }} templates
                    &times; {{ latest.style_count }} styles,
                    N={{ latest.reps }},
                    {{ latest.status.name | format_status | lower }}
                </p>
                {% else %}
                <p class="intel-sweep-summary">
                    Latest sweep: {{ latest.finished_at | format_age }} ago
                    &mdash; {{ latest.status.name | format_status | lower }}
                </p>
                {% endif %}
                <div class="intel-sweep-rows">
                    {% for run in sweep_runs %}
                    <a class="intel-sweep-row"
                       id="sweep-run-{{ run.run_id }}"
                       href="/runs?run_id={{ run.run_id }}">
                        <span class="intel-sweep-col-age">{{ run.finished_at | format_age }}</span>
                        {% if run.metadata_available %}
                        <span class="intel-sweep-col-combo">
                            {{ run.template_count }} &times; {{ run.style_count }}
                        </span>
                        <span class="intel-sweep-col-reps">
                            N={{ run.reps if run.reps is not none else "?" }}
                        </span>
                        {% else %}
                        <span class="intel-sweep-col-combo intel-sweep-col-muted">
                            metadata unavailable
                        </span>
                        <span class="intel-sweep-col-reps"></span>
                        {% endif %}
                        <span class="intel-sweep-col-status">
                            {{ run.status.name | format_status | lower }}
                        </span>
                    </a>
                    {% endfor %}
                </div>
            {% else %}
            <div class="intel-section-body">
                <p class="intel-card-desc" style="margin-bottom: 0;">
                    No sweep runs yet.
                    <a href="/intel#card-sweep" style="color: #06b6d4;">Run a sweep</a>
                    to measure per-template compliance.
                </p>
            </div>
            {% endif %}

            {# ── Recommended-template affordance (per RFC Decision 5) ──
               Five variants keyed off select_template_for_target's return
               shape. Button is a plain server-rendered <a> so the query
               string is built at render time. #}
            {% if selection_kind == "SelectedTemplate" %}
            <div class="intel-sweep-generate" style="margin-top: 1rem;">
                <a class="intel-generate-btn{% if selection.stale_warn %} intel-generate-btn-muted{% endif %}"
                   href="/launcher?{{ {'target_name': target.name, 'template': selection.template.value} | urlencode }}">
                    Generate with {{ selection.template.value | upper }}
                    {%- if selection.stale_warn %}
                    <span class="intel-generate-age">({{ selection.completed_at | format_age }} ago)</span>
                    {%- endif %}
                </a>
            </div>
            {% elif selection_kind == "TieRefusal" %}
            <p class="intel-sweep-recommend-note" style="margin-top: 1rem;">
                Near-tie across {{ selection.candidates | length }} templates
                (top: {% for t, _ in selection.candidates[:2] %}{{ t.value | upper }}{% if not loop.last %}, {% endif %}{% endfor %}).
                Rerun the sweep with more reps, or pick a template explicitly from the launcher.
            </p>
            {% elif selection_kind == "StaleRefusal" %}
            <p class="intel-sweep-recommend-note" style="margin-top: 1rem;">
                Latest sweep is {{ selection.age_days }} days old — rerun a fresh sweep
                before generating.
            </p>
            {% elif selection_kind == "NoFindings" and sweep_runs %}
            <p class="intel-sweep-recommend-note" style="margin-top: 1rem;">
                No usable sweep findings yet.
                <a href="/intel#card-sweep" style="color: #06b6d4;">Run a sweep</a>
                to enable template recommendations.
            </p>
            {% endif %}
        </section>

    </div>
</div>

<style>
.intel-card {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(139, 92, 246, 0.2);
    padding: 1.5rem 2rem;
}
.intel-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 0.75rem;
}
.intel-card-bar {
    width: 4px;
    height: 28px;
    border-radius: 2px;
    background: #a78bfa;
    opacity: 0.7;
    flex-shrink: 0;
}
.intel-card-name {
    font-family: 'Fira Code', monospace;
    font-size: 1.05rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a78bfa;
}
.intel-card-desc {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}
.intel-section-body {
    color: #94a3b8;
    font-size: 0.9rem;
}
.intel-sweep-summary {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 0 0 1rem;
}
.intel-sweep-rows {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.intel-sweep-row {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 4rem) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.15);
    color: #e2e8f0;
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.intel-sweep-row:hover {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.35);
}
.intel-sweep-col-age {
    font-family: 'Fira Code', monospace;
    color: #a78bfa;
}
.intel-sweep-col-combo,
.intel-sweep-col-reps {
    font-family: 'Fira Code', monospace;
    color: #cbd5e1;
}
.intel-sweep-col-muted {
    color: #64748b;
    font-style: italic;
}
.intel-sweep-col-status {
    color: #94a3b8;
    text-align: right;
}
.intel-probe-summary {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 0 0 1rem;
}
.intel-probe-rows {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.intel-probe-row {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 4rem) minmax(0, 5rem) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.15);
    color: #e2e8f0;
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.intel-probe-row:hover {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.35);
}
.intel-probe-col-age {
    font-family: 'Fira Code', monospace;
    color: #a78bfa;
}
.intel-probe-col-counts,
.intel-probe-col-rate,
.intel-probe-col-severity {
    font-family: 'Fira Code', monospace;
    color: #cbd5e1;
}
.intel-probe-col-muted {
    color: #64748b;
    font-style: italic;
}
.intel-probe-col-status {
    color: #94a3b8;
    text-align: right;
}
.intel-import-rows {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.intel-import-row {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.15);
    color: #e2e8f0;
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.intel-import-row:hover {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.35);
}
.intel-import-col-age {
    font-family: 'Fira Code', monospace;
    color: #a78bfa;
}
.intel-import-col-source,
.intel-import-col-count {
    font-family: 'Fira Code', monospace;
    color: #cbd5e1;
}
.intel-import-col-status {
    color: #94a3b8;
    text-align: right;
}
.intel-sweep-generate {
    display: flex;
    align-items: center;
}
.intel-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.45);
    color: #c4b5fd;
    font-family: 'Fira Code', monospace;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.intel-generate-btn:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.7);
}
.intel-generate-btn-muted {
    background: rgba(139, 92, 246, 0.06);
    border-color: rgba(139, 92, 246, 0.2);
    color: #94a3b8;
}
.intel-generate-age {
    color: #64748b;
    font-size: 0.8rem;
}
.intel-sweep-recommend-note {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 0;
}
</style>
{% endblock %}