{% extends 'nb_service/3.x/obj_edit.html' %}
{% load static %}
{% load form_helpers %}
{% load helpers %}

{% block form %}
    <div class="panel panel-default">
        <div class="panel-body">
            {% render_field form.service %}
        </div>
    </div>
    <div class="field-group my-5">
        <div class="row mb-2">
            <h5 class="offset-sm-3">Object Assignment</h5>
        </div>
        <div class="row mb-2">
            <div class="offset-sm-3">
                <ul class="nav nav-pills" 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.virtual_machine and not form.initial.application %}active{% endif %}">
                            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.virtual_machine  %}active{% endif %}">
                            Virtual Machine
                        </button>
                    </li>
                    <li role="presentation" class="nav-item">
                        <button role="tab" type="button" id="app_tab" data-bs-toggle="tab" aria-controls="app" data-bs-target="#app" class="nav-link {% if form.initial.application %}active{% endif %}">
                            Application
                        </button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tab-content p-0 border-0">
            <div class="tab-pane {% if not form.initial.virtual_machine and not form.initial.application %}active{% endif %}" id="device" role="tabpanel" aria-labeled-by="device_tab">
                {% render_field form.device %}
            </div>
            <div class="tab-pane {% if form.initial.virtual_machine %}active{% endif %}" id="vm" role="tabpanel" aria-labeled-by="vm_tab">
                {% render_field form.virtual_machine %}
            </div>
            <div class="tab-pane {% if form.initial.application %}active{% endif %}" id="app" role="tabpanel" aria-labeled-by="app_tab">
                {% render_field form.application %}
            </div>
        </div>
    </div>
{% endblock %}
