{% comment %}
# SPDX-License-Identifier: AGPL-3.0-or-later
{% endcomment %}

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

<div class="row connection-diagram">
  <div class="col-md-2">
    <img src="{% static 'theme/img/network-internet.svg' %}"
         class="col-image network-entity" alt="{% trans "Internet" %}">
  </div>
  <div class="col-md-3">
    <img src="{% static 'theme/img/network-spacing.svg' %}"
         class="col-image network-spacing d-none d-md-block"
         alt="{% trans "Spacing" %}">
    <img src="{% static 'theme/img/network-connection.svg' %}"
         class="col-image network-connection d-none d-md-block "
         alt="{% trans "Connection" %}">
    <img src="{% static 'theme/img/network-connection-vertical.svg' %}"
         class="network-connection-vertical d-md-none"
         alt="{% trans "Connection" %}">
    <div class="connection-list">
      <p class="connection-list-heading">{% trans "External" %}</p>
      {% for connection in connections %}
        {% if connection.interface_name and connection.is_active and connection.zone == 'external' %}
          {% if connection.type == '802-3-ethernet' %}
            <img src="{% static 'theme/img/network-ethernet.svg' %}"
                 class="network-type-icon" alt="{% trans "Ethernet" %}">
          {% elif connection.type == '802-11-wireless' %}
            <img src="{% static 'theme/img/network-wireless.svg' %}"
                 class="network-type-icon" alt="{% trans "Wi-Fi" %}">
          {% endif %}
          <a href="{% url 'networks:show' connection.uuid %}"
             title="{% blocktrans with name=connection.name %}Show connection {{ name }}{% endblocktrans %}">
            {{ connection.name }} ({{ connection.interface_name }})</a>
        {% endif %}
      {% endfor %}
    </div>
  </div>
  <div class="col-md-2">
    <img src="{% static 'theme/img/network-freedombox.svg' %}"
         class="col-image network-entity" alt="{{ box_name }}">
  </div>
  <div class="col-md-3">
    <img src="{% static 'theme/img/network-spacing.svg' %}"
         class="col-image network-spacing d-none d-md-block"
         alt="{% trans "Spacing" %}">
    <img src="{% static 'theme/img/network-connection.svg' %}"
         class="col-image network-connection d-none d-md-block"
         alt="{% trans "Connection" %}">
    <div class="connection-list">
      <p class="connection-list-heading">{% trans "Internal" %}</p>
      {% for connection in connections %}
        {% if connection.interface_name and connection.is_active and connection.zone == 'internal' %}
          <p>
            {% if connection.type == '802-3-ethernet' %}
              <img src="{% static 'theme/img/network-ethernet.svg' %}"
                   class="network-type-icon" alt="{% trans "Ethernet" %}">
            {% elif connection.type == '802-11-wireless' %}
              <img src="{% static 'theme/img/network-wireless.svg' %}"
                   class="network-type-icon" alt="{% trans "Wi-Fi" %}">
            {% endif %}
            <a href="{% url 'networks:show' connection.uuid %}"
               title="{% blocktrans with name=connection.name %}Show connection {{ name }}{% endblocktrans %}">
              {{ connection.name }} ({{ connection.interface_name }})</a>
          </p>
        {% endif %}
      {% endfor %}
    </div>
    <img src="{% static 'theme/img/network-connection-vertical.svg' %}"
         class="network-connection-vertical d-md-none"
         alt="{% trans "Connection" %}">
  </div>
  <div class="col-md-2">
    <img src="{% static 'theme/img/network-computer.svg' %}"
         class="col-image network-entity" alt="{% trans "Computer" %}">
  </div>
</div>
