{% load buttons %}
{% load i18n %}
{% load helpers %}
{% load static %}
{% load form_helpers %}

<ul class="nav nav-tabs sub-nav">    
  <li class="nav-item" role="presentation">
    <a class="nav-tab nav-link {% if request.GET.subtab == 'ipam' or request.GET.subtab is None %}active{% endif %}" href="?tab=slurpit_to_netbox&subtab=ipam">
      IPAM
    </a>
  </li>

  <li class="nav-item" role="presentation">
    <a class="nav-tab nav-link {% if request.GET.subtab == 'interface' %}active{% endif %}" href="?tab=slurpit_to_netbox&subtab=interface">
      Interfaces
    </a>
  </li>

  <li class="nav-item" role="presentation">
    <a class="nav-tab nav-link {% if request.GET.subtab == 'prefix' %}active{% endif %}" href="?tab=slurpit_to_netbox&subtab=prefix">
      Prefixes
    </a>
  </li>

  <li class="nav-item" role="presentation" style="display:none;">
    <a class="nav-tab nav-link {% if request.GET.subtab == 'vlan' %}active{% endif %}" href="?tab=slurpit_to_netbox&subtab=vlan">
      Vlans
    </a>
  </li>
</ul>

<div class="tab-content">
  {% if request.GET.subtab == 'ipam' or request.GET.subtab is None %}
    {% include "slurpit_netbox/mapping/ipam.html" %}
  {% elif request.GET.subtab == 'interface' %}
    {% include "slurpit_netbox/mapping/interface.html" %}
  {% elif request.GET.subtab == 'prefix' %}
    {% include "slurpit_netbox/mapping/prefix.html" %}
  {% elif request.GET.subtab == 'vlan' %}
    {% include "slurpit_netbox/mapping/vlan.html" %}
  {% endif %}
</div>

<style>
  .sub-nav .nav-tab.nav-link.active {
    border: 0px !important;
    border-bottom: 2px solid #0d6efd !important;
    font-weight: bold !important;
  }

  .sub-tab-content {
    padding: 1rem 0 !important;
  }
  .sub-nav {
    background: transparent !important;
  }

</style>