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

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

{% block form %}
{% render_errors form %}
<div class="field-group">
  <h4>Access List Details</h4>
  {% render_field form.name %}
  {% render_field form.type %}
  {% render_field form.default_action %}
  {% render_field form.tags %}
</div>
<div class="field-group">
    <h4>Host 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_chassis %}active{% endif %}"
                  data-bs-target="#virtualchassis"
                  aria-controls="virtualchassis"
              >
                  Virtual Chassis
              </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.region %}
                {% render_field form.site_group %}
                {% render_field form.site %}
                {% render_field form.device %}
            </div>
            <div class="tab-pane{% if form.initial.virtual_chassis %} active{% endif %}" id="virtualchassis">
              {% render_field form.virtual_chassis %}
          </div>
            <div class="tab-pane{% if form.initial.virtual_machine %} active{% endif %}" id="virtualmachine">
                {% render_field form.cluster_type %}
                {% render_field form.cluster_group %}
                {% render_field form.cluster %}
                {% render_field form.virtual_machine %}
            </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 %}
