{% extends "base.html" %}
{% block title %}Runbooks — 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;">Migration Runbooks</h1>
  <p style="margin:4px 0 0;color:#6ee7b7;font-size:.83rem;">Standard Operating Procedures for DoD IL4 Cloud Migration</p>
</div>
<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;letter-spacing:.05em;">Name</th>
      <th style="padding:10px 14px;text-align:left;color:#94a3b8;font-size:.73rem;text-transform:uppercase;letter-spacing:.05em;">Category</th>
      <th style="padding:10px 14px;text-align:left;color:#94a3b8;font-size:.73rem;text-transform:uppercase;letter-spacing:.05em;">Status</th>
      <th style="padding:10px 14px;text-align:left;color:#94a3b8;font-size:.73rem;text-transform:uppercase;letter-spacing:.05em;">Target</th>
      <th style="padding:10px 14px;text-align:left;color:#94a3b8;font-size:.73rem;text-transform:uppercase;letter-spacing:.05em;">Actions</th>
    </tr></thead>
    <tbody>
    {% for rb in runbooks %}
    <tr style="border-bottom:1px solid #1e293b;">
      <td style="padding:10px 14px;color:#e2e8f0;font-size:.83rem;">{{ rb.name }}</td>
      <td style="padding:10px 14px;color:#94a3b8;font-size:.8rem;">{{ rb.category or 'general' }}</td>
      <td style="padding:10px 14px;font-size:.78rem;">
        <span style="padding:2px 8px;border-radius:10px;background:#1e293b;border:1px solid {% if rb.status=='active' %}#10b981{% elif rb.status=='draft' %}#60a5fa{% else %}#334155{% endif %};color:{% if rb.status=='active' %}#10b981{% elif rb.status=='draft' %}#60a5fa{% else %}#94a3b8{% endif %};">{{ rb.status }}</span>
      </td>
      <td style="padding:10px 14px;color:#94a3b8;font-size:.8rem;">{{ rb.target_workload_type or '—' }}</td>
      <td style="padding:10px 14px;">
        <a href="/govlift/runbooks/{{ rb.id }}" style="color:#6ee7b7;font-size:.78rem;text-decoration:none;margin-right:10px;">View</a>
        <a href="/govlift/runbooks/{{ rb.id }}/execute" style="color:#fbbf24;font-size:.78rem;text-decoration:none;">Execute</a>
      </td>
    </tr>
    {% else %}
    <tr><td colspan="5" style="padding:24px;text-align:center;color:#64748b;font-size:.83rem;">No runbooks found.</td></tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% include "includes/iqe_query_widget.html" %}
{% endblock %}