{% extends "base.html" %}
{% block title %}QDC Runbooks — ICDEV™{% endblock %}
{% block content %}
<div class="cui-banner" style="background:#1a1a2e;border:1px solid #e94560;padding:4px 12px;font-size:11px;color:#e94560;text-align:center;margin-bottom:12px;">CUI // SP-CTI</div>
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
  <h2 style="margin:0;color:#eaeaea;">Quality Runbooks</h2>
  <a href="/quality/" class="btn btn-sm" style="background:#2196f3;color:#fff;padding:6px 14px;border-radius:4px;text-decoration:none;">← Back to QDC</a>
</div>
<div class="table-container" style="background:#16213e;border:1px solid #1e3a6e;border-radius:8px;overflow:hidden;">
  <table style="width:100%;border-collapse:collapse;font-size:13px;color:#eaeaea;">
    <thead><tr style="background:#0a1628;">
      <th style="padding:10px 12px;text-align:left;color:#7a8cb0;font-size:11px;text-transform:uppercase;">Name</th>
      <th style="padding:10px 12px;text-align:center;">Trigger Gate</th>
      <th style="padding:10px 12px;text-align:center;">Auto</th>
      <th style="padding:10px 12px;text-align:center;">Confidence</th>
      <th style="padding:10px 12px;text-align:center;">Runs</th>
      <th style="padding:10px 12px;text-align:left;">Last Run</th>
      <th style="padding:10px 12px;text-align:center;">Action</th>
    </tr></thead>
    <tbody>
      {% for r in runbooks %}
      <tr style="border-top:1px solid #1e3a6e;">
        <td style="padding:8px 12px;font-weight:600;">{{ r.name }}</td>
        <td style="padding:8px 12px;text-align:center;">
          {% if r.trigger_gate %}<span style="background:#0f3460;color:#2196f3;padding:2px 8px;border-radius:3px;font-size:10px;">{{ r.trigger_gate }}</span>{% else %}<span style="color:#5a6e8c;">manual</span>{% endif %}
        </td>
        <td style="padding:8px 12px;text-align:center;">
          {% if r.auto_executable %}<span style="color:#27ae60;">✓</span>{% else %}<span style="color:#5a6e8c;">—</span>{% endif %}
        </td>
        <td style="padding:8px 12px;text-align:center;color:#7a8cb0;">{{ r.confidence_threshold }}</td>
        <td style="padding:8px 12px;text-align:center;color:#7a8cb0;">{{ r.run_count }}</td>
        <td style="padding:8px 12px;color:#7a8cb0;">{{ r.last_run[:16] if r.last_run else 'Never' }}</td>
        <td style="padding:8px 12px;text-align:center;">
          <button onclick="executeRunbook('{{ r.id }}')" style="background:#2196f3;color:#fff;border:none;padding:4px 10px;border-radius:4px;font-size:11px;cursor:pointer;">Execute</button>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
<div id="runbook-output" style="display:none;margin-top:16px;background:#0a1628;border:1px solid #1e3a6e;border-radius:8px;padding:16px;">
  <h3 style="margin:0 0 8px;color:#eaeaea;font-size:14px;">Runbook Output</h3>
  <pre id="runbook-result" style="color:#7a8cb0;font-size:12px;white-space:pre-wrap;"></pre>
</div>
<script>
function executeRunbook(id){
  fetch('/quality/api/runbooks/'+id+'/execute',{method:'POST'})
    .then(r=>r.json()).then(d=>{
      document.getElementById('runbook-output').style.display='block';
      document.getElementById('runbook-result').textContent=JSON.stringify(d,null,2);
    }).catch(e=>alert('Runbook failed: '+e));
}
</script>
{% endblock %}