From fb11aa44074f730236530ebfe19b62fced3c5605 Mon Sep 17 00:00:00 2001
From: Tobias Kunze <r@rixx.de>
Date: Mon, 24 Mar 2025 10:50:48 +0100
Subject: [PATCH] Improve service detail template

---
 .../organizations/service_detail.html         | 125 +++++-------------
 .../frontend/organizations/services.html      |  43 +++---
 .../frontend/templates/frontend/profile.html  |   4 +-
 src/servala/frontend/views/service.py         |   8 +-
 4 files changed, 62 insertions(+), 118 deletions(-)

diff --git a/src/servala/frontend/templates/frontend/organizations/service_detail.html b/src/servala/frontend/templates/frontend/organizations/service_detail.html
index bdff6b9..674a714 100644
--- a/src/servala/frontend/templates/frontend/organizations/service_detail.html
+++ b/src/servala/frontend/templates/frontend/organizations/service_detail.html
@@ -18,7 +18,7 @@
                                 max-height: 48px">
                 {% endif %}
                 <div class="d-flex flex-column">
-                    <h4 class="card-title mb-0">{{ service.name }}</h4>
+                    <h4 class="mb-0">{{ service.name }}</h4>
                     <small class="text-muted">{{ service.category }}</small>
                 </div>
             </div>
@@ -28,99 +28,38 @@
                 </div>
             </div>
         </div>
-        <div class="card">
-            <div class="card-header">
-                <h4 class="card-title">{% trans "Available Offerings" %}</h4>
-            </div>
-            <div class="card-body">
-                {% for offering in service.offerings.all %}
-                    <div class="card mb-4">
-                        <div class="card-header bg-light">
-                            <div class="d-flex align-items-center">
-                                {% if offering.provider.logo %}
-                                    <img src="{{ offering.provider.logo.url }}"
-                                         alt="{{ offering.provider.name }}"
-                                         class="me-3"
-                                         style="max-height: 40px">
-                                {% endif %}
-                                <h5 class="mb-0">{{ service.name }} on {{ offering.provider.name }}</h5>
-                            </div>
-                        </div>
-                        <div class="card-body">
-                            <div class="row mb-3">
-                                <div class="col-md-8">
-                                    <p>{{ offering.description|default:"No description available." }}</p>
-                                </div>
-                                <div class="col-md-4">
-                                    <h6>{% trans "Control Planes" %}</h6>
-                                    <ul>
-                                        {% for control_plane in offering.control_planes.all %}
-                                            <li>{{ control_plane.name }}</li>
-                                        {% empty %}
-                                            <li>{% trans "No control planes available" %}</li>
-                                        {% endfor %}
-                                    </ul>
-                                </div>
-                            </div>
-                            <h6>{% trans "Available Plans" %}</h6>
-                            <div class="table-responsive">
-                                <table class="table table-hover">
-                                    <thead>
-                                        <tr>
-                                            <th>{% trans "Plan" %}</th>
-                                            <th>{% trans "Term" %}</th>
-                                            <th>{% trans "Features" %}</th>
-                                            <th>{% trans "Pricing" %}</th>
-                                            <th>{% trans "Actions" %}</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        {% for plan in plans %}
-                                            <tr>
-                                                <td>
-                                                    <strong>{{ plan.name }}</strong>
-                                                    {% if plan.description %}
-                                                        <br>
-                                                        <small>{{ plan.description }}</small>
-                                                    {% endif %}
-                                                </td>
-                                                <td>{{ plan.term }} {% trans "months" %}</td>
-                                                <td>
-                                                    {% if plan.features %}
-                                                        <ul class="mb-0">
-                                                            {% for feature, value in plan.features.items %}<li>{{ feature }}: {{ value }}</li>{% endfor %}
-                                                        </ul>
-                                                    {% else %}
-                                                        <span class="text-muted">{% trans "No features specified" %}</span>
-                                                    {% endif %}
-                                                </td>
-                                                <td>
-                                                    {% if plan.pricing %}
-                                                        <ul class="mb-0">
-                                                            {% for price_type, price in plan.pricing.items %}<li>{{ price_type }}: {{ price }}</li>{% endfor %}
-                                                        </ul>
-                                                    {% else %}
-                                                        <span class="text-muted">{% trans "No pricing specified" %}</span>
-                                                    {% endif %}
-                                                </td>
-                                                <td>
-                                                    <button class="btn btn-primary btn-sm">{% trans "Order" %}</button>
-                                                </td>
-                                            </tr>
-                                        {% empty %}
-                                            <tr>
-                                                <td colspan="5" class="text-center">{% trans "No plans available for this offering" %}</td>
-                                            </tr>
-                                        {% endfor %}
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
+        {% for offering in service.offerings.all %}
+            <div class="card col-6 col-lg-3 col-md-4">
+                <div class="card-header d-flex align-items-center">
+                    {% if offering.provider.logo %}
+                        <img src="{{ offering.provider.logo.url }}"
+                             alt="{{ offering.provider.name }}"
+                             class="me-3"
+                             style="max-width: 48px;
+                                    max-height: 48px">
+                    {% endif %}
+                    <div class="d-flex flex-column">
+                        <h4 class="mb-0">{{ offering.provider.name }}</h4>
                     </div>
