{% extends "generic/object_create.html" %}
{% load static %}
{% load buttons %}
{% load form_helpers %}
{% load seed_helpers %}

{% block form %}
    <!-- General Fields Panel -->
    <div class="card">
        <div class="card-header">
            <strong>General</strong>
        </div>
        <div class="card-body">
            {% for field_name in form.fieldsets.0.1 %}
                {% render_field form|get_fieldset_field:field_name %}
            {% endfor %}
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <strong>Object Configuration</strong>
        </div>
        <div class="card-body">
            {% with power_feed_errors=form.power_feed.errors device_errors=form.device.errors power_panel_errors=form.power_panel.errors rack_errors=form.rack.errors %}

                {# Add data attributes for JavaScript to use on a container div instead of body #}
                <div data-device-errors="{{ device_errors|yesno:'true,false' }}" data-has-device="{{ obj.device|yesno:'true,false' }}" data-has-power-feed="{{ obj.power_feed|yesno:'true,false' }}" data-has-power-panel="{{ obj.power_panel|yesno:'true,false' }}" data-has-rack="{{ obj.rack|yesno:'true,false' }}" data-power-feed-errors="{{ power_feed_errors|yesno:'true,false' }}" data-power-panel-errors="{{ power_panel_errors|yesno:'true,false' }}" data-rack-errors="{{ rack_errors|yesno:'true,false' }}" id="object-tabs-container">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a aria-controls="rack" class="nav-link" data-bs-toggle="tab" href="#rack" role="tab">Rack</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a aria-controls="device" class="nav-link" data-bs-toggle="tab" href="#device" role="tab">Device</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a aria-controls="power-panel" class="nav-link" data-bs-toggle="tab" href="#power-panel" role="tab">Power Panel</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a aria-controls="power-feed" class="nav-link" data-bs-toggle="tab" href="#power-feed" role="tab">Power Feed</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane" id="rack" role="tabpanel">{% render_field form.rack %}</div>
                        <div class="tab-pane" id="device" role="tabpanel">{% render_field form.device %}</div>
                        <div class="tab-pane" id="power-panel" role="tabpanel">{% render_field form.power_panel %}</div>
                        <div class="tab-pane" id="power-feed" role="tabpanel">{% render_field form.power_feed %}</div>
                    </div>
                </div>
            {% endwith %}

            <!-- Object orientation field outside of tabs so it's always available -->
            {% render_field form.object_orientation %}
        </div>
    </div>
    {% include "inc/extras_features_edit_form_fields.html" %}
{% endblock form %}

{% block javascript %}
    {{ block.super }}
    <script src="{% static 'nautobot_floor_plan/js/floorplantile.js' %}"></script>
{% endblock javascript %}