2025-03-14 15:21:14 +01:00
{% extends 'base.html' %}
2025-01-28 13:55:43 +01:00
2025-02-27 17:19:51 +01:00
{% block title %}Service Offerings{% endblock %}
2025-01-28 13:55:43 +01:00
{% block content %}
2025-02-25 10:45:03 +01:00
< section class = "section bg-primary-subtle" >
< div class = "container mx-auto px-20 px-lg-0 pt-40 pb-60" >
< header class = "section-primary__header text-center" >
2025-03-28 15:46:43 +01:00
< h1 class = "section-h1 fs-40 fs-lg-64 mb-24" > Service Offerings< / h1 >
2025-02-25 10:45:03 +01:00
< div class = "text-gray-300 w-lg-37 mx-auto" >
2025-02-25 17:19:57 +01:00
< p class = "mb-0" > Explore all available Offerings on Servala, with new ones added regularly. These ready-made packages bundle a Service on a Cloud Provider, making them ready for immediate use.< / p >
2025-02-25 10:45:03 +01:00
< / div >
< / header >
< / div >
< / section >
2025-01-28 13:55:43 +01:00
2025-02-25 10:45:03 +01:00
< section class = "section" >
< div class = "container-xl mx-auto px-3 px-lg-0 pt-60 pt-lg-80 pb-40" >
< div x-data = "{ open: window.innerWidth > 1024 }"
@resize.window="open = window.innerWidth > 1024 ? open : true" class="d-lg-flex">
<!-- Filters -->
< div class = "w-lg-20 flex-none" >
<!-- Mobile Menu -->
< div class = "page-action d-lg-none mb-40" >
< button @ click = "open = !open"
class="btn btn-outline-primary btn-md w-100 d-flex justify-content-center align-items-center"
type="button">
< svg width = "24" height = "24" viewBox = "0 0 24 24" fill = "none"
xmlns="http://www.w3.org/2000/svg">
< mask id = "mask0_115_3182" style = "mask-type:alpha" maskUnits = "userSpaceOnUse" x = "0"
y="0" width="24" height="24">
< rect width = "24" height = "24" fill = "#D9D9D9" / >
< / mask >
< g mask = "url(#mask0_115_3182)" >
< path d = "M7 18V16H17V18H7ZM5 13V11H19V13H5ZM3 8V6H21V8H3Z" fill = "#9A63EC" / >
< / g >
< / svg >
< span class = "ms-2" > Filters< / span >
< / button >
< / div >
<!-- Desktop View -->
< div x-cloak x-show = "open || window.innerWidth >= 1024" class = "w-lg-85" x-collapse >
< div class = "d-flex d-lg-none justify-content-between align-items-center mb-24"
role="button">
< h3 class = "sidebar-dropdown__title mb-0" > Filters< / h3 >
< span @ click = "open = false" >
< svg width = "24" height = "25" viewBox = "0 0 24 25" fill = "none"
xmlns="http://www.w3.org/2000/svg">
< mask id = "mask0_115_3177" style = "mask-type:alpha" maskUnits = "userSpaceOnUse"
x="0" y="0" width="24" height="25">
< rect y = "0.5" width = "24" height = "24" fill = "#D9D9D9" / >
< / mask >
< g mask = "url(#mask0_115_3177)" >
< path
d="M6.4 19.5L5 18.1L10.6 12.5L5 6.9L6.4 5.5L12 11.1L17.6 5.5L19 6.9L13.4 12.5L19 18.1L17.6 19.5L12 13.9L6.4 19.5Z"
fill="#160037" />
< / g >
< / svg >
< / span >
2025-01-28 13:55:43 +01:00
< / div >
2025-02-25 10:45:03 +01:00
< div class = "search-form position-relative mb-24" >
< form method = "get" x-data = "{submitForm() { $refs.filterForm.submit(); } }" x-ref = "filterForm" >
<!-- Search -->
< div class = "mb-24" >
< label for = "search" class = "d-none" > Search< / label >
< input type = "text" id = "search" class = "input-search" placeholder = "Search" name = "search" value = "{{ request.GET.search }}" >
< button class = "search-button position-absolute top-0 start-0 d-flex justify-content-center align-items-center border-0 bg-transparent p-0"
type="button" title="search">
< svg width = "24" height = "24" viewBox = "0 0 24 24" fill = "none" xmlns = "http://www.w3.org/2000/svg" >
< path d = "M17.5 17.5L22 22" stroke = "#9A63EC" stroke-width = "1.5" stroke-linecap = "round" stroke-linejoin = "round" / >
< path d = "M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z"
stroke="#9A63EC" stroke-width="1.5" stroke-linejoin="round" />
< / svg >
< / button >
< / div >
<!-- Service Filter -->
< div class = "pt-24 mb-24" >
< div class = "d-flex justify-content-between align-items-center h-33 mb-5px" role = "button" >
< h3 class = "sidebar-title mb-0" > Service< / h3 >
2025-01-28 13:55:43 +01:00
< / div >
< div >
2025-02-25 10:45:03 +01:00
< select class = "form-select" id = "service" name = "service" @ change = "submitForm()" >
< option value = "" > All Services< / option >
{% for service in services %}
< option value = "{{ service.id }}" { % if request . GET . service = = service . id | stringformat: ' i ' % } selected { % endif % } >
{{ service.name }}
< / option >
{% endfor %}
< / select >
2025-01-28 13:55:43 +01:00
< / div >
< / div >
2025-02-25 10:45:03 +01:00
<!-- Cloud Provider Filter -->
< div class = "pt-24 mb-24" >
< div class = "d-flex justify-content-between align-items-center h-33 mb-5px" role = "button" >
< h3 class = "sidebar-title mb-0" > Cloud Provider< / h3 >
< / div >
< div >
< select class = "form-select" id = "cloud_provider" name = "cloud_provider" @ change = "submitForm()" >
< option value = "" > All Providers< / option >
{% for provider in cloud_providers %}
< option value = "{{ provider.id }}" { % if request . GET . cloud_provider = = provider . id | stringformat: ' i ' % } selected { % endif % } >
{{ provider.name }}
< / option >
{% endfor %}
< / select >
< / div >
2025-01-28 13:55:43 +01:00
< / div >
2025-02-25 10:45:03 +01:00
<!-- Category Filter -->
< div class = "pt-24 mb-24" >
< div class = "d-flex justify-content-between align-items-center h-33 mb-5px" role = "button" >
< h3 class = "sidebar-title mb-0" > Category< / h3 >
< / div >
< div >
< select class = "form-select" id = "category" name = "category" @ change = "submitForm()" >
< option value = "" > All Categories< / option >
{% for category in categories %}
< option value = "{{ category.id }}" { % if request . GET . category = = category . id | stringformat: ' i ' % } selected { % endif % } >
{{ category.name }}
< / option >
{% for subcategory in category.children.all %}
< option value = "{{ subcategory.id }}" { % if request . GET . category = = subcategory . id | stringformat: ' i ' % } selected { % endif % } >
{{ subcategory.name }}
< / option >
{% endfor %}
{% endfor %}
< / select >
< / div >
2025-01-28 13:55:43 +01:00
< / div >
2025-02-25 10:45:03 +01:00
<!-- Filter Actions -->
< div class = "d-flex gap-2" >
< a href = "{% url 'services:offering_list' %}" class = "btn btn-outline-secondary btn-sm" > Clear< / a >
< / div >
< / form >
< / div >
< / div >
< / div >
<!-- Offerings Listing -->
< div class = "section__grid flex-1" >
< div class = "row" >
{% for offering in offerings %}
< div class = "col-12 col-md-6 col-lg-4 mb-30" >
< div class = "card h-100 d-flex flex-column" >
< div class = "card__content d-flex flex-column flex-grow-1" >
< div class = "card__header" >
< div class = "d-flex align-items-start mb-3" >
< div class = "me-3" >
{% if offering.service.logo %}
< img src = "{{ offering.service.logo.url }}"
alt="{{ offering.service.name }}"
style="max-height: 50px; max-width: 100px; object-fit: contain;">
{% endif %}
< / div >
< div >
< h3 class = "card__title" >
< a href = "{{ offering.get_absolute_url }}" class = "text-decoration-none" >
{{ offering.service.name }}
< / a >
< / h3 >
< div class = "d-flex align-items-center" >
{% if offering.cloud_provider.logo %}
< a href = "{{ offering.get_absolute_url }}" class = "me-2" >
< img src = "{{ offering.cloud_provider.logo.url }}"
alt="{{ offering.cloud_provider.name }}"
style="max-height: 30px; max-width: 100px; object-fit: contain;">
< / a >
{% else %}
< small class = "text-muted" >
{{ offering.cloud_provider.name }}
< / small >
{% endif %}
< / div >
< / div >
< / div >
< div class = "mb-3 card__subtitle" >
{% for category in offering.service.categories.all %}
< span > {{ category.full_path }}< / span >
2025-01-28 13:55:43 +01:00
{% endfor %}
2025-02-25 10:45:03 +01:00
< / div >
2025-01-28 13:55:43 +01:00
< / div >
< / div >
< / div >
< / div >
2025-02-25 10:45:03 +01:00
{% empty %}
< div class = "col-12" >
< div class = "alert alert-info" >
No service offerings found matching your criteria.
< / div >
2025-01-28 13:55:43 +01:00
< / div >
2025-02-25 10:45:03 +01:00
{% endfor %}
2025-01-28 13:55:43 +01:00
< / div >
2025-02-25 10:45:03 +01:00
< / div >
2025-01-28 13:55:43 +01:00
< / div >
< / div >
2025-02-25 10:45:03 +01:00
< / section >
2025-01-28 13:55:43 +01:00
{% endblock %}
