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

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

{% block form %}
    <div class="field-group my-5">
      <div class="row">
        <h5 class="col-9 offset-3">{% trans "IP Address" %}</h5>
      </div>
      {% render_field form.address %}
      {% render_field form.status %}
      {% render_field form.role %}
      {% render_field form.vrf %}
      {% render_field form.dns_name %}
      {% render_field form.description %}
      {% render_field form.tags %}
    </div>

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

    <div class="field-group my-5">
      <div class="row">
        <h5 class="col-9 offset-3">{% trans "Interface Assignment" %}</h5>
      </div>
      <div class="row">
        <div class="col-9 offset-3">
          <ul class="nav nav-pills mb-1" role="tablist">
            <li role="presentation" class="nav-item">
              <button role="tab" type="button" id="device_tab" data-bs-toggle="tab" aria-controls="device" data-bs-target="#device" class="nav-link {% if not form.initial.vminterface and not form.initial.fhrpgroup %}active{% endif %}">
                {% trans "Device" %}
              </button>
            </li>
            <li role="presentation" class="nav-item">
              <button role="tab" type="button" id="vm_tab" data-bs-toggle="tab" aria-controls="vm" data-bs-target="#vm" class="nav-link {% if form.initial.vminterface %}active{% endif %}">
                {% trans "Virtual Machine" %}
              </button>
            </li>
            <li role="presentation" class="nav-item">
              <button role="tab" type="button" id="fhrpgroup_tab" data-bs-toggle="tab" aria-controls="fhrpgroup" data-bs-target="#fhrpgroup" class="nav-link {% if form.initial.fhrpgroup %}active{% endif %}">
                {% trans "FHRP Group" %}
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div class="tab-content p-0 border-0">
        <div class="tab-pane {% if not form.initial.vminterface and not form.initial.fhrpgroup %}active{% endif %}" id="device" role="tabpanel" aria-labeled-by="device_tab">
          {% render_field form.interface %}
        </div>
        <div class="tab-pane {% if form.initial.vminterface %}active{% endif %}" id="vm" role="tabpanel" aria-labeled-by="vm_tab">
          {% render_field form.vminterface %}
        </div>
        <div class="tab-pane {% if form.initial.fhrpgroup %}active{% endif %}" id="fhrpgroup" role="tabpanel" aria-labeled-by="fhrpgroup_tab">
          {% render_field form.fhrpgroup %}
        </div>
        {% render_field form.primary_for_parent %}
      </div>
    </div>

    <div class="field-group my-5">
      <div class="row">
        <h5 class="col-9 offset-3">{% trans "NAT IP (Inside" %})</h5>
      </div>
      <div class="row">
          {% render_field form.nat_inside %}
      </div>
    </div>

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

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