{% extends "base.html" %}
{% block title %}STIG {{ data.check.get('check_id', '') }} — 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;}
.back-link{color:#6ee7b7;text-decoration:none;font-size:.85rem;}
.back-link:hover{color:#34d399;}
.detail-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:20px 24px;margin-bottom:16px;}
.detail-card h5{font-size:.9rem;color:#94a3b8;margin-bottom:14px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.detail-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #1e293b;font-size:.85rem;}
.detail-row:last-child{border-bottom:none;}
.detail-row .label{color:#94a3b8;}
.detail-row .value{color:#e2e8f0;font-weight:600;}
.badge{font-size:.75rem;}
.finding-box{background:#2a0f0f;border:1px solid #7f1d1d;border-radius:8px;padding:14px 18px;color:#fca5a5;font-size:.85rem;}
.remediation-box{background:#0f2a1a;border:1px solid #166534;border-radius:8px;padding:14px 18px;color:#86efac;font-size:.85rem;}
</style>
{% endblock %}
{% block content %}
<div class="classification-banner">{{ classification }}</div>
<a class="back-link" href="/govlift/stig">&#8592; STIG Compliance</a>

<div class="gl-page-header mt-2">
  <h1>STIG Check Detail</h1>
  <p>Check ID: <span style="font-family:monospace;font-size:.85rem;">{{ data.check.get('check_id', '') }}</span></p>
</div>

<div class="row g-3">
  <div class="col-12 col-md-6">
    <div class="detail-card">
      <h5>Check Information</h5>
      <div class="detail-row"><span class="label">Check Name</span><span class="value">{{ data.check.get('check_name', '—') }}</span></div>
      <div class="detail-row"><span class="label">Benchmark</span><span class="value">{{ data.check.get('stig_benchmark', '—') }}</span></div>
      <div class="detail-row"><span class="label">Severity</span>
        <span class="value">
          {% set sev = data.check.get('severity', '') %}
          {% if sev in ['CAT1','CAT I','I'] %}<span style="color:#f87171;font-weight:700;">CAT I (Critical)</span>
          {% elif sev in ['CAT2','CAT II','II'] %}<span style="color:#fbbf24;font-weight:600;">CAT II (High)</span>
          {% else %}<span style="color:#94a3b8;">CAT III (Medium)</span>
          {% endif %}
        </span>
      </div>
      <div class="detail-row"><span class="label">Status</span>
        <span class="value">
          {% set ss = data.check.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 %}
        </span>
      </div>
      <div class="detail-row"><span class="label">Checked At</span><span class="value">{{ data.check.get('checked_at', '—') }}</span></div>
    </div>
  </div>
  <div class="col-12 col-md-6">
    <div class="detail-card">
      <h5>Workload</h5>
      <div class="detail-row"><span class="label">Workload ID</span>
        <span class="value">
          {% if data.workload %}
          <a href="/govlift/workloads/{{ data.workload.id }}" style="color:#6ee7b7;">{{ data.workload.get('name', data.check.get('workload_id', '—')) }}</a>
          {% else %}{{ data.check.get('workload_id', '—') }}{% endif %}
        </span>
      </div>
      <div class="detail-row"><span class="label">Workload Type</span><span class="value">{{ data.workload.get('workload_type', '—') if data.workload else '—' }}</span></div>
      <div class="detail-row"><span class="label">OS</span><span class="value">{{ data.workload.get('os_name', '') }} {{ data.workload.get('os_version', '') if data.workload else '—' }}</span></div>
    </div>
  </div>
</div>

{% if data.check.get('finding') %}
<div class="detail-card">
  <h5>Finding</h5>
  <div class="finding-box">{{ data.check.get('finding', '') }}</div>
</div>
{% endif %}

{% if data.check.get('remediation') %}
<div class="detail-card">
  <h5>Remediation</h5>
  <div class="remediation-box">{{ data.check.get('remediation', '') }}</div>
</div>
{% endif %}

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