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

{% block form %}
  <div class="field-group my-5">
    <div class="row mb-2">
      <h5 class="offset-sm-3">L2VPN Termination</h5>
    </div>
    {% render_field form.l2vpn %}
    <div class="row mb-3">
      <div class="offset-sm-3">
        <ul class="nav nav-pills" role="tablist">
          <li role="presentation" class="nav-item">
            <button role="tab" type="button" id="vlan_tab" data-bs-toggle="tab" aria-controls="vlan" data-bs-target="#vlan" class="nav-link {% if not form.initial.interface or form.initial.vminterface %}active{% endif %}">
              VLAN
            </button>
          </li>
          <li role="presentation" class="nav-item">
            <button role="tab" type="button" id="interface_tab" data-bs-toggle="tab" aria-controls="interface" data-bs-target="#interface" class="nav-link {% if form.initial.interface %}active{% endif %}">
              Interface
            </button>
          </li>
          <li role="presentation" class="nav-item">
            <button role="tab" type="button" id="vminterface_tab" data-bs-toggle="tab" aria-controls="vminterface" data-bs-target="#vminterface" class="nav-link {% if form.initial.vminterface %}active{% endif %}">
              VM Interface
            </button>
          </li>
        </ul>
      </div>
    </div>
    <div class="row mb-3">
      <div class="tab-content p-0 border-0">
        <div class="tab-pane {% if not form.initial.interface or form.initial.vminterface %}active{% endif %}" id="vlan" role="tabpanel" aria-labeled-by="vlan_tab">
          {% render_field form.device %}
          {% render_field form.vlan %}
        </div>
        <div class="tab-pane {% if form.initial.interface %}active{% endif %}" id="interface" role="tabpanel" aria-labeled-by="interface_tab">
          {% render_field form.device %}
          {% render_field form.interface %}
        </div>
        <div class="tab-pane {% if form.initial.vminterface %}active{% endif %}" id="vminterface" role="tabpanel" aria-labeled-by="vminterface_tab">
          {% render_field form.virtual_machine %}
          {% render_field form.vminterface %}
        </div>
      </div>
    </div>
  </div>
{% endblock %}