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

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

{% if form.non_field_errors %}
  <div class="alert alert-danger">
    <a class="close" data-dismiss="alert">&times;</a>
      {% for non_field_error in form.non_field_errors %}
        {{ non_field_error }}
      {% endfor %}
  </div>
{% endif %}

<div class="accordion" id="accordion-connections-fields">
  <div class='field-group'>
    <div class="card-header" id="header-general">
      <h4>
        <button class="btn btn-block text-left dropdown-toggle" type="button"
                data-toggle="collapse" data-target="#collapse-general"
                aria-expanded="true" aria-controls="collapse-general">
          {% trans "General" %}
        </button>
      </h4>
    </div>

    <div id="collapse-general" class="collapse show"
         aria-labelledby="header-general"
         data-parent="#accordion-connections-fields">
      <div class="card-body">
        {{ 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="field-group">
      <div class="card-header" id="header-ipv4">
        <h4>
          <button class="btn btn-block text-left dropdown-toggle {{ form.errors|yesno:",collapsed" }}"
                  type="button" data-toggle="collapse"
                  data-target="#collapse-ipv4"
                  aria-expanded="{{ form.errors|yesno:"true,false" }}"
                  aria-controls="collapse-ipv4">
            {% trans "IPv4" %}
          </button>
        </h4>
      </div>

      <div id="collapse-ipv4" class="collapse {{ form.errors|yesno:"show," }}"
           aria-labelledby="header-ipv4"
           data-parent="#accordion-connections-fields">
        <div class="card-body">
          {{ 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="field-group">
      <div class="card-header" id="header-ipv6">
        <h4>
          <button class="btn btn-block text-left dropdown-toggle {{ form.errors|yesno:",collapsed" }}"
                  type="button" data-toggle="collapse"
                  data-target="#collapse-ipv6"
                  aria-expanded="{{ form.errors|yesno:"true,false" }}"
                  aria-controls="collapse-ipv6">
            {% trans "IPv6" %}
          </button>
        </h4>
      </div>

      <div id="collapse-ipv6" class="collapse {{ form.errors|yesno:"show," }}"
           aria-labelledby="header-ipv6"
           data-parent="#accordion-connections-fields">
        <div class="card-body">
          {{ 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>
