{% extends "baseTemplate/index.html" %}
{% load static %}
{# ModSecurity: master switch, paranoia level, OWASP CRS packs, recent blocks. #}

{% block title %}ModSecurity{% endblock %}

{% block styles %}
<style>
  .cp-mono     { font-family:var(--cp-font-mono); font-size:.82rem; }
  .cp-block    { border:1px solid var(--cp-border); border-radius:var(--cp-radius);
                 padding:.7rem .9rem; margin-bottom:.6rem; background:var(--cp-bg-subtle); }
  .cp-block__id{ font-family:var(--cp-font-mono); font-weight:600; }
  .cp-matched  { font-family:var(--cp-font-mono); font-size:.76rem; word-break:break-all;
                 background:var(--cp-bg); border:1px solid var(--cp-border);
                 border-radius:var(--cp-radius); padding:.4rem .55rem; margin-top:.4rem; }
  .cp-pack     { display:flex; align-items:center; justify-content:space-between; gap:.75rem;
                 padding:.45rem .25rem; border-bottom:1px solid var(--cp-border); }
  .cp-pack:last-child { border-bottom:0; }
  .cp-scroll   { max-height:30rem; overflow:auto; }
</style>
{% endblock %}

{% block content %}
<div ng-controller="modSecurityController">

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">ModSecurity</h1>
      <p class="text-muted mb-0 small">
        Web application firewall in front of every site, with the OWASP Core Rule Set.
      </p>
    </div>
    <div class="d-flex align-items-center gap-2">
      <span class="badge" ng-cloak
            ng-class="enabled ? 'text-bg-success' : 'text-bg-secondary'"
            ng-bind="enabled ? 'Enabled' : 'Disabled'"></span>
      <button type="button" class="btn btn-outline-secondary btn-sm"
              ng-click="load()" ng-disabled="busy">
        <i class="fas fa-rotate me-1"></i>Refresh
      </button>
    </div>
  </div>

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="errorMessage"></span>
  </div>

  <!-- master switch -->
  <div class="card mb-3">
    <div class="card-body">
      <div class="row g-3 align-items-end">
        <div class="col-12 col-lg-5">
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="cpModsecOn"
                   ng-model="enabled" ng-change="toggleEngine()">
            <label class="form-check-label" for="cpModsecOn">
              <strong>Rule engine</strong>
              <span class="d-block text-muted small">
                Off means requests are passed straight through, unexamined.
              </span>
            </label>
          </div>
        </div>
        <div class="col-12 col-lg-4">
          <label class="form-label small mb-1" for="cpParanoia">
            Paranoia level <span class="text-muted">(higher catches more, and blocks more legitimate traffic)</span>
          </label>
          <select class="form-select" id="cpParanoia" ng-model="paranoia"
                  ng-change="toggleEngine()" ng-disabled="!enabled">
            <option ng-value="1">1 — recommended for shared hosting</option>
            <option ng-value="2">2 — stricter</option>
            <option ng-value="3">3 — aggressive</option>
            <option ng-value="4">4 — expect false positives</option>
          </select>
        </div>
        <div class="col-12 col-lg-3">
          <div class="text-muted small">Rule packs</div>
          <div class="fw-semibold" ng-cloak>
            <span ng-bind="enabledCount"></span> of <span ng-bind="packCount"></span> loaded
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-3">
    <!-- rule packs -->
    <div class="col-12 col-xl-5">
      <div class="card h-100">
        <div class="card-header d-flex align-items-center justify-content-between">
          <span class="fw-semibold">OWASP CRS rule packs</span>
          <div class="input-group input-group-sm" style="max-width:190px">
            <span class="input-group-text"><i class="fas fa-magnifying-glass"></i></span>
            <input type="search" class="form-control" ng-model="packSearch"
                   placeholder="Filter" aria-label="Filter rule packs">
          </div>
        </div>
        <div class="card-body cp-scroll">
          <div class="cp-pack" ng-repeat="pack in packs | filter:packSearch" ng-cloak>
            <div class="me-2">
              <div class="cp-mono" ng-bind="pack.name"></div>
              <div class="small text-muted" ng-bind="pack.path"></div>
            </div>
            <div class="form-check form-switch m-0">
              <input class="form-check-input" type="checkbox"
                     ng-model="pack.enabled" ng-change="togglePack(pack)"
                     ng-disabled="pack.busy"
                     ng-attr-id="{$ 'pack-' + $index $}"
                     ng-attr-aria-label="{$ 'Toggle ' + pack.name $}">
            </div>
          </div>
          <p class="text-muted small mb-0" ng-show="!packs.length" ng-cloak>
            No CRS rule files were found under {{ crsDir }}. Install the Core Rule
            Set from the installer's modsecurity stage.
          </p>
        </div>
      </div>
    </div>

    <!-- recent blocks -->
    <div class="col-12 col-xl-7">
      <div class="card h-100">
        <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
          <span class="fw-semibold">Recent blocks</span>
          <span class="text-muted small">
            Read from {{ auditLog }}
          </span>
        </div>
        <div class="card-body cp-scroll">
          <div class="cp-block" ng-repeat="hit in blocks" ng-cloak>
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
              <span>
                <span class="cp-block__id" ng-bind="hit.ruleID"></span>
                <span class="badge ms-1"
                      ng-class="hit.denied ? 'text-bg-danger' : 'text-bg-warning'"
                      ng-bind="hit.denied ? 'blocked' : 'warned'"></span>
                <span class="badge text-bg-secondary ms-1" ng-show="hit.severity"
                      ng-bind="hit.severity"></span>
              </span>
              <button type="button" class="btn btn-sm btn-outline-secondary"
                      ng-click="excludeRule(hit)" ng-disabled="busy">
                <i class="fas fa-ban me-1"></i>Write exclusion
              </button>
            </div>
            <div class="small mt-1" ng-bind="hit.message"></div>
            <div class="small text-muted mt-1">
              <span ng-bind="hit.timestamp"></span>
              <span ng-show="hit.address"> &middot; from <span ng-bind="hit.address"></span></span>
              <span ng-show="hit.host"> &middot; <span ng-bind="hit.host"></span></span>
            </div>
            <div class="cp-matched" ng-show="hit.uri">
              <span class="text-muted">URI</span> <span ng-bind="hit.uri"></span>
            </div>
            <div class="cp-matched" ng-show="hit.matched">
              <span class="text-muted">Matched</span> <span ng-bind="hit.matched"></span>
            </div>
          </div>
          <p class="text-muted small mb-0" ng-show="!blocks.length" ng-cloak>
            Nothing has been blocked recently — or the audit log has not been
            written yet.
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- exclusions -->
  <div class="card mt-3">
    <div class="card-header fw-semibold">Exclusions</div>
    <div class="card-body">
      <form class="row g-2 align-items-end mb-3" ng-submit="addExclusion()" novalidate>
        <div class="col-6 col-lg-3">
          <label class="form-label small mb-1" for="cpExclId">Rule id</label>
          <input type="text" class="form-control cp-mono" id="cpExclId"
                 ng-model="draft.ruleID" placeholder="942100" maxlength="12">
        </div>
        <div class="col-12 col-lg-6">
          <label class="form-label small mb-1" for="cpExclComment">Why</label>
          <input type="text" class="form-control" id="cpExclComment"
                 ng-model="draft.comment" maxlength="120"
                 placeholder="False positive on the shop checkout form">
        </div>
        <div class="col-6 col-lg-3 d-grid">
          <button type="submit" class="btn btn-outline-danger" ng-disabled="busy || !draft.ruleID">
            <i class="fas fa-ban me-1"></i>Disable this rule
          </button>
        </div>
      </form>

      <div class="table-responsive">
        <table class="table table-sm align-middle mb-0">
          <thead>
            <tr><th scope="col">Rule id</th><th scope="col">File</th>
                <th scope="col">Hand edited</th></tr>
          </thead>
          <tbody ng-cloak>
            <tr ng-repeat="excl in exclusions">
              <td class="cp-mono" ng-bind="excl.ruleID"></td>
              <td class="cp-mono small" ng-bind="excl.file"></td>
              <td><span class="badge"
                        ng-class="excl.handEdited === 'yes' ? 'text-bg-secondary' : 'text-bg-info'"
                        ng-bind="excl.handEdited === 'yes' ? 'yes' : 'panel'"></span></td>
            </tr>
            <tr ng-show="!exclusions.length">
              <td colspan="3" class="text-muted text-center py-3">No rules are excluded.</td>
            </tr>
          </tbody>
        </table>
      </div>

      <p class="text-muted small mb-0 mt-3">
        <i class="fas fa-circle-info me-1"></i>
        Exclusions written here land in <span class="cp-mono">{{ panelExclusionsFile }}</span>.
        The installer also creates <span class="cp-mono">{{ exclusionsFile }}</span>, which is
        yours to edit by hand for anything more specific than "disable this rule
        everywhere" — a <span class="cp-mono">SecRuleUpdateTargetById</span> that
        exempts one parameter on one URL, for instance. The panel never rewrites
        that file.
      </p>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'firewallManager/firewallManager.js' %}"></script>
{% endblock %}