{% extends "base.html" %}
{% block title %}Response — psyc{% endblock %}
{% block content %}

{% if fired %}
<div class="disco" id="disco">
  <div class="disco-strobe"></div>
  <div class="disco-core">
    <div class="disco-bolt">⚡</div>
    <div class="disco-headline">ENFORCED</div>
    <div class="disco-sub">action #{{ fired }} · {{ fired_kind }} pushed to the perimeter</div>
    <div class="disco-iocs">
      {% for i in range(8) %}<span class="ioc-fly" style="--d: {{ i * 0.08 }}s; --x: {{ (i - 4) * 60 }}px;">⛔</span>{% endfor %}
    </div>
  </div>
</div>
<script>
  setTimeout(function () {
    var d = document.getElementById('disco');
    if (d) { d.classList.add('disco-out'); setTimeout(function(){ d.remove(); }, 700); }
  }, 2600);
</script>
{% endif %}

<section class="panel">
  <div class="panel-head">
    <h1>Response Actions</h1>
    <span class="count">{{ counts.proposed }} proposed · {{ counts.executed }} enforced · {{ counts.rejected }} declined{% if counts.failed %} · {{ counts.failed }} failed{% endif %}</span>
  </div>
  <p class="page-intro">When a high-severity case lands, psyc proposes what to <em>do</em> about it — alert the SOC, push its IOCs to the perimeter firewall + DNS. Nothing fires on its own: you approve, psyc enforces, the ledger records it. Detection that acts, with a human on the trigger.</p>
  <details class="page-help">
    <summary>how to use this view</summary>
    <div class="help-body">
      <p><b>How to use.</b> Each proposed action is one defensive move. Hit <b>⚡ Enforce</b> to fire it (and enjoy the disco), or Decline to drop it. Both decisions are logged to the immutable ledger.</p>
      <p><b>What you're seeing.</b> Actions generated by Respondline for HIGH/CRITICAL cases. The frozen payload is exactly what gets pushed to the enforcement sink on approval.</p>
      <p><b>Why it matters.</b> Closing the loop — intel → decision → enforcement → audit — is what separates a threat <em>viewer</em> from a threat <em>response</em> platform. The human gate keeps automation safe.</p>
    </div>
  </details>

  <div class="queue-tabs">
    <a class="queue-tab{% if current_status == 'proposed' %} is-active{% endif %}" href="/response?status=proposed">proposed ({{ counts.proposed }})</a>
    <a class="queue-tab{% if current_status == 'executed' %} is-active{% endif %}" href="/response?status=executed">enforced ({{ counts.executed }})</a>
    <a class="queue-tab{% if current_status == 'rejected' %} is-active{% endif %}" href="/response?status=rejected">declined ({{ counts.rejected }})</a>
    <a class="queue-tab{% if current_status == 'all' %} is-active{% endif %}" href="/response?status=all">all</a>
  </div>

  {% if not actions %}
    <p class="empty">No actions here. Propose some with <code>psyc respond &lt;case_id&gt;</code> on a HIGH/CRITICAL case, or run <code>psyc demo</code>.</p>
  {% else %}
  <table class="ledger">
    <thead>
      <tr><th>#</th><th>Type</th><th>Case</th><th>Sev</th><th>What it does</th><th>Status</th><th>Action</th></tr>
    </thead>
    <tbody>
    {% for a in actions %}
      <tr class="ledger-row sev-{{ a.severity or 'none' }}{% if a.status.value == 'rejected' %} is-rejected{% elif a.status.value == 'executed' %} is-actioned{% endif %}">
        <td>#{{ a.id }}</td>
        <td><span class="act-type act-{{ a.action_type.value }}">{{ a.action_type.value }}</span></td>
        <td class="lg-case"><a href="/cases/{{ a.case_id }}">{{ a.case_id }}</a></td>
        <td><span class="sev-badge">{{ a.severity or '—' }}</span></td>
        <td>{{ a.summary }}</td>
        <td><span class="outcome-badge outcome-{{ 'actioned' if a.status.value == 'executed' else ('rejected' if a.status.value == 'rejected' else ('failed' if a.status.value == 'failed' else 'pending_approval')) }}">{{ a.status.value }}</span></td>
        <td>
          {% if a.status.value == 'proposed' %}
            <form method="post" action="/response/approve/{{ a.id }}" class="queue-action">
              <button type="submit" class="btn btn-enforce">⚡ Enforce</button>
            </form>
            <form method="post" action="/response/reject/{{ a.id }}" class="queue-action">
              <button type="submit" class="btn btn-reject">decline</button>
            </form>
          {% else %}
            <span class="lg-sub">{{ a.approver or '—' }}</span>
          {% endif %}
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
  {% endif %}
</section>
{% endblock %}