{% extends "base.html" %}
{% block title %}Compliance - Vindicara{% endblock %}
{% block content %}
<div style="margin-bottom:24px;">
  <h1 style="font-size:20px;font-weight:600;color:#EFEFEF;">Compliance</h1>
  <p style="color:#9090A8;font-size:13px;margin-top:4px;">Automated compliance evidence generation</p>
</div>

<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;">
  {% for fw in frameworks %}
  <div class="card" style="padding:16px;">
    <div style="font-size:14px;font-weight:600;color:#EFEFEF;">{{ fw.name }}</div>
    <div style="font-size:12px;color:#9090A8;margin-top:4px;">{{ fw.description }}</div>
    <div style="margin-top:12px;display:flex;justify-content:space-between;align-items:center;">
      <span class="mono" style="font-size:12px;color:#444458;">{{ fw.control_count }} controls</span>
      <button hx-get="/dashboard/api/compliance/report/{{ fw.framework_id }}" hx-target="#compliance-report" hx-swap="innerHTML" class="btn-outline" style="padding:4px 10px;font-size:11px;">Generate Report</button>
    </div>
  </div>
  {% endfor %}
</div>

<div id="compliance-report">
  <div class="card" style="padding:24px;text-align:center;color:#444458;">Select a framework above to generate a compliance report</div>
</div>
{% endblock %}