{% extends "base.html" %}
{% block title %}Red Team — {{ design.name }}{% endblock %}
{% block content %}
<div class="cui-banner" style="background:#1a1a2e;border:1px solid #e94560;padding:4px 12px;font-size:11px;color:#e94560;text-align:center;margin-bottom:12px;">CUI // SP-CTI</div>

<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
  <div>
    <h2 style="margin:0;color:#eaeaea;">⚔ AI Red Team — {{ design.name }}</h2>
    <p style="color:#7a8cb0;font-size:13px;margin:4px 0 0;">Adversarial attack scenario analysis · MITRE ATLAS TTPs</p>
  </div>
  <div style="display:flex;gap:8px;">
    <a href="/agentic-ai/canvas/{{ design.id }}" style="background:#0f3460;color:#7ab3f0;padding:8px 16px;border-radius:5px;text-decoration:none;font-size:13px;">← Canvas</a>
    <a href="/agentic-ai/exec-summary/{{ design.id }}" style="background:#4f46e5;color:#fff;padding:8px 16px;border-radius:5px;text-decoration:none;font-size:13px;">📊 Exec Brief</a>
  </div>
</div>

{% set s = result.summary %}
{% set surf = result.attack_surface %}

<!-- Summary cards -->
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:20px;">
  <div style="background:#16213e;border:1px solid #1e3a6e;border-radius:8px;padding:12px;text-align:center;">
    <div style="font-size:28px;font-weight:700;color:#eaeaea;">{{ s.applicable }}</div>
    <div style="color:#7a8cb0;font-size:11px;">Applicable</div>
  </div>
  <div style="background:#16213e;border:1px solid {% if s.unmitigated > 0 %}#f97316{% else %}#1e3a6e{% endif %};border-radius:8px;padding:12px;text-align:center;">
    <div style="font-size:28px;font-weight:700;color:{% if s.unmitigated > 0 %}#fb923c{% else %}#4ade80{% endif %};">{{ s.unmitigated }}</div>
    <div style="color:#7a8cb0;font-size:11px;">Unmitigated</div>
  </div>
  <div style="background:#16213e;border:1px solid {% if s.critical_unmitigated > 0 %}#ef4444{% else %}#1e3a6e{% endif %};border-radius:8px;padding:12px;text-align:center;">
    <div style="font-size:28px;font-weight:700;color:{% if s.critical_unmitigated > 0 %}#f87171{% else %}#4ade80{% endif %};">{{ s.critical_unmitigated }}</div>
    <div style="color:#7a8cb0;font-size:11px;">Critical Unmitigated</div>
  </div>
  <div style="background:#16213e;border:1px solid #1e3a6e;border-radius:8px;padding:12px;text-align:center;">
    <div style="font-size:24px;font-weight:700;color:#fb923c;">{{ s.avg_exploitability }}</div>
    <div style="color:#7a8cb0;font-size:11px;">Avg Exploitability</div>
  </div>
  <div style="background:#16213e;border:2px solid {% if s.overall_risk == 'CRITICAL' %}#ef4444{% elif s.overall_risk == 'HIGH' %}#f97316{% elif s.overall_risk == 'MEDIUM' %}#f59e0b{% else %}#22c55e{% endif %};border-radius:8px;padding:12px;text-align:center;">
    <div style="font-size:18px;font-weight:700;color:{% if s.overall_risk == 'CRITICAL' %}#f87171{% elif s.overall_risk == 'HIGH' %}#fb923c{% elif s.overall_risk == 'MEDIUM' %}#fbbf24{% else %}#4ade80{% endif %};">{{ s.overall_risk }}</div>
    <div style="color:#7a8cb0;font-size:11px;">Overall Risk</div>
  </div>
</div>

