{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Packet-filter rules. Deleting a rule that keeps SSH, the panel, or the
   operator's own address reachable requires a typed phrase -- see views.py. {% endcomment %}

{% block title %}Firewall{% endblock %}

{% block styles %}
<style>
  .cp-mono      { font-family:var(--cp-font-mono); font-size:.82rem; }
  .cp-danger-zone { border:1px solid var(--cp-danger); border-radius:var(--cp-radius-lg);
                    background:var(--cp-bg-subtle); padding:1rem 1.15rem; }
  .cp-badge-soft  { background:var(--cp-primary-soft); color:var(--cp-primary);
                    border-radius:var(--cp-radius-pill); padding:.15rem .6rem; font-size:.75rem; }
  .cp-row-risk    { box-shadow:inset 3px 0 0 var(--cp-danger); }
</style>
{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Firewall</h1>
      <p class="text-muted mb-0 small">
        Backend: <strong>{{ backend }}</strong> &middot; your address is
        <span class="cp-mono">{{ callerIP }}</span> &middot; SSH on port {{ sshPort }},
        panel on {{ panelPort }}.
      </p>
    </div>
    <div class="d-flex align-items-center gap-2">
      <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>
      <button type="button" class="btn btn-outline-primary btn-sm"
              ng-click="reload()" ng-disabled="busy">
        <i class="fas fa-arrows-rotate me-1"></i>Apply &amp; reload
      </button>
    </div>
  </div>

  {% if backend == "none" %}
    <div class="alert alert-warning">
      <i class="fas fa-triangle-exclamation me-1"></i>
      Neither firewalld nor CSF is active on this server, so there is no packet
      filter to manage. Install one before relying on these rules.
    </div>
  {% endif %}

  <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>
  <div class="alert alert-warning py-2 px-3" ng-show="warning" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="warning"></span>
  </div>

  <div class="row g-3 mb-3">
    <div class="col-6 col-lg-3">
      <div class="card h-100"><div class="card-body py-3">
        <div class="text-muted small">Backend</div>
        <div class="fw-semibold" ng-cloak ng-bind="status.backend"></div>
      </div></div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="card h-100"><div class="card-body py-3">
        <div class="text-muted small">Filter running</div>
        <div class="fw-semibold" ng-cloak ng-bind="status.running ? 'Yes' : 'No'"></div>
      </div></div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="card h-100"><div class="card-body py-3">
        <div class="text-muted small">fail2ban</div>
        <div class="fw-semibold" ng-cloak ng-bind="status.fail2ban ? 'Running' : 'Stopped'"></div>
      </div></div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="card h-100"><div class="card-body py-3">
        <div class="text-muted small">ModSecurity</div>
        <div class="fw-semibold" ng-cloak ng-bind="status.modsecurity ? 'On' : 'Off'"></div>
      </div></div>
    </div>
  </div>

  <!-- add rule -->
  <div class="card mb-3">
    <div class="card-header fw-semibold">Open a port</div>
    <div class="card-body">
      <form ng-submit="add()" novalidate>
        <div class="row g-2 align-items-end">
          <div class="col-6 col-lg-3">
            <label class="form-label small mb-1" for="cpRuleName">Label</label>
            <input type="text" class="form-control" id="cpRuleName" ng-model="draft.name"
                   placeholder="Office VPN" maxlength="100">
          </div>
          <div class="col-6 col-lg-2">
            <label class="form-label small mb-1" for="cpRuleProto">Protocol</label>
            <select class="form-select" id="cpRuleProto" ng-model="draft.proto">
              <option value="tcp">TCP</option>
              <option value="udp">UDP</option>
            </select>
          </div>
          <div class="col-6 col-lg-2">
            <label class="form-label small mb-1" for="cpRulePort">Port or range</label>
            <input type="text" class="form-control cp-mono" id="cpRulePort" ng-model="draft.port"
                   placeholder="443 or 8000-8100" required>
          </div>
          <div class="col-6 col-lg-3">
            <label class="form-label small mb-1" for="cpRuleAddr">Source (optional)</label>
            <input type="text" class="form-control cp-mono" id="cpRuleAddr" ng-model="draft.ipAddress"
                   placeholder="blank = any, or 203.0.113.0/24">
          </div>
          <div class="col-12 col-lg-2 d-grid">
            <button type="submit" class="btn btn-primary" ng-disabled="busy || !draft.port">
              <i class="fas fa-plus me-1"></i>Allow
            </button>
          </div>
        </div>
        <div class="form-text mt-2">
          Leaving the source blank opens the port to the entire internet. Restrict it
          to your own network whenever the service is not meant to be public.
          Blocking an address is done from
          <a href="/firewall/fail2ban">fail2ban</a>, which also expires the ban.
        </div>
      </form>
    </div>
  </div>

  <!-- lock-out confirmation -->
  <div class="cp-danger-zone mb-3" ng-show="pending" ng-cloak>
    <h2 class="h6 text-danger mb-2">
      <i class="fas fa-triangle-exclamation me-1"></i>This delete can lock you out
    </h2>
    <p class="mb-2 small" ng-bind="pending.reason"></p>
    <p class="mb-2 small">
      Rule: <span class="cp-mono"
        ng-bind="pending.rule.proto + '/' + pending.rule.port + ' from ' + pending.rule.address"></span>
    </p>
    <div class="row g-2 align-items-end">
      <div class="col-12 col-md-6">
        <label class="form-label small mb-1" for="cpOverride">
          Type <strong ng-bind="pending.phrase"></strong> to confirm
        </label>
        <input type="text" class="form-control cp-mono" id="cpOverride"
               ng-model="pending.typed" autocomplete="off" spellcheck="false">
      </div>
      <div class="col-12 col-md-6 d-flex gap-2">
        <button type="button" class="btn btn-danger"
                ng-disabled="pending.typed !== pending.phrase || busy"
                ng-click="confirmDelete()">
          <i class="fas fa-trash-can me-1"></i>Delete anyway
        </button>
        <button type="button" class="btn btn-outline-secondary" ng-click="pending = null">
          Cancel
        </button>
      </div>
    </div>
  </div>

  <!-- rules -->
  <div class="card">
    <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
      <span class="fw-semibold">Active rules</span>
      <div class="input-group input-group-sm" style="max-width:260px">
        <span class="input-group-text"><i class="fas fa-magnifying-glass"></i></span>
        <input type="search" class="form-control" placeholder="Filter" ng-model="search"
               aria-label="Filter rules">
      </div>
    </div>
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead>
          <tr>
            <th scope="col">Rule</th>
            <th scope="col">Protocol</th>
            <th scope="col">Port</th>
            <th scope="col">Source</th>
            <th scope="col">Origin</th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody ng-cloak>
          <tr ng-repeat="rule in rules | filter:search" ng-class="{'cp-row-risk': rule.lockout}">
            <td>
              <div ng-bind="rule.name"></div>
              <div class="small text-muted" ng-show="rule.comment" ng-bind="rule.comment"></div>
              <div class="small text-danger" ng-show="rule.lockout">
                <i class="fas fa-triangle-exclamation me-1"></i>
                <span ng-bind="rule.lockout"></span>
              </div>
            </td>
            <td class="cp-mono" ng-bind="rule.proto"></td>
            <td class="cp-mono" ng-bind="rule.port || '—'"></td>
            <td class="cp-mono" ng-bind="rule.address"></td>
            <td>
              <span class="cp-badge-soft" ng-bind="rule.source"></span>
              <span class="badge text-bg-secondary ms-1" ng-show="!rule.live"
                    title="Recorded by the panel but not reported by the firewall">stale</span>
            </td>
            <td class="text-end">
              <button type="button" class="btn btn-sm btn-outline-danger"
                      ng-show="rule.deletable" ng-disabled="busy"
                      ng-click="remove(rule)"
                      ng-attr-aria-label="Delete the firewall rule for {$ rule.source $}">
                <i class="fas fa-trash-can" aria-hidden="true"></i>
              </button>
              <span class="text-muted small" ng-show="!rule.deletable">read-only</span>
            </td>
          </tr>
          <tr ng-show="!rules.length && !busy">
            <td colspan="6" class="text-center text-muted py-5">
              <i class="fas fa-shield-halved fa-2x mb-2 d-block"></i>
              No rules are reported by the active backend.
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <p class="text-muted small mt-3 mb-0">
    <i class="fas fa-circle-info me-1"></i>
    CloudPanel refuses to close port {{ sshPort }} or port {{ panelPort }} to every
    source, and asks you to type a phrase before removing any rule that covers the
    address you are connected from.
  </p>
</div>
{% endblock %}

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