{% extends "frontend/base.html" %}
{% load i18n %}
{% load static %}
{% load partials %}
{% block html_title %}
    {% block page_title %}
        {{ offering }}
    {% endblock page_title %}
{% endblock html_title %}
{% partialdef control-plane-info %}
{% if selected_plane %}
    {% include "includes/control_plane_user_info.html" with control_plane=selected_plane %}
{% endif %}
{% endpartialdef %}
{% partialdef service-form %}
{% if service_form %}
    <div class="card">
        <div class="card-header d-flex align-items-center"></div>
        <div class="card-body">
            {% 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/tabbed_fieldset_form.html" with form=service_form %}
            {% endif %}
        </div>
    </div>
{% endif %}
{% endpartialdef %}
{% block content %}
    <section class="section">
        <div class="row">
            <div class="col-12 col-lg-8">
                <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.description %}
                            <div class="row mb-3">
                                <div class="col-12">
                                    <p>{{ offering.description|urlize }}</p>
                                </div>
                            </div>
                        {% endif %}
                        {% if not has_control_planes %}
                            <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"
                                  hx-swap="outerHTML">
                                {{ select_form }}
                            </form>
                        {% endif %}
                        {% if service.external_links %}
                            <div class="row mt-3">
                                <div class="col-12">
                                    <h6 class="mb-3">{% translate "External Links" %}</h6>
                                    <div class="d-flex flex-wrap gap-2">
                                        {% for link in service.external_links %}
                                            <a href="{{ link.url }}"
                                               target="_blank"
                                               rel="noopener noreferrer"
                                               class="btn btn-outline-primary btn-sm">
                                                {{ link.title }}
                                                <i class="bi bi-box-arrow-up-right ms-1"></i>
                                            </a>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
                <div id="service-form">{% partial service-form %}</div>
            </div>
            <div class="col-12 col-lg-4">
                {% if has_control_planes %}
                    <div id="control-plane-info"
                         hx-trigger="load, change from:form"
                         hx-get="{{ request.path }}?fragment=control-plane-info">{% partial control-plane-info %}</div>
                {% endif %}
            </div>
        </div>
    </section>
{% endblock content %}