<!-- Attack Surface -->
<div style="background:#16213e;border:1px solid #1e3a6e;border-radius:8px;padding:14px;margin-bottom:20px;">
  <div style="color:#94a3b8;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;">⚠ Attack Surface</div>
  <div style="display:flex;flex-wrap:wrap;gap:8px;">
    {% macro surf_badge(flag, label) %}
    <span style="padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;
      background:{% if flag %}#450a0a{% else %}#052e16{% endif %};
      color:{% if flag %}#f87171{% else %}#4ade80{% endif %};">
      {% if flag %}⚠{% else %}✓{% endif %} {{ label }}
    </span>
    {% endmacro %}
    {{ surf_badge(surf.no_input_guard, "No Input Guard") }}
    {{ surf_badge(surf.no_output_guard, "No Output Guard") }}
    {{ surf_badge(surf.no_hitl, "No HITL Gate") }}
    {{ surf_badge(surf.no_pii_guard, "No PII Guard") }}
    {{ surf_badge(surf.unsandboxed_exec, "Unsandboxed Exec") }}
    {% if surf.llm_exposed %}<span style="padding:3px 10px;border-radius:10px;font-size:11px;background:#1e3a6e;color:#60a5fa;">LLM Exposed</span>{% endif %}
    {% if surf.agents_exposed %}<span style="padding:3px 10px;border-radius:10px;font-size:11px;background:#1e3a6e;color:#a78bfa;">Agents Exposed</span>{% endif %}
    {% if surf.tools_exposed %}<span style="padding:3px 10px;border-radius:10px;font-size:11px;background:#1e3a6e;color:#38bdf8;">Tools Exposed</span>{% endif %}
    {% if surf.memory_exposed %}<span style="padding:3px 10px;border-radius:10px;font-size:11px;background:#1e3a6e;color:#fbbf24;">Memory Exposed</span>{% endif %}
  </div>
</div>

<!-- Scenario table -->
<div style="background:#16213e;border:1px solid #1e3a6e;border-radius:8px;overflow:hidden;">
  <table style="width:100%;border-collapse:collapse;font-size:12px;">
    <thead>
      <tr style="background:#0f172a;">
        <th style="padding:10px 14px;color:#7a8cb0;text-align:left;font-weight:500;width:80px;">ID</th>
        <th style="padding:10px 12px;color:#7a8cb0;text-align:left;font-weight:500;">Scenario</th>
        <th style="padding:10px 10px;color:#7a8cb0;text-align:left;font-weight:500;width:140px;">Tactic</th>
        <th style="padding:10px 10px;color:#7a8cb0;text-align:left;font-weight:500;width:80px;">Severity</th>
        <th style="padding:10px 10px;color:#7a8cb0;text-align:right;font-weight:500;width:80px;">Exploit</th>
        <th style="padding:10px 10px;color:#7a8cb0;text-align:left;font-weight:500;width:100px;">Status</th>
      </tr>
    </thead>
    <tbody>
    {% for sc in result.scenarios %}
    <tr style="border-top:1px solid #1e3a6e;opacity:{% if not sc.applicable %}0.4{% else %}1{% endif %};">
      <td style="padding:8px 14px;color:#475569;font-size:10px;">
        <div>{{ sc.id }}</div>
        <div style="color:#334155;">{{ sc.technique }}</div>
      </td>
      <td style="padding:8px 12px;">
        <div style="color:#eaeaea;font-weight:500;">{{ sc.title }}</div>
        <div style="color:#475569;font-size:10px;margin-top:2px;">{{ sc.description }}</div>
        {% if sc.applicable and not sc.mitigated and sc.missing_mitigations %}
        <div style="color:#fbbf24;font-size:10px;margin-top:3px;">⚡ Add: {{ sc.missing_mitigations[:3] | join(', ') }}</div>
        {% endif %}
      </td>
      <td style="padding:8px 10px;color:#94a3b8;font-size:10px;">{{ sc.tactic }}</td>
      <td style="padding:8px 10px;">
        <span style="padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;
          background:{% if sc.severity=='CRITICAL' %}#450a0a{% elif sc.severity=='HIGH' %}#431407{% elif sc.severity=='MEDIUM' %}#422006{% else %}#0f2721{% endif %};
          color:{% if sc.severity=='CRITICAL' %}#f87171{% elif sc.severity=='HIGH' %}#fb923c{% elif sc.severity=='MEDIUM' %}#fbbf24{% else %}#34d399{% endif %};">
          {{ sc.severity }}
        </span>
      </td>
      <td style="padding:8px 10px;text-align:right;">
        {% if sc.applicable %}
        <span style="font-weight:700;color:{% if sc.exploitability >= 8 %}#f87171{% elif sc.exploitability >= 6 %}#fb923c{% elif sc.exploitability >= 4 %}#fbbf24{% else %}#4ade80{% endif %};">
          {{ sc.exploitability }}
        </span>
        {% else %}
        <span style="color:#334155;">N/A</span>
        {% endif %}
      </td>
      <td style="padding:8px 10px;">
        {% if not sc.applicable %}
        <span style="color:#334155;font-size:10px;">Not applicable</span>
        {% elif sc.mitigated %}
        <span style="padding:2px 8px;border-radius:10px;font-size:10px;background:#052e16;color:#4ade80;">✓ Mitigated</span>
        {% else %}
        <span style="padding:2px 8px;border-radius:10px;font-size:10px;background:#450a0a;color:#f87171;">✗ Exposed</span>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}