{% extends "base.html" %}
{% block title %}Audit report — ai-offboard{% endblock %}

{% block content %}
  <div style="display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:6px;">
    <div>
      <h1 style="margin:0 0 6px; font-size:24px; letter-spacing:-0.2px;">AI Access Audit</h1>
      <p class="note" style="margin:0">Tenant <code>{{ tenant_id }}</code></p>
    </div>
    {% if mode %}
      <span class="pill {{ mode }}"><span class="dot"></span>{{ mode }} scan</span>
    {% endif %}
  </div>
  <p class="note" style="margin:4px 0 22px">Scanned {{ scanned_at or "just now" }}</p>

  <div class="stats">
    <div class="stat accent"><b>{{ principal_count }}</b><span>principals</span></div>
    <div class="stat green"><b>{{ app_count }}</b><span>app assignments</span></div>
    <div class="stat amber"><b>{{ findings|length }}</b><span>findings</span></div>
  </div>

  <div class="actions">
    <a class="btn" href="/report.md" download>Download report.md</a>
    <a class="btn ghost" href="/report.html" download>Download report.html</a>
    <a class="btn ghost" href="/">← New audit</a>
  </div>

  <div class="card">
    <h2>App inventory</h2>
    <p class="sub">AI apps with assignments found in this tenant.</p>
    {% if apps %}
      <div class="chips">
        {% for app in apps %}
          <span class="chip {{ 'high' if app.tier == 'high' else '' }}">
            {{ app.name }}<small>{{ app.tier or 'unknown' }}</small>
          </span>
        {% endfor %}
      </div>
    {% else %}
      <p class="empty">No AI app assignments detected.</p>
    {% endif %}
  </div>

  <div class="card">
    <h2>Findings</h2>
    {% if findings %}
      <div style="display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px">
        <button class="btn ghost" style="padding:6px 12px;font-size:12px" onclick="filterFindings('all')" data-filter="all">All <small id="count-all">{{ findings|length }}</small></button>
        <button class="btn ghost" style="padding:6px 12px;font-size:12px" onclick="filterFindings('critical')" data-filter="critical">Critical</button>
        <button class="btn ghost" style="padding:6px 12px;font-size:12px" onclick="filterFindings('high')" data-filter="high">High</button>
        <button class="btn ghost" style="padding:6px 12px;font-size:12px" onclick="filterFindings('medium')" data-filter="medium">Medium</button>
        <button class="btn ghost" style="padding:6px 12px;font-size:12px" onclick="filterFindings('low')" data-filter="low">Low</button>
      </div>
      <div class="tablewrap">
        <table id="findings-table">
          <thead><tr><th>Severity</th><th>Rule</th><th>Subject</th><th>Evidence</th><th>Remediation</th></tr></thead>
          <tbody>
            {% for f in findings %}
            <tr data-severity="{{ f.severity }}">
              <td><span class="sev sev-{{ f.severity }}">{{ f.severity }}</span></td>
              <td><code>{{ f.rule_id }}</code></td>
              <td>{{ f.subject }}</td>
              <td>{{ f.evidence }}</td>
              <td>
                <ul class="rem">
                  {% for step in f.remediation %}
                    <li>{{ step }}</li>
                  {% else %}
                    <li>No programmed steps.</li>
                  {% endfor %}
                </ul>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="legend">
        <span><span class="sevbadge critical">Critical</span> broad access</span>
        <span><span class="sevbadge high">High</span> revoke promptly</span>
        <span><span class="sevbadge medium">Medium</span> review</span>
        <span><span class="sevbadge low">Low</span> monitor</span>
      </div>
    {% else %}
      <p class="empty">No findings. Clean scan.</p>
    {% endif %}
  </div>

  <div class="card">
    <h2>Full report (markdown)</h2>
    <div class="tablewrap">
      <pre style="min-width:640px">{{ report_md }}</pre>
    </div>
  </div>
{% endblock %}

{% block scripts %}
<script>
function filterFindings(severity) {
  var rows = document.querySelectorAll("#findings-table tbody tr");
  var btns = document.querySelectorAll("[data-filter]");
  btns.forEach(function(b) { b.classList.toggle("active", b.getAttribute("data-filter") === severity); });
  rows.forEach(function(r) {
    var show = severity === "all" || r.getAttribute("data-severity") === severity;
    r.style.display = show ? "" : "none";
  });
}
window.addEventListener("DOMContentLoaded", function() { filterFindings("all"); });
</script>
<style>
[data-filter].active { background: var(--accent) !important; color: var(--accent-ink) !important; font-weight: 800; }
</style>
{% endblock %}