{% extends "frontend/base.html" %}
{% load i18n %}
{% load static %}
{% load partials %}
{% block html_title %}
    {% block page_title %}
        {{ offering }}
    {% endblock page_title %}
{% endblock html_title %}
{% partialdef service-form %}
{% if service_form %}
    {% if form_error %}
        <div class="alert alert-danger">
            {% translate "Oops! Something went wrong with the service form generation. Please try again later." %}
        </div>
    {% else %}
        {% include "includes/form.html" with form=service_form %}
    {% endif %}
{% endif %}
{% endpartialdef %}
{% block content %}
    <section class="section">
        <div class="card">
            <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">{{ offering }}</h4>
                    <small class="text-muted">{{ offering.service.category }}</small>
                </div>
            </div>
            <div class="card-body">
                {% if offering.control_planes.all.count == 0 %}
                    <p>{% translate "We currently cannot offer this service, sorry!" %}</p>
                {% else %}
                    <form hx-trigger="change"
                          hx-get="{{ request.path }}?fragment=service-form"
                          hx-target="#service-form">
                        {{ select_form }}
                    </form>
                    <div id="service-form">{% partial service-form %}</div>
                {% endif %}
            </div>
        </div>
    </section>
{% endblock content %}
