{% extends "base.html" %}
{% block title %}Execute Runbook — 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/runbooks" style="color:#6ee7b7;text-decoration:none;font-size:.85rem;">← Runbooks</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;">Execute: {{ data.runbook.name or 'Runbook' }}</h1>
  <p style="margin:4px 0 0;color:#fbbf24;font-size:.83rem;">Step-through execution with audit logging</p>
</div>
<div style="background:#1e293b;border:1px solid #334155;border-radius:10px;padding:20px;margin-bottom:20px;">
  <div style="margin-bottom:16px;">
    <label style="color:#94a3b8;font-size:.78rem;display:block;margin-bottom:6px;">Workload ID (optional)</label>
    <input id="workload_id" type="text" placeholder="wl-..." style="background:#0f172a;border:1px solid #334155;color:#e2e8f0;border-radius:6px;padding:7px 12px;font-size:.83rem;width:300px;">
  </div>
  <div style="margin-bottom:16px;">
    <label style="color:#94a3b8;font-size:.78rem;display:block;margin-bottom:6px;">Operator</label>
    <input id="operator" type="text" placeholder="your-username" style="background:#0f172a;border:1px solid #334155;color:#e2e8f0;border-radius:6px;padding:7px 12px;font-size:.83rem;width:300px;">
  </div>
</div>
<h3 style="color:#d1fae5;font-size:1rem;margin-bottom:12px;">Steps ({{ data.steps|length }})</h3>
{% for step in data.steps %}
<div id="step-{{ step.id }}" style="background:#1e293b;border:1px solid #334155;border-radius:8px;padding:14px 18px;margin-bottom:10px;">
  <div style="display:flex;justify-content:space-between;align-items:flex-start;">
    <div style="display:flex;gap:12px;align-items:flex-start;">
      <span style="background:#0f172a;border:1px solid #334155;border-radius:6px;padding:3px 10px;color:#94a3b8;font-size:.78rem;font-weight:700;">{{ step.step_order }}</span>
      <div>
        <div style="color:#e2e8f0;font-size:.88rem;font-weight:600;">{{ step.title }}{% if step.is_required %} <span style="color:#f87171;font-size:.7rem;">*required</span>{% endif %}</div>
        {% if step.description %}<div style="color:#94a3b8;font-size:.8rem;margin-top:4px;">{{ step.description }}</div>{% endif %}
      </div>
    </div>
    <span id="badge-{{ step.id }}" style="padding:2px 10px;border-radius:10px;font-size:.72rem;background:#1e293b;border:1px solid #334155;color:#94a3b8;">pending</span>
  </div>
</div>
{% endfor %}
{% if data.runbook.id %}
<button onclick="startExecution('{{ data.runbook.id }}')" style="background:#10b981;border:none;color:#fff;border-radius:6px;padding:10px 24px;font-size:.88rem;font-weight:600;cursor:pointer;margin-top:10px;">Start Execution</button>
{% endif %}
<div id="exec-log" style="margin-top:16px;"></div>
<script>
function startExecution(runbookId) {
  const op = document.getElementById('operator').value || 'operator';
  const wl = document.getElementById('workload_id').value || '';
  fetch('/api/govlift/runbooks/' + runbookId + '/execute', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({operator: op, workload_id: wl})
  }).then(r => r.json()).then(d => {
    document.getElementById('exec-log').innerHTML =
      '<div style="background:#1e293b;border:1px solid #10b981;border-radius:8px;padding:14px;color:#10b981;font-size:.83rem;">Execution started: ' + (d.id || JSON.stringify(d)) + '</div>';
  }).catch(e => {
    document.getElementById('exec-log').innerHTML =
      '<div style="background:#1e293b;border:1px solid #f87171;border-radius:8px;padding:14px;color:#f87171;font-size:.83rem;">Error: ' + e + '</div>';
  });
}
</script>
{% endblock %}