{% extends "app.html" %}
{% comment %}
# SPDX-License-Identifier: AGPL-3.0-or-later
{% endcomment %}

{% load i18n %}
{% load static %}

{% block page_head %}
  <link type="text/css" rel="stylesheet"
        href="{% static 'firewall/firewall.css' %}">
{% endblock %}

{% block configuration %}

  <h3>{% trans "Status" %}</h3>

  <div class="table-responsive">
    <table class='table table-autowidth'>
      <thead>
        <th>{% trans "Service/Port" %}</th>
        <th>{% trans "Status" %}</th>
      </thead>

      <tbody>
        {% for component in components|dictsort:"name" %}
          {% if component.ports %}
            <tr>
              <td class="app-name">
                <a class="dropdown-toggle" href="#"
                   data-bs-toggle="collapse" role="button"
                   data-bs-target=".{{component.component_id}}"
                   aria-expanded="false"
                   aria-controls="{{component.component_id}}">
                  {{ component.name }}</a>
              </td>
              <td class="app-status">
                {% if component.is_enabled %}
                  <span class='badge text-bg-success'>
                    {% trans "Enabled" %}</span>
                {% else %}
                  <span class='badge text-bg-warning'>
                    {% trans "Disabled" %}</span>
                {% endif %}
              </td>
            </tr>
            {% for port in component.ports_details %}
              <tr class="collapse {{component.component_id}}">
                <td class='service'>
                  <span class="service-name">{{ port.name }}</span>:
                  {% for port_number, protocol in port.details %}
                    {{ port_number }}/{{ protocol }}
                  {% endfor %}
                </td>
                <td class="service-status">
                  {% if port.name in internal_enabled_ports and port.name in external_enabled_ports %}
                    <span class='badge text-bg-success'>
                      {% trans "Permitted" %}</span>
                  {% elif port.name in internal_enabled_ports %}
                    <span class='badge text-bg-warning'>
                      {% trans "Permitted (internal only)" %}</span>
                  {% elif port.name in external_enabled_ports %}
                    <span class='badge text-bg-warning'>
                      {% trans "Permitted (external only)" %}</span>
                  {% else %}
                    <span class='badge text-bg-danger'>
                      {% trans "Blocked" %}</span>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          {% endif %}
        {% endfor %}
      </tbody>
    </table>
  </div>

  <p>
    <em>
      {% blocktrans trimmed %}
        The operation of the firewall is automatic. When you enable
        a service it is also permitted in the firewall and when you
        disable a service it is also disabled in the firewall.
      {% endblocktrans %}
    </em>
  </p>

  <h3>{%trans "Advanced" %} </h3>
  <p>
    {% blocktrans trimmed %}
      Advanced firewall operations such as opening custom ports are provided
      by the <a href="/_cockpit/network/firewall">Cockpit</a> app.
    {% endblocktrans %}
  </p>

{% endblock %}
