{% extends "base.html" %}
{% block title %}Compliance — GovLift{% endblock %}
{% block content %}
<div style="background:#1e293b;border:1px solid #334155;border-radius:8px;padding:6px 12px;color:#86efac;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-align:center;margin-bottom:16px;">{{ classification }}</div>
<a href="/govlift" style="color:#6ee7b7;text-decoration:none;font-size:.85rem;">← GovLift</a>
<div style="background:linear-gradient(135deg,#0f172a,#1a3a2a);padding:20px 26px;border-radius:10px;margin:16px 0 20px;">
  <h1 style="margin:0;font-size:1.35rem;font-weight:700;color:#d1fae5;">Compliance Tracker</h1>
  <p style="margin:4px 0 0;color:#6ee7b7;font-size:.83rem;">ATO Boundaries, Compliance Artifacts &amp; FedRAMP/CMMC Evidence</p>
</div>
<h3 style="color:#d1fae5;font-size:1rem;margin-bottom:12px;">ATO Boundaries ({{ data.boundaries|length }})</h3>
<div style="background:#1e293b;border:1px solid #334155;border-radius:10px;overflow:hidden;margin-bottom:24px;">
  <table style="width:100%;border-collapse:collapse;">
    <thead><tr style="background:#0f172a;">
      <th style="padding:10px 14px;text-align:left;color:#94a3b8;font-size:.73rem;text-transform:uppercase;">Name</th>
      <th style="padding:10px 14px;text-align:left;color:#94a3b8;font-size:.73rem;text-transform:uppercase;">FedRAMP</th>
      <th style="padding:10px 14px;text-align:left;color:#94a3b8;font-size:.73rem;text-transform:uppercase;">Classification</th>
      <th style="padding:10px 14px;text-align:left;color:#94a3b8;font-size:.73rem;text-transform:uppercase;">Last Assessed</th>
    </tr></thead>
    <tbody>
    {% for b in data.boundaries %}
    <tr style="border-bottom:1px solid #1e293b;">
      <td style="padding:10px 14px;color:#e2e8f0;font-size:.83rem;">{{ b.name }}</td>
      <td style="padding:10px 14px;color:#6ee7b7;font-size:.8rem;">{{ b.fedramp_level or '—' }}</td>
      <td style="padding:10px 14px;color:#94a3b8;font-size:.8rem;">{{ b.classification_level or 'CUI' }}</td>
      <td style="padding:10px 14px;color:#64748b;font-size:.78rem;">{{ b.last_assessed or 'N/A' }}</td>
    </tr>
    {% else %}
    <tr><td colspan="4" style="padding:20px;text-align:center;color:#64748b;font-size:.83rem;">No ATO boundaries defined.</td></tr>
    {% endfor %}
    </tbody>
  </table>
</div>
<h3 style="color:#d1fae5;font-size:1rem;margin-bottom:12px;">Compliance Artifacts ({{ data.artifacts|length }})</h3>
<div style="background:#1e293b;border:1px solid #334155;border-radius:10px;overflow:hidden;">
  <table style="width:100%;border-collapse:collapse;">
    <thead><tr style="background:#0f172a;">
      <th style="padding:10px 14px;text-align:left;color:#94a3b8;font-size:.73rem;text-transform:uppercase;">Control</th>
      <th style="padding:10px 14px;text-align:left;color:#94a3b8;font-size:.73rem;text-transform:uppercase;">Type</th>
      <th style="padding:10px 14px;text-align:left;color:#94a3b8;font-size:.73rem;text-transform:uppercase;">Family</th>
      <th style="padding:10px 14px;text-align:left;color:#94a3b8;font-size:.73rem;text-transform:uppercase;">Generated</th>
    </tr></thead>
    <tbody>
    {% for a in data.artifacts %}
    <tr style="border-bottom:1px solid #1e293b;">
      <td style="padding:10px 14px;color:#6ee7b7;font-size:.83rem;">{{ a.control_id }}</td>
      <td style="padding:10px 14px;color:#94a3b8;font-size:.8rem;">{{ a.artifact_type or '—' }}</td>
      <td style="padding:10px 14px;color:#94a3b8;font-size:.8rem;">{{ a.control_family or '—' }}</td>
      <td style="padding:10px 14px;color:#64748b;font-size:.78rem;">{{ a.generated_at or 'N/A' }}</td>
    </tr>
    {% else %}
    <tr><td colspan="4" style="padding:20px;text-align:center;color:#64748b;font-size:.83rem;">No compliance artifacts.</td></tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% include "includes/iqe_query_widget.html" %}
{% endblock %}