{% extends "base.html" %}
{% block title %}Web Protection · SD RMM{% endblock %}
{% block content %}
<style>
  .wp-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:6px; }
  .wp-note { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
             border-radius:var(--r-md); padding:11px 14px; margin:12px 0 16px; font-size:12.5px; color:var(--ink-2); line-height:1.55; }
  .wp-note b { color:var(--ink); }
  .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); }
  .kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
  @media (max-width:760px){ .kpis { grid-template-columns:repeat(2,1fr); } }
  .kpi { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; }
  .kpi .v { font:700 22px/1 var(--font-sans); font-variant-numeric:tabular-nums; }
  .kpi .k { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; margin-top:6px; }
  .kpi.allow .v { color:var(--warn); }
  .chips { display:flex; gap:8px; flex-wrap:wrap; }
  .chip { background:var(--surface-3); border:1px solid var(--line); border-radius:999px; padding:3px 11px; font-size:12px; color:var(--ink-2); }
  .chip b { font-variant-numeric:tabular-nums; color:var(--ink); }
  .wp-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:2px 0 12px; }
  .wp-search { display:flex; gap:8px; align-items:center; flex:1 1 260px; }
  .wp-search input[type="search"], .wp-add input[type="text"] {
     background:var(--surface-2); border:1px solid var(--line); border-radius:8px; color:var(--ink);
     padding:8px 11px; font:13px var(--font-sans); min-width:0; }
  .wp-search input[type="search"] { flex:1 1 auto; }
  .wp-search input:focus, .wp-add input:focus { outline:none; border-color:var(--accent); }
  .wp-add { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .wp-add input[type="text"] { flex:1 1 240px; font-family:var(--font-mono); }
  table.wp { width:100%; border-collapse:collapse; font-size:12.5px; }
  table.wp th { text-align:left; color:var(--muted); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; padding:8px; border-bottom:1px solid var(--line); }
  table.wp td { padding:8px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
  table.wp td.dom { font-family:var(--font-mono); font-size:12.5px; color:var(--ink); word-break:break-all; }
  table.wp tbody tr:hover { background:rgba(255,255,255,.02); }
  .tag { display:inline-block; border-radius:999px; padding:2px 9px; font:700 10px/1.5 var(--font-sans); text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
  .tag.block  { background:rgba(74,222,128,.15); color:var(--ok); }
  .tag.allow  { background:rgba(251,191,36,.16); color:var(--warn); }
  .tag.off    { background:var(--surface-3); color:var(--muted); }
  .tag.pin    { background:var(--accent-soft); color:var(--accent); }
  .rowacts { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
  .rowacts form { display:inline; }
  .lnk { background:none; border:1px solid var(--line); color:var(--ink-2); border-radius:7px; padding:4px 9px; font:600 11.5px/1 var(--font-sans); cursor:pointer; }
  .lnk:hover { background:var(--surface-2); color:var(--ink); }
  .lnk.on { border-color:var(--accent); color:var(--accent); }
  .src { color:var(--muted); font-family:var(--font-mono); font-size:11px; }
  .when { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; font-size:11.5px; }
  .pager { display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:12px; font-size:12.5px; color:var(--muted); }
  .saved { color:var(--ok); font-size:12px; } .warned { color:var(--bad); font-size:12px; }
  .empty { color:var(--muted); padding:24px 8px; text-align:center; }
  /* explain modal */
  .wp-modal { position:fixed; inset:0; background:rgba(4,7,11,.62); display:flex; align-items:center; justify-content:center; z-index:80; padding:18px; }
  .wp-modal[hidden] { display:none; }
  .wp-modal .box { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 18px 48px rgba(0,0,0,.5); width:min(620px,100%); max-height:82vh; display:flex; flex-direction:column; }
  .wp-modal .top { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); }
  .wp-modal .top h3 { margin:0; font:700 13px/1.3 var(--font-mono); color:var(--ink); word-break:break-all; }
  .wp-modal .bd { padding:16px; overflow:auto; white-space:pre-wrap; font-size:13px; line-height:1.6; color:var(--ink-2); }
  .wp-modal .x { background:none; border:0; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; }
</style>

<div class="wp-head">
  <div>
    <h1 class="page-title" style="margin-bottom:2px;">Web Protection</h1>
    <p class="muted" style="margin:0;">The lifetime malicious-domain blocklist served to endpoints at
      <span class="src">POST /v1/blocklist</span>.
      {% if saved == 'block' %}<span class="saved">domain blocked &check;</span>{% endif %}
      {% if saved == 'allow' %}<span class="saved">allowlist updated &check;</span>{% endif %}
      {% if saved == 'pin' %}<span class="saved">pin updated &check;</span>{% endif %}
      {% if err == 'invalid' %}<span class="warned">not a valid domain &mdash; ignored</span>{% endif %}</p>
  </div>
  <a class="btn btn-ghost" href="/tools/urlscan">Web lookup &rsaquo;</a>
</div>

<div class="wp-note">
  <b>What this blocks:</b> whole <b>domains</b> (DNS names), sinkholed in the endpoint hosts file so the machine can't reach them.
  It is <b>not</b> URL-path filtering (it can't allow one page of a domain and block another) and it is <b>not</b> anti-virus.
  Domains accumulate for their lifetime once seen in a feed, so a site stays blocked even after the feed drops it &mdash; that is what
  &ldquo;lifetime&rdquo; means. Allowlisting a domain removes it from what agents receive on their next pull (a few minutes), not instantly.
</div>

<div class="kpis">
  <div class="kpi"><div class="v">{{ "{:,}".format(stats.active) }}</div><div class="k">Blocking (served)</div></div>
  <div class="kpi"><div class="v">{{ "{:,}".format(stats.total) }}</div><div class="k">Retained total</div></div>
  <div class="kpi"><div class="v">{{ "{:,}".format(stats.pinned) }}</div><div class="k">Pinned</div></div>
  <div class="kpi allow"><div class="v">{{ "{:,}".format(stats.allowlisted) }}</div><div class="k">Allowlisted</div></div>
</div>

{% if stats.top_sources %}
<div class="card">
  <h2>Active domains by feed</h2>
  <div class="chips">
    {% for name, n in stats.top_sources %}<span class="chip">{{ name }} <b>{{ "{:,}".format(n) }}</b></span>{% endfor %}
  </div>
</div>
{% endif %}

{% if is_admin %}
<div class="card">
  <h2>Add a manual block</h2>
  <form class="wp-add" method="post" action="/security/web/block">
    <input type="text" name="domain" placeholder="bad-domain.example" autocomplete="off" spellcheck="false" required>
    <button class="btn btn-primary" type="submit">Block domain</button>
    <span class="muted" style="font-size:12px;">Added as pinned + active (source &ldquo;manual&rdquo;). A full URL is reduced to its host; IPs and shared/CDN hosts are refused.</span>
  </form>
</div>
{% endif %}

<div class="card">
  <div class="wp-toolbar">
    <form class="wp-search" method="get" action="/security/web">
      <input type="search" name="q" value="{{ q|e }}" placeholder="Search domains&hellip;" autocomplete="off" spellcheck="false">
      <button class="btn btn-ghost" type="submit">Search</button>
      {% if q %}<a class="btn btn-ghost" href="/security/web">Clear</a>{% endif %}
    </form>
    <div style="margin-left:auto; display:flex; align-items:center; gap:8px;">
      <label class="muted" style="font-size:11.5px;" for="wp-prov">Explain via</label>
      <select id="wp-prov" style="background:var(--surface-2); border:1px solid var(--line); color:var(--ink); border-radius:7px; padding:5px 8px; font:12px var(--font-sans);">
        {% for p in ai_providers %}<option value="{{ p }}">{{ p }}</option>{% endfor %}
      </select>
    </div>
  </div>

  {% if rows %}
  <table class="wp">
    <thead>
      <tr>
        <th>Domain</th><th>Feeds</th><th>First seen</th><th>Last seen</th><th>State</th><th style="text-align:right;">Actions</th>
      </tr>
    </thead>
    <tbody>
    {% for r in rows %}
      <tr>
        <td class="dom">{{ r.domain|e }}</td>
        <td class="src">{{ (r.sources or '&mdash;')|e }}</td>
        <td class="when">{% if r.first_seen %}{{ r.first_seen| pt('%Y-%m-%d') }}{% else %}&mdash;{% endif %}</td>
        <td class="when">{% if r.last_seen %}{{ r.last_seen| pt('%Y-%m-%d') }}{% else %}&mdash;{% endif %}</td>
        <td>
          {% if r.allowlisted %}<span class="tag allow">allowlisted</span>
          {% elif r.active %}<span class="tag block">blocking</span>
          {% else %}<span class="tag off">inactive</span>{% endif %}
          {% if r.pinned %} <span class="tag pin">pinned</span>{% endif %}
        </td>
        <td>
          <div class="rowacts">
            <button type="button" class="lnk" data-explain="{{ r.domain|e }}">Explain</button>
            {% if is_admin %}
              <form method="post" action="/security/web/pin">
                <input type="hidden" name="domain" value="{{ r.domain|e }}">
                <input type="hidden" name="on" value="{{ 0 if r.pinned else 1 }}">
                <button type="submit" class="lnk{% if r.pinned %} on{% endif %}">{{ 'Unpin' if r.pinned else 'Pin' }}</button>
              </form>
              <form method="post" action="/security/web/allow">
                <input type="hidden" name="domain" value="{{ r.domain|e }}">
                <input type="hidden" name="on" value="{{ 0 if r.allowlisted else 1 }}">
                <button type="submit" class="lnk{% if r.allowlisted %} on{% endif %}">{{ 'Un-allow' if r.allowlisted else 'Allow' }}</button>
              </form>
            {% endif %}
          </div>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>

  <div class="pager">
    <span>{{ "{:,}".format(total) }} match{{ '' if total == 1 else 'es' }} &middot; page {{ page }} of {{ pages }}</span>
    {% if page > 1 %}<a class="btn btn-ghost" href="/security/web?q={{ q|urlencode }}&amp;page={{ page - 1 }}">&lsaquo; Prev</a>{% endif %}
    {% if page < pages %}<a class="btn btn-ghost" href="/security/web?q={{ q|urlencode }}&amp;page={{ page + 1 }}">Next &rsaquo;</a>{% endif %}
  </div>
  {% else %}
  <div class="empty">{% if q %}No retained domains match &ldquo;{{ q|e }}&rdquo;.{% else %}No domains retained yet. The blocklist fills from the threat-intel feeds on the 6-hour refresh.{% endif %}</div>
  {% endif %}
</div>

<div id="wp-modal" class="wp-modal" hidden>
  <div class="box">
    <div class="top">
      <h3 id="wp-modal-title">&mdash;</h3>
      <button type="button" class="x" data-close aria-label="Close">&times;</button>
    </div>
    <div class="bd" id="wp-modal-body">&hellip;</div>
  </div>
</div>

<script>
(function () {
  var modal = document.getElementById('wp-modal');
  var body  = document.getElementById('wp-modal-body');
  var title = document.getElementById('wp-modal-title');
  function prov() { var s = document.getElementById('wp-prov'); return s ? s.value : 'ollama'; }
  function openM(d) { title.textContent = d; body.textContent = 'Asking the model… (private Ollama by default)'; modal.hidden = false; }
  function closeM() { modal.hidden = true; }
  document.addEventListener('click', function (e) {
    var t = e.target;
    var b = t.closest ? t.closest('[data-explain]') : null;
    if (b) {
      e.preventDefault();
      var d = b.getAttribute('data-explain');
      openM(d);
      fetch('/security/web/explain?domain=' + encodeURIComponent(d) + '&provider=' + encodeURIComponent(prov()),
            { headers: { 'Accept': 'application/json' } })
        .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
        .then(function (res) {
          if (res.ok && res.j.explanation) {
            body.textContent = res.j.explanation + '\n\n— ' + (res.j.model || '') + ' via ' + (res.j.provider || '');
          } else {
            body.textContent = 'Could not explain: ' + (res.j && res.j.error ? res.j.error : 'unknown error');
          }
        })
        .catch(function () { body.textContent = 'Request failed.'; });
      return;
    }
    if (t.closest && t.closest('[data-close]')) { closeM(); return; }
    if (t === modal) { closeM(); }
  });
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeM(); });
})();
</script>
{% endblock %}