Inline user info in service offering page

ref #243

src/servala/frontend/templates/frontend/organizations/service_instance_detail.html

@@ -102,8 +102,17 @@
                         </div>
                     </div>
                 {% endif %}
+                {% if control_plane.user_info %}
+                    <div class="card">
+                        <div class="card-header">
+                            <h4 class="card-title">{% translate "Service Provider Zone Information" %}</h4>
+                        </div>
+                        <div class="card-content">
                             {% include "includes/control_plane_user_info.html" with control_plane=instance.context.control_plane %}
                         </div>
+                    </div>
+                {% endif %}
+            </div>
             {% if instance.spec and spec_fieldsets %}
                 <div class="col-12">
                     <div class="card">

src/servala/frontend/templates/frontend/organizations/service_offering_detail.html

@@ -7,9 +7,14 @@
         {{ offering }}
     {% endblock page_title %}
 {% endblock html_title %}
-{% partialdef control-plane-info %}
+{% partialdef control-plane-info inline=True %}
-{% if selected_plane %}
+{% if selected_plane and selected_plane.user_info %}
+    <div class="row mt-3">
+        <div class="col-12">
+            <h6 class="mb-3">{% translate "Service Provider Zone Information" %}</h6>
             {% include "includes/control_plane_user_info.html" with control_plane=selected_plane %}
+        </div>
+    </div>
 {% endif %}
 {% endpartialdef %}
 {% partialdef service-form %}
@@ -31,7 +36,7 @@
 {% block content %}
     <section class="section">
         <div class="row">
-            <div class="col-12 col-lg-8">
+            <div class="col-12">
                 <div class="card">
                     <div class="card-header d-flex align-items-center">
                         {% if service.logo %}
@@ -64,6 +69,13 @@
                                 {{ select_form }}
                             </form>
                         {% endif %}
+                        {% if has_control_planes %}
+                            <div id="control-plane-info"
+                                 hx-trigger="load, change from:form"
+                                 hx-get="{{ request.path }}?fragment=control-plane-info">
+                                {% partial control-plane-info %}
+                            </div>
+                        {% endif %}
                         {% if service.external_links or offering.external_links %}
                             <div class="row mt-3">
                                 <div class="col-12">
@@ -83,13 +95,6 @@
                 </div>
                 <div id="service-form">{% partial service-form %}</div>
             </div>
-            <div class="col-12 col-lg-4">
-                {% if has_control_planes %}
-                    <div id="control-plane-info"
-                         hx-trigger="load, change from:form"
-                         hx-get="{{ request.path }}?fragment=control-plane-info">{% partial control-plane-info %}</div>
-                {% endif %}
-            </div>
         </div>
     </section>
 {% endblock content %}

src/servala/frontend/templates/includes/control_plane_user_info.html

@@ -1,14 +1,5 @@
 {% load i18n %}
-{% comment %}
-Reusable snippet for displaying ControlPlane user_info
-Usage: {% include "includes/control_plane_user_info.html" with control_plane=control_plane_object %}
-{% endcomment %}
 {% if control_plane.user_info %}
-    <div class="card">
-        <div class="card-header">
-            <h4 class="card-title">{% translate "Service Provider Zone Information" %}</h4>
-        </div>
-        <div class="card-content">
     <div class="table-responsive">
         <table class="table mb-0 table-lg">
             <tbody>
@@ -21,6 +12,4 @@ Usage: {% include "includes/control_plane_user_info.html" with control_plane=con
             </tbody>
         </table>
     </div>
-        </div>
-    </div>
 {% endif %}