{% 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>enterprise apps</span></div>
    <div class="stat green"><b>{{ assignment_count }}</b><span>app-role 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>Data coverage</h2>
    <p class="sub">A green finding count is only as trustworthy as the telemetry behind it.</p>
    {% if coverage %}
      <div class="chips">
        {% for name, state in coverage.items() %}
          <span class="chip {{ 'high' if state == 'not_assessed' else '' }}">{{ name.replace('_', ' ') }}<small>{{ state }}</small></span>
        {% endfor %}
      </div>
    {% else %}
      <p class="empty">Coverage metadata was not recorded for this scan.</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>Zero Trust policy compliance</h2>
      <p class="sub">Policies evaluated against this scan. See <code>offboard policy check</code> for the CLI view.</p>
      {% if policy_evals %}
        <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px">
          <span style="font-size:0.85rem; font-weight:600; padding:4px 12px; border-radius:99px; background:{{ '#123524' if policy_summary.overall == 'PASS' else '#3a2418' }}; color:{{ '#4ade80' if policy_summary.overall == 'PASS' else '#fb923c' }}">
            {{ policy_summary.overall }} — {{ policy_summary.compliant }}/{{ policy_summary.total }} passing{% if policy_summary.not_assessed %}, {{ policy_summary.not_assessed }} not assessed{% endif %}
          </span>
          {% if policy_summary.by_severity.critical %}<span class="note">critical violations: {{ policy_summary.by_severity.critical }}</span>{% endif %}
        </div>
        <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px">
          {% for e in policy_evals %}
          <div style="border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:var(--bg)">
            <div style="display:flex; justify-content:space-between; align-items:center; gap:8px">
              <b style="font-size:0.9rem">{{ e.id }} — {{ e.name }}</b>
              <span style="font-size:0.72rem; font-weight:700; padding:2px 8px; border-radius:99px; background:{{ '#123524' if e.compliant else '#3d1a1a' }}; color:{{ '#4ade80' if e.compliant else '#f87171' }}">
                {{ 'PASS' if e.compliant else ('NOT ASSESSED' if e.status == 'not_assessed' else 'FAIL') }}
              </span>
            </div>
            {% if not e.compliant and e.evidence %}
            <ul style="margin:8px 0 0; padding-left:16px; font-size:0.78rem; color:var(--text-dim); line-height:1.5">
              {% for line in e.evidence[:2] %}
              <li>{{ line }}</li>
              {% endfor %}
            </ul>
            {% endif %}
          </div>
          {% endfor %}
        </div>
      {% else %}
        <p class="empty">No policies evaluated. Run a scan first.</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 %}