Split bulk edit content into tabs

netbox/templates/generic/object_bulk_edit.html

@@ -4,41 +4,62 @@
 
 {% block title %}Editing {{ table.rows|length }} {{ obj_type_plural|bettertitle }}{% endblock %}
 
+{% block tabs %}
+  <ul class="nav nav-tabs mb-3 px-3">
+    <li class="nav-item" role="presentation">
+      <button class="nav-link active" id="edit-form-tab" data-bs-toggle="tab" data-bs-target="#edit-form" type="button" role="tab" aria-controls="edit-form" aria-selected="true">
+        Bulk Edit
+      </button>
+    </li>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link" id="object-list-tab" data-bs-toggle="tab" data-bs-target="#object-list" type="button" role="tab" aria-controls="object-list" aria-selected="false">
+        Selected Objects
+        {% badge table.rows|length %}
+      </button>
+    </li>
+  </ul>
+{% endblock %}
+
 {% block content %}
-<form action="" method="post" class="form form-horizontal">
-    {% csrf_token %}
+  <div class="tab-content">
 
-    {% if request.POST.return_url %}
-        <input type="hidden" name="return_url" value="{{ request.POST.return_url }}" />
-    {% endif %}
+    {# Edit form #}
+    <div class="tab-pane show active" id="edit-form" role="tabpanel" aria-labelledby="edit-form-tab">
+      <form action="" method="post" class="form form-horizontal">
 
-    {% for field in form.hidden_fields %}
-        {{ field }}
-    {% endfor %}
+        {% csrf_token %}
+        {% if request.POST.return_url %}
+          <input type="hidden" name="return_url" value="{{ request.POST.return_url }}" />
+        {% endif %}
+        {% for field in form.hidden_fields %}
+          {{ field }}
+        {% endfor %}
 
-    <div class="row mb-3">
-        <div class="col col-md-8">
-          {% include 'inc/table.html' %}
-        </div>
-        <div class="col col-md-4">
-            <div class="card">
-                <h5 class="card-header">{% block form_title %}Attributes{% endblock %}</h5>
-                <div class="card-body small">
-                    {% for field in form.visible_fields %}
-                        {% if field.name in form.nullable_fields %}
-                            {% render_field field bulk_nullable=True %}
-                        {% else %}
-                            {% render_field field %}
-                        {% endif %}
-                    {% endfor %}
-                </div>
-                <div class="card-footer text-end">
-                    <a href="{{ return_url }}" class="btn btn-sm btn-outline-danger">Cancel</a>
-                    <button type="submit" name="_apply" class="btn btn-sm btn-primary">Apply</button>
-                </div>
+        <div class="row">
+          <div class="col col-md-12 col-lg-10 offset-lg-1">
+            {% for field in form.visible_fields %}
+                {% if field.name in form.nullable_fields %}
+                    {% render_field field bulk_nullable=True %}
+                {% else %}
+                    {% render_field field %}
+                {% endif %}
+            {% endfor %}
+
+
+            <div class="text-end">
+              <a href="{{ return_url }}" class="btn btn-sm btn-outline-danger">Cancel</a>
+              <button type="submit" name="_apply" class="btn btn-sm btn-primary">Apply</button>
             </div>
+          </div>
         </div>
+
+      </form>
+    </div>
+
+    {# Selected objects list #}
+    <div class="tab-pane" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
+      {% include 'inc/table.html' %}
     </div>
 
-</form>
-{% endblock content %}
+  </div>
+{% endblock %}