{% extends "base.html" %}
{% block title %}STIG Compliance — GovLift{% endblock %}
{% block extra_css %}
<style>
.gl-page-header{background:linear-gradient(135deg,#0f172a,#1a3a2a);padding:22px 28px;border-radius:10px;margin-bottom:24px;}
.gl-page-header h1{margin:0;font-size:1.4rem;font-weight:700;color:#d1fae5;}
.gl-page-header p{margin:4px 0 0;color:#6ee7b7;font-size:.85rem;}
.classification-banner{background:#1e3a1a;border:1px solid #166534;color:#86efac;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-align:center;padding:6px 12px;border-radius:6px;margin-bottom:18px;}
.stat-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:18px 22px;text-align:center;}
.stat-card .val{font-size:1.8rem;font-weight:700;color:#d1fae5;}
.stat-card .lbl{font-size:.75rem;color:#64748b;margin-top:2px;}
.filter-bar{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:14px 18px;margin-bottom:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;}
.filter-bar label{font-size:.75rem;color:#94a3b8;display:block;margin-bottom:4px;}
.filter-bar select{background:#0f172a;border:1px solid #334155;color:#e2e8f0;border-radius:6px;padding:5px 10px;font-size:.8rem;}
.filter-bar select:focus{outline:none;border-color:#10b981;}
.filter-btn{background:#10b981;border:none;color:#fff;border-radius:6px;padding:6px 16px;font-size:.8rem;font-weight:600;cursor:pointer;}
.filter-btn:hover{background:#059669;}
.back-link{color:#6ee7b7;text-decoration:none;font-size:.85rem;}
.back-link:hover{color:#34d399;}
.gl-table{width:100%;border-collapse:collapse;}
.gl-table thead th{background:#0f172a;color:#94a3b8;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;border-bottom:1px solid #334155;}
.gl-table tbody tr{border-bottom:1px solid #1e293b;cursor:pointer;}
.gl-table tbody tr:hover{background:#1a2540;}
.gl-table tbody td{padding:10px 12px;font-size:.83rem;color:#e2e8f0;vertical-align:middle;}
.gl-table-wrap{background:#1e293b;border:1px solid #334155;border-radius:10px;overflow:hidden;}
.stig-cat1{color:#f87171;font-weight:700;}
.stig-cat2{color:#fbbf24;font-weight:600;}
.stig-cat3{color:#94a3b8;}
.cat1-row{background:rgba(248,113,113,.05);}
.cat1-row:hover{background:rgba(248,113,113,.1) !important;}
.remediation-cell{font-size:.75rem;color:#94a3b8;max-width:220px;}
.finding-cell{font-size:.78rem;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stig-score-bar{background:#0f172a;border-radius:6px;height:12px;overflow:hidden;margin-top:8px;}
.stig-score-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#10b981,#34d399);}
.open-cat1-alert{background:#2a0f0f;border:1px solid #7f1d1d;border-radius:8px;padding:12px 16px;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
</style>
{% endblock %}
{% block content %}
<div class="classification-banner">{{ classification }}</div>
<a class="back-link" href="/govlift">← GovLift</a>

<div class="gl-page-header mt-2">
  <h1>STIG Compliance Checker</h1>
  <p>DoD STIG Findings · CAT I · CAT II · CAT III — {{ classification }}</p>
</div>

<!-- CAT1 Alert Banner -->
{% if data.summary.get('open_cat1', 0) > 0 %}
<div class="open-cat1-alert">
  <span style="font-size:1.2rem;">⛔</span>
  <div>
    <div style="color:#fca5a5;font-weight:700;font-size:.9rem;">{{ data.summary.open_cat1 }} Open CAT I Finding{{ 's' if data.summary.open_cat1 != 1 else '' }}</div>
    <div style="color:#f87171;font-size:.8rem;">CAT I findings represent critical vulnerabilities requiring immediate remediation before migration approval.</div>
  </div>
</div>
{% endif %}

<!-- Stats -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-2">
    <div class="stat-card">
      <div class="val">{{ data.summary.get('total', 0) }}</div>
      <div class="lbl">Total Checks</div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="stat-card">
      <div class="val" style="color:#f87171;">{{ data.summary.get('open_cat1', 0) }}</div>
      <div class="lbl">Open CAT I</div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="stat-card">
      <div class="val" style="color:#fbbf24;">{{ data.summary.get('open_cat2', 0) }}</div>
      <div class="lbl">Open CAT II</div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="stat-card">
      <div class="val" style="color:#94a3b8;">{{ data.summary.get('open_cat3', 0) }}</div>
      <div class="lbl">Open CAT III</div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="stat-card">
      <div class="val" style="color:#34d399;">{{ data.summary.get('not_a_finding', 0) }}</div>
      <div class="lbl">Not a Finding</div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="stat-card">
      <div class="val" style="color:#64748b;">{{ data.summary.get('not_reviewed', 0) }}</div>
      <div class="lbl">Not Reviewed</div>
    </div>
  </div>
</div>

<!-- Compliance Score -->
{% set total = data.summary.get('total', 0) %}
{% set naf = data.summary.get('not_a_finding', 0) %}
{% set na = data.summary.get('not_applicable', 0) %}
{% set score = (((naf + na) / total * 100)|round(1)|int) if total > 0 else 0 %}
<div style="background:#1e293b;border:1px solid #334155;border-radius:10px;padding:16px 20px;margin-bottom:18px;">
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <div>
      <div style="font-size:.8rem;color:#94a3b8;margin-bottom:2px;">STIG Compliance Score</div>
      <div style="font-size:1.6rem;font-weight:700;color:{{ '#34d399' if score >= 80 else ('#fbbf24' if score >= 50 else '#f87171') }};">{{ score }}%</div>
    </div>
    <div style="text-align:right;font-size:.78rem;color:#64748b;">
      <div>Not Applicable: {{ data.summary.get('not_applicable', 0) }}</div>
    </div>
  </div>
  <div class="stig-score-bar">
    <div class="stig-score-fill" style="width:{{ score }}%;background:{{ 'linear-gradient(90deg,#10b981,#34d399)' if score >= 80 else ('linear-gradient(90deg,#d97706,#fbbf24)' if score >= 50 else 'linear-gradient(90deg,#b91c1c,#f87171)') }};"></div>
  </div>
</div>

<!-- Filter Bar -->
<div class="filter-bar">
  <div>
    <label for="f-severity">Severity</label>
    <select id="f-severity">
      <option value="">All Severities</option>
      <option value="CAT1">CAT I (Critical)</option>
      <option value="CAT2">CAT II (High)</option>
      <option value="CAT3">CAT III (Medium)</option>
    </select>
  </div>
  <div>
    <label for="f-stig-status">Status</label>
    <select id="f-stig-status">
      <option value="">All Statuses</option>
      <option value="open">Open</option>
      <option value="not_a_finding">Not a Finding</option>
      <option value="not_applicable">Not Applicable</option>
      <option value="not_reviewed">Not Reviewed</option>
    </select>
  </div>
  <div>
    <label for="f-benchmark">Benchmark</label>
    <select id="f-benchmark">
      <option value="">All Benchmarks</option>
      <option value="RHEL">RHEL STIG</option>
      <option value="Windows">Windows STIG</option>
      <option value="Network">Network STIG</option>
      <option value="Container">Container STIG</option>
    </select>
  </div>
  <div>
    <button class="filter-btn" onclick="applyStigFilters()">Apply</button>
  </div>
</div>

<!-- STIG Table -->
<div class="gl-table-wrap">
  <table class="gl-table">
    <thead>
      <tr>
        <th>Check ID</th>
        <th>Workload ID</th>
        <th>Benchmark</th>
        <th>Check Name</th>
        <th>Severity</th>
        <th>Status</th>
        <th>Finding</th>
        <th>Remediation</th>
        <th>Checked At</th>
      </tr>
    </thead>
    <tbody id="stig-tbody">
      {% if data.checks %}
        {% for chk in data.checks %}
        {% set is_cat1 = chk.get('severity', '') in ['CAT1', 'CAT I', 'I'] %}
        {% set is_cat2 = chk.get('severity', '') in ['CAT2', 'CAT II', 'II'] %}
        <tr class="{{ 'cat1-row' if is_cat1 else '' }}" onclick="window.location='/govlift/stig/{{ chk.id }}'">
          <td style="font-family:monospace;font-size:.75rem;{% if is_cat1 %}color:#f87171;{% elif is_cat2 %}color:#fbbf24;{% else %}color:#94a3b8;{% endif %}">{{ chk.get('check_id', '') }}</td>
          <td style="font-size:.75rem;color:#64748b;">{{ chk.get('workload_id', '—') }}</td>
          <td style="font-size:.78rem;">{{ chk.get('stig_benchmark', '—') }}</td>
          <td style="font-size:.82rem;max-width:200px;">{{ chk.get('check_name', '') }}</td>
          <td>
            {% set sev = chk.get('severity', '') %}
            {% if sev in ['CAT1', 'CAT I', 'I'] %}
              <span class="stig-cat1">CAT I</span>
            {% elif sev in ['CAT2', 'CAT II', 'II'] %}
              <span class="stig-cat2">CAT II</span>
            {% else %}
              <span class="stig-cat3">CAT III</span>
            {% endif %}
          </td>
          <td>
            {% set ss = chk.get('status', 'not_reviewed') %}
            {% if ss == 'not_a_finding' %}
              <span class="badge bg-info">Not a Finding</span>
            {% elif ss == 'not_applicable' %}
              <span class="badge bg-secondary">N/A</span>
            {% elif ss == 'not_reviewed' %}
              <span class="badge bg-secondary">Not Reviewed</span>
            {% else %}
              <span class="badge bg-danger">Open</span>
            {% endif %}
          </td>
          <td class="finding-cell" title="{{ chk.get('finding', '') }}">{{ chk.get('finding', '—') }}</td>
          <td class="remediation-cell">{{ chk.get('remediation', '—') }}</td>
          <td style="font-size:.75rem;color:#64748b;">{{ chk.get('checked_at', '—') }}</td>
        </tr>
        {% endfor %}
      {% else %}
        <tr><td colspan="9" style="text-align:center;padding:32px;color:#64748b;">No STIG checks found.</td></tr>
      {% endif %}
    </tbody>
  </table>
</div>

{% include "includes/iqe_query_widget.html" %}

<script>
function applyStigFilters() {
  const severity = document.getElementById('f-severity').value;
  const status = document.getElementById('f-stig-status').value;
  const benchmark = document.getElementById('f-benchmark').value;
  const params = new URLSearchParams();
  if (severity) params.set('severity', severity);
  if (status) params.set('status', status);
  if (benchmark) params.set('stig_benchmark', benchmark);
  fetch('/api/govlift/stig?' + params.toString())
    .then(r => r.json())
    .then(data => {
      const checks = data.checks || data || [];
      const tbody = document.getElementById('stig-tbody');
      tbody.innerHTML = checks.length ? checks.map(chk => {
        const isCat1 = ['CAT1','CAT I','I'].includes(chk.severity||'');
        const isCat2 = ['CAT2','CAT II','II'].includes(chk.severity||'');
        const sevHtml = isCat1 ? '<span class="stig-cat1">CAT I</span>' : (isCat2 ? '<span class="stig-cat2">CAT II</span>' : '<span class="stig-cat3">CAT III</span>');
        const statusMap = {not_a_finding:'<span class="badge bg-info">Not a Finding</span>',not_applicable:'<span class="badge bg-secondary">N/A</span>',not_reviewed:'<span class="badge bg-secondary">Not Reviewed</span>'};
        const statusHtml = statusMap[chk.status] || '<span class="badge bg-danger">Open</span>';
        return `<tr class="${isCat1?'cat1-row':''}" onclick="window.location='/govlift/stig/${chk.id}'">
          <td style="font-family:monospace;font-size:.75rem;${isCat1?'color:#f87171;':isCat2?'color:#fbbf24;':'color:#94a3b8;'}">${chk.check_id||''}</td>
          <td style="font-size:.75rem;color:#64748b;">${chk.workload_id||'—'}</td>
          <td style="font-size:.78rem;">${chk.stig_benchmark||'—'}</td>
          <td style="font-size:.82rem;max-width:200px;">${chk.check_name||''}</td>
          <td>${sevHtml}</td>
          <td>${statusHtml}</td>
          <td class="finding-cell" title="${(chk.finding||'').replace(/"/g,'&quot;')}">${chk.finding||'—'}</td>
          <td class="remediation-cell">${chk.remediation||'—'}</td>
          <td style="font-size:.75rem;color:#64748b;">${chk.checked_at||'—'}</td>
        </tr>`;
      }).join('') : '<tr><td colspan="9" style="text-align:center;padding:32px;color:#64748b;">No STIG checks match the selected filters.</td></tr>';
    })
    .catch(e => console.error('Filter error:', e));
}
</script>
{% endblock %}