{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} CSF / firewalld backend detail: which filter is live, what it reports, and the
   address lists the panel has recorded. {% endcomment %}

{% block title %}CSF{% endblock %}

{% block styles %}
<style>
  .cp-mono  { font-family:var(--cp-font-mono); font-size:.82rem; }
  .cp-badge-soft { background:var(--cp-primary-soft); color:var(--cp-primary);
                   border-radius:var(--cp-radius-pill); padding:.15rem .6rem; font-size:.75rem; }
</style>
{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Packet filter backend</h1>
      <p class="text-muted mb-0 small">
        CloudPanel detects the active backend rather than assuming one: CSF when it
        is installed and enabled, otherwise firewalld.
      </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>Reload filter
      </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>

  {% if backend == "none" %}
    <div class="alert alert-warning">
      <i class="fas fa-triangle-exclamation me-1"></i>
      No packet filter is active. Neither <span class="cp-mono">csf</span> nor
      <span class="cp-mono">firewalld</span> responded, so the rules page has nothing
      to act on and this server is relying on its provider's network filtering alone.
    </div>
  {% elif backend == "csf" %}
    <div class="alert alert-info">
      <i class="fas fa-circle-info me-1"></i>
      CSF is the active backend. CSF disables firewalld when it installs itself, so
      the panel writes inbound ports into <span class="cp-mono">/etc/csf/csf.conf</span>
      and addresses into <span class="cp-mono">csf.allow</span>.
    </div>
  {% else %}
    <div class="alert alert-info">
      <i class="fas fa-circle-info me-1"></i>
      firewalld is the active backend. Port rules become permanent
      <span class="cp-mono">--add-port</span> entries, and rules restricted to a
      source address become rich rules.
    </div>
  {% endif %}

  <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 cp-mono" 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">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">Rules reported</div>
        <div class="fw-semibold" ng-cloak ng-bind="status.rules"></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>

  <div class="card mb-3">
    <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
      <span class="fw-semibold">Rules reported by the backend</span>
      <a href="/firewall/" class="btn btn-sm btn-outline-secondary">Edit rules</a>
    </div>
    <div class="table-responsive">
      <table class="table table-sm table-hover align-middle mb-0">
        <thead>
          <tr><th scope="col">Protocol</th><th scope="col">Port</th>
              <th scope="col">Source</th><th scope="col">Origin</th></tr>
        </thead>
        <tbody ng-cloak>
          <tr ng-repeat="rule in rules">
            <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></td>
          </tr>
          <tr ng-show="!rules.length">
            <td colspan="4" class="text-center text-muted py-4">
              The backend reported no rules.
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="card mb-3" ng-show="status.backend === 'csf'" ng-cloak>
    <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
      <span class="fw-semibold">CSF port lists</span>
      <button type="button" class="btn btn-sm btn-outline-secondary"
              ng-click="loadPorts()" ng-disabled="busy">
        <i class="fas fa-rotate me-1"></i>Refresh
      </button>
    </div>
    <div class="card-body">
      <p class="small text-muted">
        Comma-separated ports or <span class="cp-mono">start:end</span> ranges. These
        are the four directives CSF itself enforces — TCP/UDP inbound and outbound.
      </p>
      <div class="row g-2 align-items-end">
        <div class="col-12 col-md-6 col-lg-3">
          <label class="form-label small mb-1" for="cpCsfTcpIn">TCP in</label>
          <input type="text" class="form-control cp-mono" id="cpCsfTcpIn"
                 ng-model="ports.tcpIn">
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <label class="form-label small mb-1" for="cpCsfTcpOut">TCP out</label>
          <input type="text" class="form-control cp-mono" id="cpCsfTcpOut"
                 ng-model="ports.tcpOut">
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <label class="form-label small mb-1" for="cpCsfUdpIn">UDP in</label>
          <input type="text" class="form-control cp-mono" id="cpCsfUdpIn"
                 ng-model="ports.udpIn">
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <label class="form-label small mb-1" for="cpCsfUdpOut">UDP out</label>
          <input type="text" class="form-control cp-mono" id="cpCsfUdpOut"
                 ng-model="ports.udpOut">
        </div>
      </div>
      <div class="mt-3">
        <button type="button" class="btn btn-primary" ng-disabled="busy" ng-click="savePorts()">
          <i class="fas fa-floppy-disk me-1"></i>Save port lists
        </button>
      </div>
    </div>
    <div class="card-footer small text-muted">
      The SSH port and the panel's own port ({{ panelPort|default:"8090" }}) must
      always stay in the inbound TCP list — the server refuses a change that would
      remove either.
    </div>
  </div>

  <div class="card">
    <div class="card-header fw-semibold">Address lists recorded by the panel</div>
    <div class="table-responsive">
      <table class="table table-sm align-middle mb-0">
        <thead>
          <tr><th scope="col">List</th><th scope="col">Address</th><th scope="col">Port</th>
              <th scope="col">Comment</th><th scope="col">Permanent</th><th scope="col">Added</th></tr>
        </thead>
        <tbody ng-cloak>
          <tr ng-repeat="entry in csfEntries">
            <td><span class="cp-badge-soft" ng-bind="'csf.' + entry.ruleType"></span></td>
            <td class="cp-mono" ng-bind="entry.ipAddress"></td>
            <td class="cp-mono" ng-bind="entry.port || '—'"></td>
            <td class="small" ng-bind="entry.comment"></td>
            <td class="small" ng-bind="entry.permanent"></td>
            <td class="small text-muted" ng-bind="entry.dateCreated"></td>
          </tr>
          <tr ng-show="!csfEntries.length">
            <td colspan="6" class="text-center text-muted py-4">
              The panel has no recorded CSF address entries.
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="card-footer small text-muted">
      These rows mirror what the panel wrote. CSF's own files are the authority; a
      row here that CSF no longer lists means somebody edited
      <span class="cp-mono">csf.allow</span> or <span class="cp-mono">csf.deny</span>
      by hand.
    </div>
  </div>
</div>
{% endblock %}

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