2025-03-14 15:21:14 +01:00
{% extends 'base.html' %}
2025-03-06 13:13:18 +01:00
{% load static %}
2025-04-07 16:36:33 +02:00
{% load contact_tags %}
2025-06-23 13:23:28 +02:00
{% load json_ld_tags %}
2025-01-28 13:55:43 +01:00
2025-03-28 15:46:43 +01:00
{% block title %}Managed {{ offering.service.name }} on {{ offering.cloud_provider.name }}{% endblock %}
2025-02-27 17:19:51 +01:00
2025-06-02 16:22:54 +02:00
{% block extra_js %}
< script defer src = "{% static " js / price-calculator . js " % } " > < / script >
< link rel = "stylesheet" type = "text/css" href = '{% static "css/price-calculator.css" %}' >
2025-06-23 13:23:28 +02:00
{% json_ld_structured_data %}
2025-06-02 16:22:54 +02:00
{% endblock %}
2025-01-28 13:55:43 +01:00
{% block content %}
2025-03-03 09:21:54 +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" > Managed {{ offering.service.name }} on {{ offering.cloud_provider.name }}< / h1 >
2025-03-03 09:21:54 +01:00
< div class = "text-gray-300 w-lg-37 mx-auto" >
2025-03-28 15:46:43 +01:00
< p class = "mb-0" > Details about {{ offering.service.name }} managed by VSHN on {{ offering.cloud_provider.name }}< / p >
2025-03-03 09:21:54 +01:00
< / div >
< / header >
< / div >
< / section >
2025-02-25 11:01:37 +01:00
< section class = "section" >
< div class = "container mx-auto px-20 px-lg-0 pt-80 pb-60" >
< div class = "row" >
<!-- Left Sidebar -->
< div class = "col-12 col-lg-3" >
< div class = "pr-lg-6" >
<!-- Logo -->
< div class = "mb-40 border rounded-4 p-4 d-flex align-items-center justify-content-center" style = "min-height: 160px;" >
{% if offering.service.logo %}
2025-02-28 14:13:51 +01:00
< a href = "{{ offering.service.get_absolute_url }}" >
< img class = "img-fluid w-100 w-lg-auto" src = "{{ offering.service.logo.url }}"
alt="{{ offering.service.name }} logo" style="max-height: 120px; object-fit: contain;">
< / a >
2025-02-25 11:01:37 +01:00
{% endif %}
< / div >
2025-01-28 13:55:43 +01:00
2025-03-06 13:13:18 +01:00
< div class = "mb-40" >
< h3 class = "fw-semibold mb-12" > Managed by< / h3 >
< a href = "https://www.vshn.ch/" target = "_blank" >
< img class = "img-fluid" src = "{% static " img / vshn-logo-wide . png " % } " alt = "VSHN logo" style = "max-height: 40px;" >
< / a >
< / div >
< div class = "mb-40" >
< h3 class = "fw-semibold mb-12" > Runs on< / h3 >
< a href = "{{ offering.cloud_provider.get_absolute_url }}" >
< img class = "img-fluid" src = "{{ offering.cloud_provider.logo.url }}" alt = "{{ offering.cloud_provider.name }} logo" style = "max-height: 40px;" >
< / a >
< / div >
2025-02-28 14:13:51 +01:00
<!-- External Links for Offering -->
{% if offering.external_links.exists %}
2025-02-25 11:01:37 +01:00
< div class = "mb-40" >
2025-02-28 14:13:51 +01:00
< h3 class = "fw-semibold mb-12" > External Links< / h3 >
2025-02-25 11:01:37 +01:00
< ul class = "list-unstyled space-y-12 fs-19 ps-0" >
2025-02-28 14:13:51 +01:00
{% for link in offering.external_links.all %}
2025-02-25 11:01:37 +01:00
< li >
2025-02-28 14:13:51 +01:00
< a class = "d-flex align-items-center text-gray-500 h-32 lh-32" href = "{{ link.url }}" target = "_blank" >
2025-02-25 11:01:37 +01:00
< span class = "pr-10" >
2025-02-28 14:13:51 +01:00
< svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "currentColor" class = "bi bi-box-arrow-up-right" viewBox = "0 0 16 16" >
2025-06-04 17:54:33 +02:00
< path fill-rule = "evenodd" d = "M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a.5.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" fill = "#9A63EC" / >
2025-02-28 14:13:51 +01:00
< path fill-rule = "evenodd" d = "M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" fill = "#9A63EC" / >
< / svg >
2025-02-25 11:01:37 +01:00
< / span >
2025-02-28 14:13:51 +01:00
< span > {{ link.description }}< / span >
2025-02-25 11:01:37 +01:00
< / a >
< / li >
{% endfor %}
< / ul >
< / div >
{% endif %}
2025-01-28 13:55:43 +01:00
2025-02-25 11:01:37 +01:00
<!-- Consulting Partners -->
{% if offering.service.consulting_partners.exists %}
< div class = "mb-40" >
< h3 class = "fw-semibold mb-12" > Consulting Partners< / h3 >
2025-03-06 14:58:32 +01:00
< p > If you want to get the most out of your managed {{ offering.service.name }}, our consulting partners can help you optimize your setup and application:< / p >
2025-02-25 11:01:37 +01:00
< ul class = "list-unstyled space-y-12 fs-19 ps-0" >
{% for partner in offering.service.consulting_partners.all %}
< li >
< a class = "d-flex align-items-center text-gray-500 h-32 lh-32" href = "{{ partner.get_absolute_url }}" >
< span class = "pr-10" >
< svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "currentColor" class = "bi bi-people-fill" viewBox = "0 0 16 16" >
< path d = "M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" fill = "#9A63EC" / >
< / svg >
< / span >
< span > {{ partner.name }}< / span >
< / a >
< / li >
{% endfor %}
< / ul >
< / div >
{% endif %}
2025-06-06 15:22:02 +02:00
<!-- Related Articles about Service -->
{% if service_articles %}
< div class = "mb-40" >
< h3 class = "fw-semibold mb-12" > Articles about {{ offering.service.name }}< / h3 >
< ul class = "list-unstyled space-y-12 fs-19 ps-0" >
{% for article in service_articles %}
< li >
< a class = "d-flex align-items-center text-gray-500 h-32 lh-32" href = "{{ article.get_absolute_url }}" >
< span class = "pr-10" >
< svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "currentColor" class = "bi bi-file-text" viewBox = "0 0 16 16" >
< path d = "M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z" fill = "#9A63EC" / >
< path d = "M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1z" fill = "#9A63EC" / >
< / svg >
< / span >
< span > {{ article.title }}< / span >
< / a >
< / li >
{% endfor %}
< / ul >
< / div >
{% endif %}
<!-- Related Articles about Provider -->
{% if provider_articles %}
< div class = "mb-40" >
< h3 class = "fw-semibold mb-12" > Articles about {{ offering.cloud_provider.name }}< / h3 >
< ul class = "list-unstyled space-y-12 fs-19 ps-0" >
{% for article in provider_articles %}
< li >
< a class = "d-flex align-items-center text-gray-500 h-32 lh-32" href = "{{ article.get_absolute_url }}" >
< span class = "pr-10" >
< svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "currentColor" class = "bi bi-file-text" viewBox = "0 0 16 16" >
< path d = "M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z" fill = "#9A63EC" / >
< path d = "M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1z" fill = "#9A63EC" / >
< / svg >
< / span >
< span > {{ article.title }}< / span >
< / a >
< / li >
{% endfor %}
< / ul >
< / div >
{% endif %}
2025-02-25 11:01:37 +01:00
< / div >
< / div >
<!-- Main Content -->
< div class = "col-12 col-lg-9" >
< div class = "pr-lg-32" >
<!-- Header -->
2025-05-07 09:53:34 +02:00
< div class = "pt-60 pb-lg-60" >
< div class = "row" >
< div class = "col-lg-8" >
< header >
< h2 class = "fs-50 fw-semibold lh-1 mb-12" > < a href = "{{ offering.service.get_absolute_url }}" class = "text-decoration-none" > Managed {{ offering.service.name }}< / a > < / h2 >
< / header >
< div class = "fs-19 text-gray-500" >
{% for category in offering.service.categories.all %}
< button class = "btn btn-tertiary btn-sm mr-12" > {{ category.full_path }}< / button >
{% endfor %}
< button class = "btn btn-tertiary btn-sm mr-12" > Managed by VSHN< / button >
< button class = "btn btn-tertiary btn-sm mr-12" > Running on {{ offering.cloud_provider.name }}< / button >
< / div >
{% if offering.short_description %}
< div class = "fs-19 text-gray-500" >
{{ offering.short_description|safe }}
< / div >
{% endif %}
< / div >
< div class = "col-lg-4 d-flex align-items-center justify-content-lg-end mt-4 mt-lg-0" >
< a href = "#plans" class = "btn btn-primary btn-lg px-4 py-2 fw-semibold d-flex align-items-center" >
< i class = "bi bi-cart me-2" > < / i > Get It
< / a >
< / div >
2025-02-25 11:01:37 +01:00
< / div >
< / div >
2025-01-28 13:55:43 +01:00
2025-02-28 14:13:51 +01:00
{% if offering.service.description %}
2025-03-07 15:21:09 +01:00
<!-- Service Overview -->
2025-02-28 14:13:51 +01:00
< div >
< h3 class = "fs-24 fw-semibold lh-1 mb-12" > Service Overview< / h3 >
< div class = "fs-19 text-gray-500" >
{{ offering.service.description|safe }}
< / div >
< / div >
{% endif %}
2025-03-07 15:21:09 +01:00
{% if offering.offer_description or offering.description %}
2025-02-28 14:13:51 +01:00
<!-- Offering Description -->
2025-02-25 11:01:37 +01:00
< div class = "pt-40 pt-lg-34" >
2025-02-28 14:13:51 +01:00
< h3 class = "fs-24 fw-semibold lh-1 mb-12" > Offering< / h3 >
{% if offering.description %}
2025-02-25 11:01:37 +01:00
< div class = "fs-19 text-gray-500" >
{{ offering.description|safe }}
< / div >
2025-02-28 14:13:51 +01:00
{% endif %}
{% if offering.offer_description %}
< div class = "fs-19 text-gray-500" >
{{ offering.offer_description.get_full_text|safe }}
< / div >
{% endif %}
2025-02-25 11:01:37 +01:00
< / div >
2025-03-07 15:21:09 +01:00
{% endif %}
2025-02-25 11:01:37 +01:00
2025-06-02 16:22:54 +02:00
<!-- Price Calculator -->
2025-03-10 14:39:48 +01:00
< div class = "pt-24" id = "plans" style = "scroll-margin-top: 30px;" >
2025-06-04 17:54:33 +02:00
{% if offering.msp == "VS" and price_calculator_enabled and pricing_data_by_group_and_service_level %}
2025-06-02 16:22:54 +02:00
<!-- Interactive Price Calculator -->
2025-06-04 16:39:16 +02:00
< h3 class = "fs-24 fw-semibold lh-1 mb-12" > Choose your Plan< / h3 >
2025-06-02 16:22:54 +02:00
< div class = "bg-light rounded-4 p-4 mb-4" >
< div class = "row" >
<!-- Calculator Controls -->
< div class = "col-12 col-lg-6" >
< div class = "card h-100" >
2025-06-04 16:39:16 +02:00
< div class = "card-body" >
2025-06-02 16:22:54 +02:00
<!-- CPU Slider -->
< div class = "mb-4" >
< label for = "cpuRange" class = "form-label d-flex justify-content-between" >
< span > vCPUs< / span >
< span class = "fw-bold" id = "cpuValue" > 2< / span >
< / label >
< input type = "range" class = "form-range" id = "cpuRange" min = "1" max = "32" value = "2" step = "1" >
< div class = "d-flex justify-content-between text-muted small" >
2025-06-04 17:39:53 +02:00
< span id = "cpuMinDisplay" > 1< / span >
< span id = "cpuMaxDisplay" > 32< / span >
2025-06-02 16:22:54 +02:00
< / div >
< / div >
<!-- Memory Slider -->
< div class = "mb-4" >
< label for = "memoryRange" class = "form-label d-flex justify-content-between" >
< span > Memory (GB)< / span >
< span class = "fw-bold" id = "memoryValue" > 4< / span >
< / label >
< input type = "range" class = "form-range" id = "memoryRange" min = "1" max = "128" value = "4" step = "1" >
< div class = "d-flex justify-content-between text-muted small" >
2025-06-04 17:39:53 +02:00
< span id = "memoryMinDisplay" > 1 GB< / span >
< span id = "memoryMaxDisplay" > 128 GB< / span >
2025-06-02 16:22:54 +02:00
< / div >
< / div >
<!-- Storage Slider -->
< div class = "mb-4" >
< label for = "storageRange" class = "form-label d-flex justify-content-between" >
< span > Storage (GB)< / span >
< span class = "fw-bold" id = "storageValue" > 20< / span >
< / label >
< input type = "range" class = "form-range" id = "storageRange" min = "10" max = "1000" value = "20" step = "10" >
< div class = "d-flex justify-content-between text-muted small" >
2025-06-04 17:39:53 +02:00
< span id = "storageMinDisplay" > 10 GB< / span >
< span id = "storageMaxDisplay" > 1000 GB< / span >
< / div >
< / div >
<!-- Instances Slider -->
< div class = "mb-4" >
< label for = "instancesRange" class = "form-label d-flex justify-content-between" >
< span > Instances< / span >
< span class = "fw-bold" id = "instancesValue" > 1< / span >
< / label >
< input type = "range" class = "form-range" id = "instancesRange" min = "1" max = "1" value = "1" step = "1" >
< div class = "d-flex justify-content-between text-muted small" >
< span id = "instancesMinDisplay" > 1< / span >
< span id = "instancesMaxDisplay" > 1< / span >
2025-06-02 16:22:54 +02:00
< / div >
< / div >
<!-- Service Level Selection -->
< div class = "mb-4" >
< label class = "form-label" > Service Level< / label >
< div class = "btn-group w-100" role = "group" id = "serviceLevelGroup" >
< input type = "radio" class = "btn-check" name = "serviceLevel" id = "serviceLevelBestEffort" value = "Best Effort" checked >
< label class = "btn btn-outline-primary" for = "serviceLevelBestEffort" > Best Effort< / label >
2025-06-19 17:05:49 +02:00
< input type = "radio" class = "btn-check" name = "serviceLevel" id = "serviceLevelGuaranteed" value = "Guaranteed Availability" >
2025-06-02 16:22:54 +02:00
< label class = "btn btn-outline-primary" for = "serviceLevelGuaranteed" > Guaranteed Availability< / label >
< / div >
< / div >
2025-06-19 16:19:59 +02:00
2025-06-20 09:41:47 +02:00
<!-- Addons Section - Hidden by default, shown by JS if addons exist -->
< div class = "mb-4" id = "addonsSection" style = "display: none;" >
2025-06-19 16:19:59 +02:00
< label class = "form-label" > Add-ons (Optional)< / label >
< div id = "addonsContainer" >
<!-- Add - ons will be dynamically populated here -->
< / div >
< / div >
2025-06-02 16:22:54 +02:00
<!-- Direct Plan Selection -->
< div class = "mb-4" >
< label for = "planSelect" class = "form-label" > Or choose a specific plan< / label >
< select class = "form-select" id = "planSelect" >
< option value = "" > Auto-select best matching plan< / option >
< / select >
2025-06-04 16:39:16 +02:00
< p > < small class = "form-text text-muted" > Selecting a plan will override the slider configuration< / small > < / p >
< p > < small class = "form-text text-muted" > < i class = "bi bi-info-circle me-1" > < / i > Interested in a custom plan? Let us know via the < a href = "#form" > contact form< / a > .< / small > < / p >
2025-06-02 16:22:54 +02:00
< / div >
< / div >
< / div >
< / div >
<!-- Results Panel -->
< div class = "col-12 col-lg-6" >
< div class = "card h-100 border-primary" >
< div class = "card-body" >
2025-06-04 16:39:16 +02:00
< h5 class = "card-title text-primary mb-4" > Your Plan< / h5 >
2025-05-23 17:43:29 +02:00
2025-06-02 16:22:54 +02:00
<!-- Plan Match Status -->
< div id = "planMatchStatus" class = "alert alert-info mb-3" >
< i class = "bi bi-info-circle me-2" > < / i >
< span > Finding best matching plan...< / span >
< / div >
<!-- Selected Plan Details -->
< div id = "selectedPlanDetails" style = "display: none;" >
< div class = "mb-3" >
< div class = "d-flex align-items-center mb-2" >
< span class = "badge me-2" id = "planGroup" > < / span >
< strong id = "planName" > < / strong >
< / div >
< small class = "text-muted" id = "planDescription" > < / small >
< / div >
< div class = "row mb-3" >
2025-06-04 17:39:53 +02:00
< div class = "col-3" >
2025-06-02 16:22:54 +02:00
< small class = "text-muted" > vCPUs< / small >
< div class = "fw-bold" id = "planCpus" > < / div >
< / div >
2025-06-04 17:39:53 +02:00
< div class = "col-3" >
2025-06-02 16:22:54 +02:00
< small class = "text-muted" > Memory< / small >
< div class = "fw-bold" id = "planMemory" > < / div >
< / div >
2025-06-04 17:39:53 +02:00
< div class = "col-3" >
< small class = "text-muted" > Instances< / small >
< div class = "fw-bold" id = "planInstances" > < / div >
< / div >
< / div >
< div class = "row mb-3" >
< div class = "col-12" >
2025-06-04 16:30:28 +02:00
< small class = "text-muted" > Service Level< / small >
< div class = "fw-bold" >
< a href = "https://products.vshn.ch/service_levels.html" target = "_blank" class = "text-decoration-none" id = "planServiceLevel" > < / a >
< / div >
< / div >
2025-06-02 16:22:54 +02:00
< / div >
<!-- Pricing Breakdown -->
< div class = "border-top pt-3" >
< div class = "d-flex justify-content-between mb-2" >
2025-06-04 16:22:47 +02:00
< span > Managed Service (incl. Compute)< / span >
< span class = "fw-bold" > CHF < span id = "managedServicePrice" > 0.00< / span > < / span >
2025-06-02 16:22:54 +02:00
< / div >
< div class = "d-flex justify-content-between mb-2" >
2025-06-04 16:22:47 +02:00
< span > Storage - < span id = "storageAmount" > 20< / span > GB< / span >
2025-06-02 16:22:54 +02:00
< span class = "fw-bold" > CHF < span id = "storagePrice" > 0.00< / span > < / span >
< / div >
2025-06-19 16:19:59 +02:00
<!-- Addons Pricing -->
< div id = "addonPricingContainer" >
<!-- Addon pricing will be dynamically added here -->
< / div >
2025-06-02 16:22:54 +02:00
< hr >
< div class = "d-flex justify-content-between" >
< span class = "fs-5 fw-bold" > Total Monthly Price< / span >
< span class = "fs-4 fw-bold text-primary" > CHF < span id = "totalPrice" > 0.00< / span > < / span >
< / div >
2025-06-04 16:30:28 +02:00
< small class = "text-muted mt-2 d-block" >
< i class = "bi bi-info-circle me-1" > < / i >
Monthly pricing based on 30 days (720 hours). Billing is conducted per hour.
< / small >
2025-05-23 17:43:29 +02:00
< / div >
2025-06-02 16:22:54 +02:00
< / div >
<!-- No Match Found -->
< div id = "noMatchFound" style = "display: none;" class = "alert alert-warning" >
< i class = "bi bi-exclamation-triangle me-2" > < / i >
No matching plan found for your requirements. Please adjust your configuration.
< / div >
2025-05-23 17:43:29 +02:00
< / div >
2025-02-25 11:01:37 +01:00
< / div >
2025-05-23 17:43:29 +02:00
< / div >
2025-06-02 16:22:54 +02:00
< / div >
< / div >
<!-- Order Button -->
< div class = "text-center mt-4" >
2025-06-04 16:58:47 +02:00
< a href = "#order-form" class = "btn btn-primary btn-lg px-5 py-3 fw-semibold" >
2025-06-02 16:22:54 +02:00
< i class = "bi bi-cart me-2" > < / i > Order This Configuration
< / a >
2025-05-23 17:43:29 +02:00
< / div >
2025-06-04 16:58:47 +02:00
<!-- Order Form Section -->
< div id = "order-form" class = "pt-40" style = "scroll-margin-top: 30px;" >
< h4 class = "fs-22 fw-semibold lh-1 mb-12" > Order Your Configuration< / h4 >
< div class = "row" >
< div class = "col-12" >
{% embedded_contact_form source="Configuration Order" service=offering.service offering_id=offering.id %}
< / div >
< / div >
< / div >
2025-05-23 17:43:29 +02:00
{% elif offering.plans.all %}
<!-- Traditional Plans -->
2025-06-23 11:37:26 +02:00
< h3 class = "fs-24 fw-semibold lh-1 mb-12" > Choose your Plan< / h3 >
< div class = "bg-light rounded-4 p-4 mb-4" >
< div class = "row" >
{% for plan in offering.plans.all %}
< div class = "col-12 {% if offering.plans.all|length == 1 %}col-lg-8 mx-auto{% elif offering.plans.all|length == 2 %}col-lg-6{% else %}col-lg-4{% endif %} mb-4" >
2025-06-23 13:13:27 +02:00
< div class = "card h-100 {% if plan.is_best %}border-success border-2 shadow-sm{% else %}border-primary shadow-sm{% endif %} position-relative" >
{% if plan.is_best %}
<!-- Best Plan Badge -->
< div class = "position-absolute top-0 start-50 translate-middle" style = "z-index: 10;" >
< span class = "badge bg-success px-3 py-2 fs-6 fw-bold shadow-sm text-nowrap" >
< i class = "bi bi-star-fill me-1" > < / i > Best Choice
< / span >
< / div >
{% endif %}
< div class = "card-body pt-3 d-flex flex-column" >
< h5 class = "card-title {% if plan.is_best %}text-success{% else %}text-primary{% endif %} mb-3 fw-bold" >
< i class = "bi bi-{% if plan.is_best %}award{% else %}box{% endif %} me-2" > < / i > {{ plan.name }}
2025-06-23 11:37:26 +02:00
< / h5 >
<!-- Plan Description -->
{% if plan.plan_description %}
< div class = "mb-3" >
< small class = "text-muted" > Description< / small >
< div class = "text-dark" >
{{ plan.plan_description.text|safe }}
< / div >
< / div >
{% endif %}
{% if plan.description %}
< div class = "mb-3" >
< small class = "text-muted" > Details< / small >
< div class = "text-dark" >
{{ plan.description|safe }}
< / div >
< / div >
{% endif %}
<!-- Pricing Information -->
{% if plan.plan_prices.exists %}
2025-06-23 13:13:27 +02:00
< div class = "{% if plan.is_best %}border-top border-success{% else %}border-top{% endif %} pt-3 mt-3 flex-grow-1 d-flex flex-column" >
2025-06-23 11:37:26 +02:00
< div class = "mb-2" >
2025-06-23 13:13:27 +02:00
< small class = "{% if plan.is_best %}text-success fw-semibold{% else %}text-muted{% endif %}" > Pricing< / small >
2025-06-23 11:37:26 +02:00
< / div >
2025-06-23 13:13:27 +02:00
< div class = "flex-grow-1" >
< div class = "d-flex justify-content-between mb-2" >
< span > Monthly Price< / span >
< div class = "text-end" >
{% for price in plan.plan_prices.all %}
< div class = "fs-5 fw-bold {% if plan.is_best %}text-success{% else %}text-primary{% endif %}" > {{ price.currency }} {{ price.amount }}< / div >
{% endfor %}
< / div >
< / div >
2025-06-23 11:37:26 +02:00
< / div >
< small class = "text-muted mt-2 d-block" >
< i class = "bi bi-info-circle me-1" > < / i >
Prices exclude VAT. Monthly pricing based on 30 days.
< / small >
< / div >
{% else %}
2025-06-23 13:13:27 +02:00
< div class = "{% if plan.is_best %}border-top border-success{% else %}border-top{% endif %} pt-3 mt-3 flex-grow-1 d-flex align-items-center justify-content-center" >
2025-06-23 11:37:26 +02:00
< div class = "text-center text-muted" >
< i class = "bi bi-envelope me-2" > < / i > Contact us for pricing details
< / div >
< / div >
{% endif %}
<!-- Plan Action Button -->
2025-06-23 13:13:27 +02:00
< div class = "text-center mt-auto pt-3" >
< a href = "#plan-order-form" class = "btn {% if plan.is_best %}btn-success btn-lg px-4 py-2 shadow{% else %}btn-primary btn-lg px-4 py-2{% endif %} fw-semibold w-100" data-plan-id = "{{ plan.id }}" data-plan-name = "{{ plan.name }}" onclick = "selectPlan(this)" >
2025-06-23 13:14:38 +02:00
< i class = "bi bi-{% if plan.is_best %}star-fill{% else %}cart{% endif %} me-2" > < / i > {% if plan.is_best %}Select Best Plan{% else %}Select This Plan{% endif %}
2025-06-23 11:37:26 +02:00
< / a >
< / div >
2025-05-23 17:43:29 +02:00
< / div >
2025-03-03 08:28:21 +01:00
< / div >
2025-01-28 13:55:43 +01:00
< / div >
2025-06-23 11:37:26 +02:00
{% empty %}
< div class = "col-12" id = "interest" style = "scroll-margin-top: 30px;" >
< div class = "alert alert-info" >
< p > No plans available yet.< / p >
< h4 class = "mb-3" > I'm interested in this offering< / h4 >
{% embedded_contact_form source="Offering Interest" service=offering.service offering_id=offering.id %}
< / div >
< / div >
{% endfor %}
2025-02-25 11:01:37 +01:00
< / div >
2025-06-23 11:37:26 +02:00
< / div >
<!-- Plan Order Forms -->
< div id = "plan-order-form" class = "pt-40" style = "scroll-margin-top: 30px;" >
< h4 class = "fs-22 fw-semibold lh-1 mb-12" > Order Your Plan< / h4 >
< div class = "row" >
< div class = "col-12" >
{% embedded_contact_form source="Plan Order" service=offering.service offering_id=offering.id choices=offering.plans.all choice_label="Select a Plan" %}
2025-05-23 17:43:29 +02:00
< / div >
2025-02-25 11:01:37 +01:00
< / div >
< / div >
2025-04-07 16:33:49 +02:00
{% else %}
2025-05-23 17:43:29 +02:00
<!-- No Plans Available -->
< div class = "col-12" id = "interest" style = "scroll-margin-top: 30px;" >
< h4 class = "mb-3" > I'm interested in this offering< / h4 >
{% load contact_tags %}
{% embedded_contact_form source="Offering Interest" service=offering.service offering_id=offering.id %}
< / div >
2025-04-07 16:33:49 +02:00
{% endif %}
2025-01-28 13:55:43 +01:00
< / div >
< / div >
2025-02-25 11:01:37 +01:00
< / div >
2025-01-28 13:55:43 +01:00
< / div >
< / div >
2025-02-25 11:01:37 +01:00
< / section >
2025-01-28 13:55:43 +01:00
{% endblock %}
