{% extends 'generic/object_edit.html' %}
{% load static %}
{% load form_helpers %}
{% load helpers %}
{% load i18n %}

{% block tabs %}
  {% include 'ipam/inc/vlan_edit_header.html' with active_tab='add' %}
{% endblock tabs %}

{% block form %}
  {% for field in form.hidden_fields %}
    {{ field }}
  {% endfor %}

  <div class="field-group my-5">
    <div class="row">
      <h2 class="col-9 offset-3">{% trans "VLAN" %}</h2>
    </div>
    {% render_field form.vid %}
    {% render_field form.name %}
    {% render_field form.status %}
    {% render_field form.role %}
    {% render_field form.description %}
    {% render_field form.tags %}
  </div>

  <div class="field-group my-5">
    <div class="row">
      <h2 class="col-9 offset-3">{% trans "Q-in-Q (802.1ad)" %}</h2>
    </div>
    {% render_field form.qinq_role %}
    {% render_field form.qinq_svlan %}
  </div>

  <div class="field-group my-5">
    <div class="row">
      <h2 class="col-9 offset-3">{% trans "Tenancy" %}</h2>
    </div>
    {% render_field form.tenant_group %}
    {% render_field form.tenant %}
  </div>

  <div class="field-group my-5">
    <div class="row">
      <h2 class="col-9 offset-3">{% trans "Assignment" %}</h2>
    </div>
    {% with site_tab_active=form.initial.site %}
      <div class="row">
        <div class="col-9 offset-3">
          <ul class="nav nav-pills mb-1" role="tablist">
            <li class="nav-item" role="presentation">
              <a class="nav-link{% if not site_tab_active %} active{% endif %}" href="#group" role="tab" data-bs-toggle="tab">{% trans "VLAN Group" %}</a>
            </li>
            <li class="nav-item" role="presentation">
              <a class="nav-link{% if site_tab_active %} active{% endif %}" href="#site" role="tab" data-bs-toggle="tab">{% trans "Site" %}</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="tab-content p-0 border-0">
        <div class="tab-pane{% if not site_tab_active %} active{% endif %}" id="group">
          {% render_field form.group %}
        </div>
        <div class="tab-pane{% if site_tab_active %} active{% endif %}" id="site">
          {% render_field form.site %}
        </div>
      </div>
    {% endwith %}
  </div>

  <div class="field-group mb-5">
    <div class="row">
      <h2 class="col-9 offset-3">{% trans "Ownership" %}</h2>
    </div>
    {% render_field form.owner_group %}
    {% render_field form.owner %}
  </div>

  {% if form.custom_fields %}
    <div class="field-group my-5">
      <div class="row">
        <h2 class="col-9 offset-3">{% trans "Custom Fields" %}</h2>
      </div>
      {% render_custom_fields form %}
    </div>
  {% endif %}

  <div class="field-group my-5">
    {% render_field form.comments %}
  </div>

  {# Meta fields #}
  <div class="bg-primary-subtle border border-primary rounded-1 pt-3 px-3 mb-3">
    {% render_field form.changelog_message %}
  </div>
{% endblock %}
