website/hub/services/templates/services/service_list.html

{% extends 'base.html' %}
{% load static %}
{% load contact_tags %}

{% block title %}Services{% endblock %}
{% block meta_description %}Explore all available cloud services on Servala, with new services added regularly to help businesses find the right solutions.{% endblock %}

{% block content %}
<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">
            <h1 class="section-h1 fs-40 fs-lg-64 mb-24">Services</h1>
            <div class="text-gray-300 w-lg-37 mx-auto">
                <p class="mb-0">Explore all available Services on Servala, with new ones added regularly.</p>
            </div>
        </header>
    </div>
</section>

<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>
                    </div>

                    <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>

                            <!-- 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 available_categories %}
                                            <option value="{{ category.id }}" {% if request.GET.category == category.id|stringformat:'i' %}selected{% endif %}>
                                                {{ category.name }}
                                            </option>
                                            {% if category.available_children %}
                                                {% for subcategory in category.available_children %}
                                                    <option value="{{ subcategory.id }}" {% if request.GET.category == subcategory.id|stringformat:'i' %}selected{% endif %}>
                                                        &nbsp;&nbsp;&nbsp;{{ subcategory.name }}
                                                    </option>
                                                {% endfor %}
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <!-- Consulting Partners 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">Consulting Partners</h3>
                                </div>
                                <div>
                                    <select class="form-select" id="consulting_partner" name="consulting_partner" @change="submitForm()">
                                        <option value="">All Partners</option>
                                        {% for partner in available_consulting_partners %}
                                            <option value="{{ partner.id }}" {% if request.GET.consulting_partner == partner.id|stringformat:'i' %}selected{% endif %}>
                                                {{ partner.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <!-- Cloud Providers 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 Providers</h3>
                                </div>
                                <div>
                                    <select class="form-select" id="cloud_provider" name="cloud_provider" @change="submitForm()">
                                        <option value="">All Providers</option>
                                        {% for provider in available_cloud_providers %}
                                            <option value="{{ provider.id }}" {% if request.GET.cloud_provider == provider.id|stringformat:'i' %}selected{% endif %}>
                                                {{ provider.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <!-- Filter Actions -->
                            <div class="d-flex gap-2">
                                <a href="{% url 'services:service_list' %}" class="btn btn-outline-secondary btn-sm">Clear</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Service Listing -->
            <div class="section__grid flex-1">
                <div class="row">
                    {% for service in services %}
                    <div class="col-12 col-md-6 col-lg-4 mb-30">
                        <div class="card {% if service.is_featured %}card-featured{% endif %} h-100 d-flex flex-column clickable-card"
                             onclick="cardClicked(event, '{% if request.GET.cloud_provider %}{% for offering in service.offerings.all %}{% if offering.cloud_provider.id|stringformat:"i" == request.GET.cloud_provider %}{% url "services:offering_detail" offering.cloud_provider.slug service.slug %}{% endif %}{% endfor %}{% else %}{{ service.get_absolute_url }}{% endif %}')">
                            {% if service.get_logo or service.is_featured or service.is_coming_soon %}
                            <div class="d-flex justify-content-between mb-3">
                                {% if service.get_logo %}
                                <div class="card__image flex-shrink-0">
                                    <img src="{{ service.get_logo.url }}" alt="{{ service.name }} logo" class="img-fluid">
                                </div>
                                {% endif %}
                                {% if service.is_featured %}
                                <div>
                                    <span class="btn btn-primary btn-sm">Featured</span>
                                </div>
                                {% elif service.is_coming_soon %}
                                <div>
                                    <span class="btn btn-secondary btn-sm">Coming Soon</span>
                                </div>
                                {% endif %}
                            </div>
                            {% endif %}
                            <div class="card__content d-flex flex-column flex-grow-1">
                                <div class="card__header">
                                    <h3 class="card__title {% if service.is_coming_soon %}text-black-50{% endif %}">
                                        {{ service.name }}
                                    </h3>
                                    <p class="card__subtitle">
                                        {% for category in service.categories.all %}
                                        <span>{{ category.full_path }}</span>
                                        {% endfor %}
                                    </p>
                                    {% if service.tagline %}
                                    <p class="card__tagline fst-italic text-muted">
                                        <small>"{{ service.tagline }}"</small>
                                    </p>
                                    {% endif %}
                                </div>
                                <div class="card__desc flex-grow-1">
                                    <p class="mb-0">{{ service.description|safe|truncatewords:30 }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <div class="col-12">
                        <div class="alert alert-info">
                            No services found matching your criteria.
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section bg-primary-subtle">
    <div class="section-wrapper container mx-auto px-20 px-lg-0 pt-80 pb-120">
      <div class="row">
        <div class="col-12 col-lg-4 mb-30 mb-lg-0">
          <div class="section-logo mx-auto">
            <img class="img-fluid" src="{% static "img/section-logo.png" %}" alt="Sir Vala mascot">
          </div>
        </div>
        <div class="col-12 col-lg-8">
          <header class="section-primary__header">
            <h2 class="section-h1 fs-40 fs-lg-60">Missing a Service?</h2>
            <div class="section-primary__desc">
              <p>You miss a service on this list? Let us know which one and we'll get in touch with you!</p>
            </div>
            <div>
                {% embedded_contact_form source="Missing Service" %}
            </div>
          </header>
        </div>
      </div>
    </div>
  </section>
{% endblock %}