{% extends "base.html" %}
{% block content %}
<div class="ai-banner" id="ai-banner" style="display:none;">
        <div class="ai-icon">AI</div>
        <div class="ai-body"><b>Proposal:</b> run <code>sqlmap</code> against <code>127.0.0.1:80/vulnerabilities/sqli/</code> — 3 parameters discovered, high confidence.</div>
        <div class="ai-actions"><button class="btn btn-sm btn-ghost">Dismiss</button><button class="btn btn-sm btn-primary">Approve</button></div>
      </div>

      <!-- FINDINGS -->
      <section class="page active" id="page-findings">
        <div class="page-head">
          <div class="ph-main"><h1 class="page-title">Findings</h1><p class="page-sub" id="findings-summary">Loading…</p></div>
          <div class="page-actions"><button class="btn btn-ghost btn-sm">Export</button><button class="btn btn-ghost btn-sm">Filters</button></div>
        </div>

        <div class="grid-4" style="margin-bottom: 20px;">
          <div class="kpi"><div class="k-label">Critical</div><div class="k-value c" id="kpi-critical">—</div><div class="k-spark"><svg viewBox="0 0 100 24" preserveAspectRatio="none"><path d="M0,20 L20,18 L40,14 L60,16 L80,10 L100,6" fill="none" stroke="var(--critical)" stroke-width="1.5"/></svg></div></div>
          <div class="kpi"><div class="k-label">High</div><div class="k-value h" id="kpi-high">—</div><div class="k-spark"><svg viewBox="0 0 100 24" preserveAspectRatio="none"><path d="M0,22 L20,20 L40,18 L60,12 L80,14 L100,8" fill="none" stroke="var(--high)" stroke-width="1.5"/></svg></div></div>
          <div class="kpi"><div class="k-label">Medium</div><div class="k-value m" id="kpi-medium">—</div><div class="k-spark"><svg viewBox="0 0 100 24" preserveAspectRatio="none"><path d="M0,18 L20,16 L40,12 L60,10 L80,8 L100,6" fill="none" stroke="var(--medium)" stroke-width="1.5"/></svg></div></div>
          <div class="kpi"><div class="k-label">Low / Info</div><div class="k-value l" id="kpi-low">—</div><div class="k-spark"><svg viewBox="0 0 100 24" preserveAspectRatio="none"><path d="M0,10 L20,12 L40,8 L60,6 L80,4 L100,4" fill="none" stroke="var(--low)" stroke-width="1.5"/></svg></div></div>
        </div>

        <div class="grid-2" style="margin-bottom: 20px;">
          <div class="card card-pad-lg">
            <div class="card-title">Findings by severity</div>
            <div class="card-sub" id="donut-summary">Loading…</div>
            <div style="display: flex; align-items: center; gap: 32px;">
              <svg width="140" height="140" viewBox="0 0 42 42">
                <circle cx="21" cy="21" r="15.9" fill="none" stroke="var(--bg-elev-2)" stroke-width="6"/>
                <circle cx="21" cy="21" r="15.9" fill="none" id="donut-critical" stroke="var(--critical)" stroke-width="6" stroke-dasharray="0 100" stroke-dashoffset="25"/>
                <circle cx="21" cy="21" r="15.9" fill="none" id="donut-high" stroke="var(--high)" stroke-width="6" stroke-dasharray="0 100" stroke-dashoffset="19.3"/>
                <circle cx="21" cy="21" r="15.9" fill="none" id="donut-medium" stroke="var(--medium)" stroke-width="6" stroke-dasharray="0 100" stroke-dashoffset="3.9"/>
                <circle cx="21" cy="21" r="15.9" fill="none" id="donut-low" stroke="var(--low)" stroke-width="6" stroke-dasharray="0 100" stroke-dashoffset="-23"/>
              </svg>
              <div class="donut-legend" style="flex: 1;">
                <div class="lg-row"><span class="sw" style="background: var(--critical)"></span><span class="lbl">Critical</span><span class="num" id="legend-critical">—</span></div>
                <div class="lg-row"><span class="sw" style="background: var(--high)"></span><span class="lbl">High</span><span class="num" id="legend-high">—</span></div>
                <div class="lg-row"><span class="sw" style="background: var(--medium)"></span><span class="lbl">Medium</span><span class="num" id="legend-medium">—</span></div>
                <div class="lg-row"><span class="sw" style="background: var(--low)"></span><span class="lbl">Low / Info</span><span class="num" id="legend-low">—</span></div>
              </div>
            </div>
          </div>

          <div class="card card-pad-lg">
            <div class="card-title">Attack surface</div>
            <div class="card-sub">Hover to isolate · click to filter</div>
            <div class="asg">
              <svg viewBox="0 0 200 200">
                <circle cx="100" cy="100" r="90" fill="none" stroke="var(--border)" stroke-dasharray="2 4"/>
                <circle cx="100" cy="100" r="60" fill="none" stroke="var(--border)" stroke-dasharray="2 4"/>
                <circle cx="100" cy="100" r="30" fill="none" stroke="var(--border)" stroke-dasharray="2 4"/>
                <line class="asg-edge" x1="100" y1="100" x2="100" y2="40" stroke="var(--accent)" stroke-width="1.5" opacity="0.6"/>
                <line class="asg-edge" x1="100" y1="100" x2="152" y2="130" stroke="var(--accent)" stroke-width="1.5" opacity="0.6"/>
                <line class="asg-edge" x1="100" y1="100" x2="48" y2="130" stroke="var(--accent)" stroke-width="1.5" opacity="0.6"/>
                <line class="asg-edge" x1="100" y1="40" x2="100" y2="14" stroke="var(--critical)" stroke-width="1" opacity="0.5"/>
                <line class="asg-edge" x1="100" y1="40" x2="125" y2="20" stroke="var(--high)" stroke-width="1" opacity="0.5"/>
                <line class="asg-edge" x1="152" y1="130" x2="184" y2="135" stroke="var(--high)" stroke-width="1" opacity="0.5"/>
                <line class="asg-edge" x1="152" y1="130" x2="170" y2="158" stroke="var(--medium)" stroke-width="1" opacity="0.5"/>
                <line class="asg-edge" x1="48" y1="130" x2="16" y2="130" stroke="var(--medium)" stroke-width="1" opacity="0.5"/>
                <line class="asg-edge" x1="48" y1="130" x2="30" y2="158" stroke="var(--low)" stroke-width="1" opacity="0.5"/>
                <circle cx="100" cy="100" r="10" fill="var(--accent)"/><text x="100" y="104" text-anchor="middle" font-size="8" fill="white" font-weight="700" font-family="var(--font-sans)">EN</text>
                <g class="asg-node" data-node="host"><circle cx="100" cy="40" r="7" fill="var(--critical)"/><text x="100" y="30" text-anchor="middle">127.0.0.1</text></g>
                <g class="asg-node" data-node="http"><circle cx="152" cy="130" r="6" fill="var(--accent)"/><text x="152" y="148" text-anchor="middle">:80 http</text></g>
                <g class="asg-node" data-node="tls"><circle cx="48" cy="130" r="6" fill="var(--accent)"/><text x="48" y="148" text-anchor="middle">:443 tls</text></g>
                <circle cx="100" cy="14" r="3" fill="var(--critical)"/><circle cx="125" cy="20" r="3" fill="var(--high)"/><circle cx="184" cy="135" r="3" fill="var(--high)"/><circle cx="170" cy="158" r="3" fill="var(--medium)"/><circle cx="16" cy="130" r="3" fill="var(--medium)"/><circle cx="30" cy="158" r="3" fill="var(--low)"/>
              </svg>
            </div>
          </div>
        </div>

        <div class="toolbar">
          <span class="chip on">All <span class="ct">52</span></span>
          <span class="chip">Critical <span class="ct">3</span></span>
          <span class="chip">High <span class="ct">8</span></span>
          <span class="chip">Medium <span class="ct">14</span></span>
          <span class="chip">Low <span class="ct">27</span></span>
          <span class="chip">Verified <span class="ct">18</span></span>
          <span class="chip">Candidate <span class="ct">34</span></span>
          <span class="spacer"></span>
          <div class="density-toggle"><button class="on" data-density="comfortable">Comfortable</button><button data-density="compact">Compact</button></div>
        </div>

        <div class="card card-pad-none" style="overflow: hidden;">
          <table class="tbl" id="findings-table">
            <thead>
              <tr>
                <th class="checkbox-col"><input type="checkbox" class="cb" id="select-all"></th>
                <th style="width:90px;" data-sort="severity" class="sorted">Severity <span class="sort">▾</span></th>
                <th data-sort="title">Title <span class="sort">·</span></th>
                <th style="width:160px;" data-sort="target">Target <span class="sort">·</span></th>
                <th style="width:100px;" data-sort="source">Source <span class="sort">·</span></th>
                <th style="width:100px;" data-sort="status">Status <span class="sort">·</span></th>
              </tr>
            </thead>
            <tbody id="findings-tbody"></tbody>
          </table>
          
        </div>

        <div class="bulk-bar" id="bulk-bar">
          <span class="bcount"><span id="bulk-count">0</span> selected</span>
          <div class="divider-v"></div>
          <button class="btn btn-sm btn-success" style="display:none;">Mark verified</button>
          <button class="btn btn-sm btn-ghost" style="display:none;">Export</button>
          <button class="btn btn-sm btn-danger" style="display:none;">Delete</button>
          <button class="btn btn-sm btn-ghost">Clear</button>
        </div>
      </section>
 
      <section class="page" id="page-run">
        <div class="page-head"><div class="ph-main"><h1 class="page-title">Run</h1><p class="page-sub">Pick a tool, set a target, launch. Output streams live.</p></div></div>
        <div class="split">
          <div class="drawer">
            <div class="drawer-head"><span class="t">Catalog</span><span class="s" id="run-catalog-count">— tools</span></div>
            <div class="tool-list" id="run-catalog"></div>
            </div>
          </div>
          <div>
            <div class="card card-pad-lg" style="margin-bottom:16px;">
              <div class="form-row"><label class="form-label">Target</label><input class="form-input" id="run-target" placeholder="host, IP, or URL"></div>
              <div class="form-row"><label class="form-label">Extra arguments <span class="hint">optional</span></label><input class="form-input" id="run-extra" placeholder="tool flags"></div>
              <div style="display:flex; gap:8px; align-items:center;">
                <button class="btn btn-primary btn-lg" id="run-btn">▶ Run</button>
                <button class="btn btn-ghost" id="run-cancel-btn" disabled>Cancel</button>
                <span class="pill" id="run-scope-pill" style="margin-left:auto; display:none;"></span>
              </div>
            </div>
            <div class="grid-2">
              <div class="card card-pad-lg">
                <div class="card-title">Live output</div><div class="card-sub" id="run-job-id">No job running</div>
                <div class="output" id="run-output" style="margin-top:12px; min-height:120px;"></div>
              </div>
              <div class="card card-pad-lg">
                <div class="card-title">Recent jobs</div><div class="card-sub">This engagement</div>
                <table class="tbl"><tbody id="run-recent-jobs"></tbody></table>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- SCOPE -->
      <section class="page" id="page-scope">
        <div class="page-head"><div class="ph-main"><h1 class="page-title">Scope</h1><p class="page-sub">Fail-closed. Nothing runs unless it matches an in-scope rule.</p></div><div class="page-actions"><button class="btn btn-ghost btn-sm" style="display:none;">Import</button><button class="btn btn-primary btn-sm" style="display:none;">+ Add rule</button></div></div>
        <div class="grid-2">
          <div class="card card-pad-lg">
            <div class="card-title">In scope <span class="badge" id="scope-count">—</span></div><div class="card-sub">Targets WHAXON is authorized to test</div>
            <div id="scope-rules"></div>
          </div>
          <div class="card card-pad-lg">
            <div class="card-title">Check a target</div><div class="card-sub">Before running anything</div>
            <div class="form-row"><label class="form-label">Target</label><input class="form-input" id="scope-check-input" placeholder="host, IP, URL, or CIDR"></div>
            <button class="btn btn-primary" id="scope-check-btn">Check scope</button>
            <div id="scope-check-result"></div>
          </div>
        </div>
      </section>

      <!-- REPORT -->
      <section class="page" id="page-report">
        <div class="page-head"><div class="ph-main"><h1 class="page-title">Report</h1><p class="page-sub">Generate, preview, and deliver the engagement report.</p></div></div>
        <div class="grid-3" style="margin-bottom:20px;">
          <div class="card card-pad-lg"><div class="card-title">Markdown</div><div class="card-sub">Plain text, portable</div><button class="btn btn-primary btn-sm" id="report-md">Generate</button></div>
          <div class="card card-pad-lg"><div class="card-title">HTML</div><div class="card-sub">Styled, in-browser</div><button class="btn btn-primary btn-sm" id="report-html">Generate</button></div>
          <div class="card card-pad-lg"><div class="card-title">PDF</div><div class="card-sub">Client-ready</div><button class="btn btn-primary btn-sm" id="report-pdf">Generate</button></div>
        </div>
        <div class="card card-pad-lg">
          <div class="card-title">Recent reports</div><div class="card-sub">This engagement</div>
          <table class="tbl">
            <thead><tr><th>Name</th><th>Format</th><th>Size</th><th>Created</th><th></th></tr></thead>
            <tbody>
              <tr><td><span class="title">dvwa-2026-10-01.pdf</span></td><td><span class="mono">pdf</span></td><td><span class="mono">2.4 MB</span></td><td><span class="mono">2026-10-01 18:22</span></td><td><button class="btn btn-sm btn-ghost">Open</button></td></tr>
              <tr><td><span class="title">dvwa-2026-09-30.html</span></td><td><span class="mono">html</span></td><td><span class="mono">840 KB</span></td><td><span class="mono">2026-09-30 14:11</span></td><td><button class="btn btn-sm btn-ghost">Open</button></td></tr>
            </tbody>
          </table>
        </div>

        <div class="card card-pad-lg" style="margin-top:20px;">
          <div class="card-title">Known Vulnerabilities preview <span class="badge">7</span></div>
          <div class="card-sub">This section appears in the generated report. Same data, visible before download.</div>
          <table class="tbl">
            <thead><tr><th>Hint</th><th>EDB-ID</th><th>Title</th><th>CVE</th></tr></thead>
            <tbody>
              <tr><td><span class="mono">apache 2.4.58</span></td><td><span class="mono">50383</span></td><td><span class="title">Apache HTTP Server 2.4.49 - Path Traversal &amp; RCE</span></td><td><span class="mono">CVE-2021-41773</span></td></tr>
              <tr><td><span class="mono">apache 2.4.58</span></td><td><span class="mono">50406</span></td><td><span class="title">Apache HTTP Server 2.4.50 - Path Traversal &amp; RCE</span></td><td><span class="mono">CVE-2021-42013</span></td></tr>
              <tr><td><span class="mono">openssh 9.6</span></td><td><span class="mono">-</span></td><td><span class="title">No exploits in the local mirror</span></td><td><span class="mono">-</span></td></tr>
              <tr><td><span class="mono">vsftpd 2.3.4</span></td><td><span class="mono">49757</span></td><td><span class="title">vsftpd 2.3.4 - Backdoor Command Execution</span></td><td><span class="mono">CVE-2011-2523</span></td></tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- RETEST -->
      <section class="page" id="page-retest">
        <div class="page-head"><div class="ph-main"><h1 class="page-title">Retest</h1><p class="page-sub">Findings the engine verified. Click Retest to replay the payload against the current target.</p></div></div>
        <div class="card card-pad-lg">
          <div class="card-title">Retest queue <span class="badge" id="retest-count">0</span></div>
          <div class="card-sub" id="retest-summary">Loading…</div>
          <table class="tbl">
            <thead><tr><th>Finding</th><th>Severity</th><th>Target</th><th>Source</th><th>Status</th><th></th></tr></thead>
            <tbody id="retest-tbody">
              <tr><td colspan="6" style="padding:16px; color:var(--text-dim);">Loading…</td></tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- SESSIONS -->
      <section class="page" id="page-sessions">
        <div class="page-head"><div class="ph-main"><h1 class="page-title">Sessions</h1><p class="page-sub">Live Meterpreter and shell sessions from Metasploit.</p></div></div>
        <div class="card card-pad-none">
          <table class="tbl">
            <thead><tr><th>Session</th><th>Host</th><th>Type</th><th>Info</th><th></th></tr></thead>
            <tbody id="sessions-tbody">
              <tr><td colspan="5" style="padding:16px; color:var(--text-dim);">Loading…</td></tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- ATTACK SURFACE -->
      <section class="page" id="page-graph">
        <div class="page-head"><div class="ph-main"><h1 class="page-title">Attack Surface</h1><p class="page-sub">Hosts, services, credentials, and the edges between them.</p></div></div>
        <div class="card card-pad-lg" style="text-align:center;">
          <div class="asg" style="max-height:520px;">
            <svg viewBox="0 0 400 400">
              <circle cx="200" cy="200" r="180" fill="none" stroke="var(--border)" stroke-dasharray="2 4"/>
              <circle cx="200" cy="200" r="120" fill="none" stroke="var(--border)" stroke-dasharray="2 4"/>
              <circle cx="200" cy="200" r="60" fill="none" stroke="var(--border)" stroke-dasharray="2 4"/>
              <line x1="200" y1="200" x2="200" y2="80" stroke="var(--accent)" stroke-width="2" opacity="0.6"/>
              <line x1="200" y1="200" x2="306" y2="260" stroke="var(--accent)" stroke-width="2" opacity="0.6"/>
              <line x1="200" y1="200" x2="94" y2="260" stroke="var(--accent)" stroke-width="2" opacity="0.6"/>
              <line x1="200" y1="80" x2="130" y2="30" stroke="var(--critical)" stroke-width="1.5" opacity="0.6"/>
              <line x1="200" y1="80" x2="270" y2="30" stroke="var(--high)" stroke-width="1.5" opacity="0.6"/>
              <line x1="306" y1="260" x2="370" y2="280" stroke="var(--high)" stroke-width="1.5" opacity="0.6"/>
              <line x1="306" y1="260" x2="350" y2="340" stroke="var(--medium)" stroke-width="1.5" opacity="0.6"/>
              <line x1="94" y1="260" x2="30" y2="280" stroke="var(--medium)" stroke-width="1.5" opacity="0.6"/>
              <line x1="94" y1="260" x2="50" y2="340" stroke="var(--low)" stroke-width="1.5" opacity="0.6"/>
              <circle cx="200" cy="200" r="20" fill="var(--accent)"/><text x="200" y="205" text-anchor="middle" font-size="11" fill="white" font-weight="700" font-family="var(--font-sans)">DVWA</text>
              <g class="asg-node"><circle cx="200" cy="80" r="14" fill="var(--critical)"/><text x="200" y="60" text-anchor="middle" font-size="11">127.0.0.1</text></g>
              <g class="asg-node"><circle cx="306" cy="260" r="12" fill="var(--accent)"/><text x="306" y="288" text-anchor="middle" font-size="11">:80 http</text></g>
              <g class="asg-node"><circle cx="94" cy="260" r="12" fill="var(--accent)"/><text x="94" y="288" text-anchor="middle" font-size="11">:443 tls</text></g>
              <g class="asg-node"><circle cx="130" cy="30" r="6" fill="var(--critical)"/><text x="130" y="18" text-anchor="middle" font-size="9">SQLi</text></g>
              <g class="asg-node"><circle cx="270" cy="30" r="6" fill="var(--high)"/><text x="270" y="18" text-anchor="middle" font-size="9">Apache CVE</text></g>
              <g class="asg-node"><circle cx="370" cy="280" r="6" fill="var(--high)"/><text x="370" y="298" text-anchor="middle" font-size="9">TLS weak</text></g>
              <g class="asg-node"><circle cx="350" cy="340" r="5" fill="var(--medium)"/><text x="350" y="358" text-anchor="middle" font-size="9">dir listing</text></g>
              <g class="asg-node"><circle cx="30" cy="280" r="5" fill="var(--medium)"/><text x="30" y="298" text-anchor="middle" font-size="9">XSS</text></g>
              <g class="asg-node"><circle cx="50" cy="340" r="4" fill="var(--low)"/><text x="50" y="358" text-anchor="middle" font-size="9">headers</text></g>
            </svg>
          </div>
        </div>
      </section>

      <!-- MONITORING -->
      <section class="page" id="page-monitoring">
        <div class="page-head"><div class="ph-main"><h1 class="page-title">Coverage</h1><p class="page-sub">What was skipped, and why. Not vulnerabilities; parts of the target that were not tested.</p></div></div>
        <div class="card card-pad-lg">
          <div class="card-title">Coverage gaps <span class="badge" id="coverage-count">0</span></div>
          <div class="card-sub" id="coverage-summary">No jobs loaded yet.</div>
          <table class="tbl">
            <thead><tr><th>Reason</th><th>Tool</th><th>Target</th><th>Detail</th></tr></thead>
            <tbody id="coverage-tbody">
              <tr><td colspan="4" style="padding:16px; color:var(--text-dim);">Loading…</td></tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- AUDIT -->
      <section class="page" id="page-audit">
        <div class="page-head"><div class="ph-main"><h1 class="page-title">Audit Log</h1><p class="page-sub">Immutable record of every action on this workspace.</p></div></div>
        <div class="card card-pad-none">
          <table class="tbl">
            <thead><tr><th>Time</th><th>User</th><th>Action</th><th>Subject</th><th>IP</th></tr></thead>
            <tbody>
              <tr><td><span class="mono">10:42:11</span></td><td><span class="mono">andreipath</span></td><td><span class="title">approved AI proposal</span></td><td><span class="mono">run sqlmap</span></td><td><span class="mono">127.0.0.1</span></td></tr>
              <tr><td><span class="mono">10:41:02</span></td><td><span class="mono">andreipath</span></td><td><span class="title">ran tool</span></td><td><span class="mono">nmap 127.0.0.1</span></td><td><span class="mono">127.0.0.1</span></td></tr>
              <tr><td><span class="mono">10:39:18</span></td><td><span class="mono">peter</span></td><td><span class="title">marked finding verified</span></td><td><span class="mono">SQL injection…</span></td><td><span class="mono">10.0.0.3</span></td></tr>
              <tr><td><span class="mono">10:22:55</span></td><td><span class="mono">andreipath</span></td><td><span class="title">scope override</span></td><td><span class="mono">google.com (logged)</span></td><td><span class="mono">127.0.0.1</span></td></tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- CATALOG -->
      <section class="page" id="page-catalog">
        <div class="page-head"><div class="ph-main"><h1 class="page-title">Catalog</h1><p class="page-sub" id="catalog-summary">Loading…</p></div></div>
        <div class="card card-pad-none">
          <table class="tbl">
            <thead><tr><th>Tool</th><th>Category</th><th>Binary</th><th>Adapter</th><th>Package</th></tr></thead>
            <tbody id="catalog-tbody">
              <tr><td colspan="5" style="padding:16px; color:var(--text-dim);">Loading…</td></tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- INTEL -->
      <section class="page" id="page-intel">
        <div class="page-head"><div class="ph-main"><h1 class="page-title">Threat Intel</h1><p class="page-sub">Search NVD for CVEs, or searchsploit for exploits - same data the CLI returns.</p></div></div>
        <div class="card card-pad-lg" style="margin-bottom:20px;">
          <div class="form-row" style="margin-bottom:var(--sp-3);"><label class="form-label">Search <span class="hint">CVE ID, keyword, or service version</span></label><div class="form-inline"><input class="form-input" style="flex:1;" placeholder="CVE-2021-44228  .  apache 2.4  .  werkzeug 3.1.8"><button class="btn btn-primary">Search</button></div></div>
          <div class="toolbar" style="margin-bottom:0;"><span class="chip on">CVEs (NVD)</span><span class="chip">Exploits (searchsploit)</span><span class="spacer"></span><span class="form-hint" style="margin:0;">Cache: 1 entry - TTL 7d</span></div>
        </div>
        <div class="card card-pad-none" style="overflow:hidden;">
          <div class="card-title" style="padding:var(--sp-4) var(--sp-5); margin:0; border-bottom:1px solid var(--border);">CVE-2021-44228</div>
          <div style="padding:var(--sp-5);">
            <div class="grid-4" style="margin-bottom:var(--sp-4);">
              <div class="kpi"><div class="k-label">CVSS</div><div class="k-value c" style="font-size:var(--t-xl);">10.0</div></div>
              <div class="kpi"><div class="k-label">Severity</div><div class="k-value c" style="font-size:var(--t-xl);">CRITICAL</div></div>
              <div class="kpi"><div class="k-label">Status</div><div class="k-value dim" style="font-size:var(--t-xl);">Analyzed</div></div>
              <div class="kpi"><div class="k-label">Published</div><div class="k-value dim" style="font-size:var(--t-xl);">2021-12-10</div></div>
            </div>
            <div class="kv"><span class="k">Vector</span><span class="v">CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:C/C:H/I:H/A:H</span></div>
            <div class="kv"><span class="k">CWE</span><span class="v"><span class="fw-chip cwe">CWE-20</span> <span class="fw-chip cwe">CWE-400</span> <span class="fw-chip cwe">CWE-502</span> <span class="fw-chip cwe">CWE-917</span></span></div>
            <div class="kv" style="align-items:flex-start;"><span class="k">Description</span><span class="v" style="font-family:var(--font-sans); font-size:var(--t-sm); color:var(--text-dim); line-height:1.6;">Apache Log4j2 2.0-beta9 through 2.15.0 JNDI features do not protect against attacker controlled LDAP endpoints. An attacker who can control log messages can execute arbitrary code loaded from LDAP servers.</span></div>
            <div class="kv" style="align-items:flex-start;"><span class="k">References</span><span class="v" style="font-family:var(--font-mono); font-size:var(--t-xs);"><a href="#">packetstormsecurity.com/files/165225</a><br><a href="#">packetstormsecurity.com/files/165260</a><br><a href="#">packetstormsecurity.com/files/165270</a></span></div>
          </div>
        </div>
      </section>

      <!-- COMPLIANCE -->
      <section class="page" id="page-compliance">
        <div class="page-head"><div class="ph-main"><h1 class="page-title">Compliance</h1><p class="page-sub">Findings mapped to the frameworks your client cares about.</p></div></div>
        <div class="grid-4">
          <div class="kpi"><div class="k-label">OWASP Top 10</div><div class="k-value dim">3 / 10</div><div class="progress" style="margin-top:8px;"><div class="bar warn" style="width:30%;"></div></div></div>
          <div class="kpi"><div class="k-label">CWE categories</div><div class="k-value dim">5 / 25</div><div class="progress" style="margin-top:8px;"><div class="bar warn" style="width:20%;"></div></div></div>
          <div class="kpi"><div class="k-label">PCI-DSS</div><div class="k-value dim">2 / 12</div><div class="progress" style="margin-top:8px;"><div class="bar danger" style="width:17%;"></div></div></div>
          <div class="kpi"><div class="k-label">NIST CSF</div><div class="k-value dim">8 / 20</div><div class="progress" style="margin-top:8px;"><div class="bar success" style="width:40%;"></div></div></div>
        </div>
      </section>

      <!-- SETTINGS -->
      <section class="page" id="page-settings">
        <div class="page-head"><div class="ph-main"><h1 class="page-title">Settings</h1><p class="page-sub">Workspace, engagement, and personal preferences.</p></div></div>
        <div class="grid-2">
          <div class="card card-pad-lg">
            <div class="card-title">Appearance</div><div class="card-sub">Theme and density</div>
            <div class="form-row"><label class="form-label">Theme</label><select class="tb-select" style="width:100%;"><option>Dark (default)</option><option>Light</option><option>System</option></select></div>
            <div class="form-row"><label class="form-label">Density</label><div class="density-toggle"><button class="on" data-density="comfortable">Comfortable</button><button data-density="compact">Compact</button></div></div>
          </div>
          <div class="card card-pad-lg">
            <div class="card-title">Workspace members <span class="badge">4</span></div><div class="card-sub">Path26 Security</div>
            <div class="kv"><span class="k">andreipath</span><span class="v">Owner</span></div>
            <div class="kv"><span class="k">peter</span><span class="v">Pentester</span></div>
            <div class="kv"><span class="k">maria</span><span class="v">Reviewer</span></div>
            <div class="kv"><span class="k">client@acme</span><span class="v">Client-viewer</span></div>
          </div>
        </div>
      </section>
            <!-- COMPONENTS -->
      <section class="page" id="page-components">
        <div class="page-head"><div class="ph-main"><h1 class="page-title">Components</h1><p class="page-sub">The design system. Every element used in this UI lives here.</p></div></div>

        <div class="card card-pad-lg" style="margin-bottom:20px;">
          <div class="card-title">Buttons</div><div class="card-sub">All variants, sizes, states</div>
          <div style="display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px;">
            <button class="btn btn-primary">Primary</button>
            <button class="btn btn-ghost">Ghost</button>
            <button class="btn btn-danger">Danger</button>
            <button class="btn btn-success">Success</button>
            <button class="btn btn-link">Link</button>
          </div>
          <div style="display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px;">
            <button class="btn btn-primary btn-sm">Small</button>
            <button class="btn btn-primary">Default</button>
            <button class="btn btn-primary btn-lg">Large</button>
          </div>
          <div style="display:flex; gap:8px; flex-wrap:wrap; align-items:center;">
            <button class="btn btn-primary" disabled>Disabled</button>
            <button class="btn btn-primary loading">Loading</button>
            <button class="btn btn-primary btn-icon" data-tip="Icon only">▶</button>
          </div>
        </div>

        <div class="card card-pad-lg" style="margin-bottom:20px;">
          <div class="card-title">Pills</div><div class="card-sub">Severity, status, framework</div>
          <div style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;">
            <span class="pill pill-critical"><span class="dot"></span>Critical</span>
            <span class="pill pill-high"><span class="dot"></span>High</span>
            <span class="pill pill-medium"><span class="dot"></span>Medium</span>
            <span class="pill pill-low"><span class="dot"></span>Low</span>
            <span class="pill pill-info"><span class="dot"></span>Info</span>
            <span class="pill pill-neutral">Neutral</span>
          </div>
          <div style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;">
            <span class="pill pill-accent"><span class="dot"></span>Candidate</span>
            <span class="pill pill-success"><span class="dot"></span>Verified</span>
            <span class="pill pill-warning"><span class="dot"></span>In progress</span>
            <span class="pill pill-danger"><span class="dot"></span>Failed</span>
          </div>
          <div style="display:flex; gap:8px; flex-wrap:wrap;">
            <span class="fw-chip owasp">OWASP A03</span>
            <span class="fw-chip cwe">CWE-89</span>
            <span class="fw-chip pci">PCI-DSS 6.5.1</span>
            <span class="fw-chip mitre">MITRE T1190</span>
            <span class="fw-chip nist">NIST ID.RA-5</span>
          </div>
        </div>

        <div class="card card-pad-lg" style="margin-bottom:20px;">
          <div class="card-title">Avatars &amp; groups</div><div class="card-sub">Single, group, overflow</div>
          <div style="display:flex; gap:16px; align-items:center;">
            <div class="sb-avatar">AB</div>
            <div class="sb-avatar sm">PS</div>
            <div class="av-group">
              <div class="av" style="background:linear-gradient(135deg,var(--accent),var(--high));">AB</div>
              <div class="av" style="background:linear-gradient(135deg,var(--low),var(--accent));">PS</div>
              <div class="av" style="background:linear-gradient(135deg,var(--high),var(--medium));">MR</div>
              <div class="av more">+2</div>
            </div>
          </div>
        </div>

        <div class="card card-pad-lg" style="margin-bottom:20px;">
          <div class="card-title">Accordion</div><div class="card-sub">Collapsible sections</div>
          <div class="acc">
            <div class="acc-item open">
              <div class="acc-head">Description <span class="chev">›</span></div>
              <div class="acc-body">The id parameter on /vulnerabilities/sqli/ is vulnerable to boolean-based blind SQL injection.</div>
            </div>
            <div class="acc-item">
              <div class="acc-head">Evidence <span class="chev">›</span></div>
              <div class="acc-body">Raw tool output captured during verification.</div>
            </div>
            <div class="acc-item">
              <div class="acc-head">Remediation <span class="chev">›</span></div>
              <div class="acc-body">Use parameterized queries or prepared statements.</div>
            </div>
          </div>
        </div>

        <div class="grid-3" style="margin-bottom:20px;">
          <div class="card card-pad-lg"><div class="card-title">Loading</div><div class="card-sub">Skeleton rows</div><div class="skeleton" style="width:60%;margin-bottom:8px;"></div><div class="skeleton" style="width:85%;margin-bottom:8px;"></div><div class="skeleton" style="width:45%;"></div></div>
          <div class="card card-pad-lg"><div class="card-title">Empty</div><div class="card-sub">Nothing to show</div><div class="empty"><div class="e-illo">▤</div><div class="e-title">No findings yet</div><div class="e-sub">Run a tool to populate this view</div><button class="btn btn-primary btn-sm">Run nmap</button></div></div>
          <div class="card card-pad-lg"><div class="card-title">Error</div><div class="card-sub">Recoverable failure</div><div class="error-card"><div class="ec-title">Out of scope</div><div class="ec-body">google.com:80 does not match any in-scope rule.</div><div class="ec-actions"><button class="btn btn-sm btn-ghost">Edit scope</button></div></div></div>
        </div>

        <div class="card card-pad-lg">
          <div class="card-title">Toasts</div><div class="card-sub">Transient notifications</div>
          <div style="display:flex; flex-direction:column; gap:8px; max-width:480px;">
            <div class="toast"><div class="t-icon">✓</div>Report saved</div>
            <div class="toast info"><div class="t-icon">i</div>Scope check passed</div>
            <div class="toast warn"><div class="t-icon">!</div>Rate limited — retrying</div>
            <div class="toast err"><div class="t-icon">!</div>Out of scope: google.com:80</div>
          </div>
        </div>
      </section>

      <!-- APPROVALS -->
      <section class="page" id="page-approvals">
        <div class="page-head">
          <div class="ph-main"><h1 class="page-title">Approvals</h1><p class="page-sub" id="approvals-summary">Loading…</p></div>
          <div class="page-actions">
            <input class="form-input" id="approvals-owner" placeholder="filter by owner (blank = all)" style="width:240px;">
            <button class="btn btn-ghost btn-sm" id="approvals-refresh">Refresh</button>
          </div>
        </div>
        <div class="card card-pad-lg" style="margin-bottom:16px;">
          <div class="card-title">Findings pending review <span class="badge" id="pending-findings-count">0</span></div>
          <div class="card-sub">Candidates the deterministic engine could not resolve. Mark them verified or refuted.</div>
          <div id="pending-findings-list" style="margin-top:12px;"></div>
        </div>
        <div class="card-title" style="margin-bottom:8px;">AI runs awaiting a decision</div>
        <div id="approvals-list"></div>
      </section>
{% endblock %}