{% extends "base.html" %}
{% block title %}Auto-Response · SD RMM{% endblock %}
{% block content %}
{% include "_security_nav.html" %}

<style>
  .ar-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-1); margin-bottom:14px; }
  .card h2 { font-size:12px; font-weight:700; margin:0 0 12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
  .addform { display:grid; grid-template-columns:1.6fr 1fr 1.4fr 1.4fr auto auto; gap:8px; align-items:end; }
  @media (max-width:900px){ .addform { grid-template-columns:1fr 1fr; } }
  .addform label { font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:700; display:block; margin-bottom:4px; }
  .addform input, .addform select { width:100%; background:var(--surface-2); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:8px 10px; font:inherit; }
  table.ar { width:100%; border-collapse:collapse; font-size:13px; }
  table.ar th { text-align:left; color:var(--muted); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; padding:7px 8px; border-bottom:1px solid var(--line); }
  table.ar td { padding:8px; border-bottom:1px solid var(--line-soft); }
  .pill { display:inline-block; padding:1px 8px; border-radius:999px; font:700 10.5px/1.6 var(--font-sans); }
  .pill.crit { background:rgba(249,115,115,.16); color:#fca5a5; } .pill.warn { background:rgba(251,191,36,.16); color:#fbbf24; }
  .pill.act { background:var(--surface-3); border:1px solid var(--line); color:var(--ink-2); }
  .st { font:700 11px/1.5 var(--font-sans); } .st.on { color:var(--ok); } .st.off { color:var(--muted-2); }
  .banner.ok { background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.3); color:var(--ok); padding:9px 12px; border-radius:var(--r-md); font-size:12.5px; margin-bottom:12px; }
  .muted { color:var(--muted); }
</style>

<div class="ar-head">
  <div><h1 class="page-title" style="margin-bottom:2px;">Automated Response</h1>
    <p class="muted" style="margin:0;">When a detection fires, automatically take an action. Destructive actions (isolate) wait for approval unless you mark <em>auto-approve</em>.</p></div>
</div>

{% if saved %}<div class="banner ok">Saved.</div>{% endif %}

<div class="card">
  <h2>Add a rule</h2>
  <form class="addform" method="post" action="/security/autoresponse/add">
    <div><label>Name</label><input type="text" name="name" placeholder="Auto-isolate on critical" required></div>
    <div><label>When severity ≥</label><select name="min_severity"><option value="crit">Critical</option><option value="warn">Warning</option></select></div>
    <div><label>Rule contains (optional)</label><input type="text" name="match_rule" placeholder="e.g. ransomware / ioc_ / blank=any"></div>
    <div><label>Action</label><select name="action">{% for k, v in actions.items() %}<option value="{{ k }}">{{ v }}</option>{% endfor %}</select></div>
    <div><label>Auto-approve</label><input type="checkbox" name="auto_approve" style="width:auto;"></div>
    <div><button class="btn btn-primary" type="submit">Add</button></div>
  </form>
  <p class="muted" style="font-size:12px; margin:10px 0 0;"><strong>Collect triage</strong> &amp; <strong>Notify</strong> run automatically (safe). <strong>Isolate host</strong> is destructive &mdash; without auto-approve it queues for a super-admin to confirm on the device's Security tab.</p>
</div>

<div class="card">
  <h2>Rules ({{ rules|length }})</h2>
  {% if rules %}
  <table class="ar">
    <thead><tr><th>Name</th><th>Trigger</th><th>Match</th><th>Action</th><th>Approval</th><th>Status</th><th></th></tr></thead>
    <tbody>
      {% for r in rules %}
      <tr>
        <td><strong>{{ r.name }}</strong></td>
        <td><span class="pill {{ r.min_severity }}">≥ {{ r.min_severity }}</span></td>
        <td class="mono muted">{{ r.match_rule or 'any rule' }}</td>
        <td><span class="pill act">{{ actions.get(r.action, r.action) }}</span></td>
        <td class="muted">{{ 'auto-approve' if r.auto_approve else ('approval req.' if r.action=='isolate_host' else 'n/a') }}</td>
        <td><span class="st {{ 'on' if r.enabled else 'off' }}">{{ 'ENABLED' if r.enabled else 'disabled' }}</span></td>
        <td style="white-space:nowrap;">
          <form method="post" action="/security/autoresponse/{{ r.id }}/toggle" style="display:inline;"><button class="btn btn-ghost" type="submit">{{ 'Disable' if r.enabled else 'Enable' }}</button></form>
          <form method="post" action="/security/autoresponse/{{ r.id }}/delete" style="display:inline;"><button class="btn btn-ghost" type="submit">Remove</button></form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}<p class="muted">No auto-response rules yet. Add one above &mdash; e.g. "Collect triage on any critical detection" for instant forensic capture.</p>{% endif %}
</div>

{% endblock %}