{% extends "gui/forms/basic_form.html" %}
{% load common %}

{% block form_body %}
    <div class="modal-body form-tabs">
        <div id="form_content" class="clearfix">
            <ul class="nav nav-tabs">
                {% for tab_name, tab in form.tabs.items %}
                    <li
                        {% if forloop.first %}class="active"{% endif %}
                        {% if tab.tooltip %}
                            data-toggle="tooltip"
                            data-placement="top"
                            title="{{ tab.tooltip }}"
                        {% endif %}
                    >
                        <a data-toggle="tab" href="#tab-{{ tab_name }}">{{ tab.verbose_name }}</a>
                    </li>
                {% endfor %}
            </ul>
            <div class="tab-content">
                {% for tab_name, tab in form.tabs.items %}
                    <div
                        id="tab-{{ tab_name }}"
                        class="tab-pane fade {% if forloop.first %}in active{% endif %}"
                    >
                        <div class="row">
                            <div class="col-lg-6">
                                {% for field in form %}
                                    {% if field.html_name in tab.fields %}
                                        {% include "gui/forms/form_field.html" %}
                                    {% endif %}
                                {% endfor %}
                            </div>
                            <div class="col-lg-6">
                                {% if tab.description %}
                                    {{ tab.description|markdown }}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}