-                {% empty %}
-                    <div class="alert alert-info">{% trans "No offerings available for this service yet." %}</div>
-                {% endfor %}
+                </div>
+                <div class="card-body">
+                    {% if offering.description %}
+                        <p class="card-text">{{ offering.description }}</p>
+                    {% elif offering.provider.description %}
+                        <p class="card-text">{{ offering.provider.description }}</p>
+                    {% endif %}
+                </div>
+                <div class="card-footer d-flex justify-content-between">
+                    <span></span>
+                    <a href="{{ offering.pk }}/" class="btn btn-light-primary">{% translate "Read More" %}</a>
+                </div>
             </div>
-        </div>
+        {% empty %}
+            <div class="card">
+                <div class="card-body">
+                    <p>{% translate "No offerings found." %}</p>
+                </div>
+            </div>
+        {% endfor %}
     </section>
 {% endblock content %}
diff --git a/src/servala/frontend/templates/frontend/organizations/services.html b/src/servala/frontend/templates/frontend/organizations/services.html
index 0e8fd16..56ddab0 100644
--- a/src/servala/frontend/templates/frontend/organizations/services.html
+++ b/src/servala/frontend/templates/frontend/organizations/services.html
@@ -18,30 +18,33 @@
         </div>
         {% for service in services %}
             <div class="card col-6 col-lg-3 col-md-4">
-                <div class="card-content">
-                    <div class="card-header d-flex align-items-center">
-                        {% if service.logo %}
-                            <img src="{{ service.logo.url }}"
-                                 alt="{{ service.name }}"
-                                 class="me-3"
-                                 style="max-width: 48px;
-                                        max-height: 48px">
-                        {% endif %}
-                        <div class="d-flex flex-column">
-                            <h4 class="card-title mb-0">{{ service.name }}</h4>
-                            <small class="text-muted">{{ service.category }}</small>
-                        </div>
-                    </div>
-                    <div class="card-body">
-                        {% if service.description %}<p class="card-text">{{ service.description }}</p>{% endif %}
-                    </div>
-                    <div class="card-footer d-flex justify-content-end">
-                        <a href="{{ service.pk }}/" class="btn btn-primary">{% translate "View Details" %}</a>
+                <div class="card-header d-flex align-items-center">
+                    {% if service.logo %}
+                        <img src="{{ service.logo.url }}"
+                             alt="{{ service.name }}"
+                             class="me-3"
+                             style="max-width: 48px;
+                                    max-height: 48px">
+                    {% endif %}
+                    <div class="d-flex flex-column">
+                        <h4 class="mb-0">{{ service.name }}</h4>
+                        <small class="text-muted">{{ service.category }}</small>
                     </div>
                 </div>
+                <div class="card-body">
+                    {% if service.description %}<p class="card-text">{{ service.description }}</p>{% endif %}
+                </div>
+                <div class="card-footer d-flex justify-content-between">
+                    <span></span>
+                    <a href="{{ service.pk }}/" class="btn btn-light-primary">{% translate "Read More" %}</a>
+                </div>
             </div>
         {% empty %}
-            <p>{% translate "No services found." %}</p>
+            <div class="card">
+                <div class="card-body">
+                    <p>{% translate "No services found." %}</p>
+                </div>
+            </div>
         {% endfor %}
     </section>
     <script src="{% static "js/autosubmit.js" %}" defer></script>
diff --git a/src/servala/frontend/templates/frontend/profile.html b/src/servala/frontend/templates/frontend/profile.html
index 2d6433a..db6eda4 100644
--- a/src/servala/frontend/templates/frontend/profile.html
+++ b/src/servala/frontend/templates/frontend/profile.html
@@ -73,7 +73,7 @@
             <div class="col-md-6 col-12">
                 <div class="card">
                     <div class="card-header">
-                        <h4 class="card-title">{% translate "Profile" %}</h4>
+                        <h4 class="">{% translate "Profile" %}</h4>
                     </div>
                     <div class="card-content">
                         <div class="card-body">
@@ -106,7 +106,7 @@
             <div class="col-md-6 col-12">
                 <div class="card">
                     <div class="card-header">
-                        <h4 class="card-title">{% translate "Account" %}</h4>
+                        <h4 class="">{% translate "Account" %}</h4>
                     </div>
                     <div class="card-content">
                         <div class="card-body">
diff --git a/src/servala/frontend/views/service.py b/src/servala/frontend/views/service.py
index f407250..5eac7e2 100644
--- a/src/servala/frontend/views/service.py
+++ b/src/servala/frontend/views/service.py
@@ -1,7 +1,7 @@
 from django.utils.functional import cached_property
 from django.views.generic import DetailView, ListView
 
-from servala.core.models import Plan, Service, ServiceOffering
+from servala.core.models import Service
 from servala.frontend.forms.service import ServiceFilterForm
 from servala.frontend.views.mixins import OrganizationViewMixin
 
@@ -43,6 +43,8 @@ class ServiceDetailView(OrganizationViewMixin, DetailView):
         return Service.objects.select_related("category").prefetch_related(
             "offerings",
             "offerings__provider",
-            "offerings__control_planes",
-            "offerings__plans",
         )
+
+
+class ServiceOfferingDetailView:
+    pass