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

{% block form %}
    <div class="field-group mb-3">
        <h4>VLAN</h4>
        {% 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 mb-3">
        <h4>Tenancy</h4>
        {% render_field form.tenant_group %}
        {% render_field form.tenant %}
    </div>
    <div class="field-group mb-3">
        <h4>Assignment</h4>
        {% with site_tab_active=form.initial.site %}
            <ul class="nav nav-tabs mb-3" 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">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">Site</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane{% if not site_tab_active %} active{% endif %}" id="group">
                    {% render_field form.scope_type %}
                    {% render_field form.group %}
                </div>
                <div class="tab-pane{% if site_tab_active %} active{% endif %}" id="site">
                    {% render_field form.region %}
                    {% render_field form.sitegroup %}
                    {% render_field form.site %}
                </div>
            </div>
        {% endwith %}
    </div>
    {% if form.custom_fields %}
        <div class="field-group">
            <h4>Custom Fields</h4>
            {% render_custom_fields form %}
        </div>
    {% endif %}
{% endblock %}
