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

{% block title %}{% if obj.pk %}Editing {{ obj }}{% else %}Add an Access List to an Interface{% endif %}{% endblock %}

{% block form %}
{% render_errors form %}
<div class="field-group">
  <h4>Access List Details</h4>
  {% render_field form.access_list %}
  {% render_field form.direction %}
  {% render_field form.tags %}
</div>
<div class="field-group">
    <h4>Interface Assignment</h4>
        <ul class="nav nav-pills" role="tablist">
            <li class="nav-item" role="presentation">
                <button
                    role="tab"
                    type="button"
                    id="device_tab"
                    data-bs-toggle="tab"
                    class="nav-link {% if not form.initial.virtual_chassis and not form.initial.virtual_machine %}active{% endif %}"
                    data-bs-target="#device"
                    aria-controls="device"
                >
                    Device
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button
                    role="tab"
                    type="button"
                    id="vm_tab"
                    data-bs-toggle="tab"
                    class="nav-link {% if form.initial.virtual_machine %}active{% endif %}"
                    data-bs-target="#virtualmachine"
                    aria-controls="virtualmachine"
                >
                    Virtual Machine
                </button>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane{% if not form.initial.virtual_chassis and not form.initial.virtualmachine %} active{% endif %}" id="device">
                {% render_field form.device %}
                {% render_field form.interface %}
            </div>
            <div class="tab-pane{% if form.initial.virtual_machine %} active{% endif %}" id="virtualmachine">
                {% render_field form.virtual_machine %}
                {% render_field form.vminterface %}
            </div>
    </div>
</div>
<div class="field-group">
    <h4>Comments</h4>
    {% render_field form.comments %}
</div>
{% if form.custom_fields %}
    <div class="card">
        <h5 class="card-header">Custom Fields</h5>
        <div class="card-body">
            {% render_custom_fields form %}
        </div>
    </div>
{% endif %}
{% endblock %}
