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

{% load bootstrap %}
{% load i18n %}

{% if form.non_field_errors %}
  <div class="alert alert-danger alert-dismissible
              d-flex align-items-center fade show">
    <div class="me-2">
      <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
      <span class="visually-hidden">{% trans "Error:" %}</span>
    </div>
    <div>
      {% for non_field_error in form.non_field_errors %}
        {{ non_field_error }}
      {% endfor %}
      <button type="button" class="btn-close" data-bs-dismiss="alert"
              aria-label="{% trans "Close" %}">
      </button>
    </div>
  </div>
{% endif %}

<div class="accordion" id="accordion-connections-fields">
  <div class="accordion-item">
    <h2 class="accordion-header" id="header-general">
      <button class="accordion-button" type="button"
              data-bs-toggle="collapse" data-bs-target="#collapse-general"
              aria-expanded="true" aria-controls="collapse-general">
        {% trans "General" %}
      </button>
    </h2>

    <div id="collapse-general" class="accordion-collpase collapse show"
         aria-labelledby="header-general"
         data-bs-parent="#accordion-connections-fields">
      <div class="accordion-body field-group">
        {{ form.name|bootstrap }}
        {{ form.interface|bootstrap }}
        {{ form.zone|bootstrap }}
      </div>
    </div>
  </div>

  {% if form.dns_over_tls %}
    {% include "connections_fields_privacy.html" %}
  {% endif %}

  {% if form.ssid %}
    {% include "connections_fields_wifi.html" %}
  {% endif %}

  {% if form.username %}
    {% include "connections_fields_pppoe.html" %}
  {% endif %}

  {% if form.ipv4_method %}
    <div class="accordion-item">
      <h2 class="accordion-header" id="header-ipv4">
        <button class="accordion-button {{ form.errors|yesno:",collapsed" }}"
                type="button" data-bs-toggle="collapse"
                data-bs-target="#collapse-ipv4"
                aria-expanded="{{ form.errors|yesno:"true,false" }}"
                aria-controls="collapse-ipv4">
          {% trans "IPv4" %}
        </button>
      </h2>

      <div id="collapse-ipv4" class="accordion-collpase collapse {{ form.errors|yesno:"show," }}"
           aria-labelledby="header-ipv4"
           data-bs-parent="#accordion-connections-fields">
        <div class="accordion-body field-group">
          {{ form.ipv4_method|bootstrap }}
          {{ form.ipv4_address|bootstrap }}
          {{ form.ipv4_netmask|bootstrap }}
          {{ form.ipv4_gateway|bootstrap }}
          {{ form.ipv4_dns|bootstrap }}
          {{ form.ipv4_second_dns|bootstrap }}
        </div>
      </div>
    </div>
  {% endif %}

  {% if form.ipv6_method %}
    <div class="accordion-item">
      <h2 class="accordion-header" id="header-ipv6">
        <button class="accordion-button {{ form.errors|yesno:",collapsed" }}"
                type="button" data-bs-toggle="collapse"
                data-bs-target="#collapse-ipv6"
                aria-expanded="{{ form.errors|yesno:"true,false" }}"
                aria-controls="collapse-ipv6">
          {% trans "IPv6" %}
        </button>
      </h2>

      <div id="collapse-ipv6" class="accordion-collpase collapse {{ form.errors|yesno:"show," }}"
           aria-labelledby="header-ipv6"
           data-bs-parent="#accordion-connections-fields">
        <div class="accordion-body field-group">
          {{ form.ipv6_method|bootstrap }}
          {{ form.ipv6_address|bootstrap }}
          {{ form.ipv6_prefix|bootstrap }}
          {{ form.ipv6_gateway|bootstrap }}
          {{ form.ipv6_dns|bootstrap }}
          {{ form.ipv6_second_dns|bootstrap }}
        </div>
      </div>
    </div>
  {% endif %}
</div>
