{% 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 inline=True %}
{% if selected_plane and selected_plane.user_info %}
    <div class="mt-3">
        <div class="border-top pt-3">
            {% include "includes/control_plane_user_info.html" with control_plane=selected_plane %}
        </div>
    </div>
{% endif %}
{% endpartialdef %}
{% partialdef service-form %}
{% if service_form or custom_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 %}
                {% translate "Create" as create_label %}
                {% include "includes/tabbed_fieldset_form.html" with form=custom_service_form expert_form=service_form form_submit_label=create_label hide_form_errors=True %}
            {% endif %}
        </div>
    </div>
{% endif %}
{% endpartialdef %}
{% block content %}
    <section class="section">
        {% if not has_control_planes %}
            <!-- No Service Available Message -->
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-warning d-flex align-items-center" role="alert">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
                        <div>
                            <strong>{% translate "Service Unavailable" %}</strong>
                            <p class="mb-0">
                                {% translate "We currently cannot offer this service. Please check back later or contact support for more information." %}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        {% else %}
            <!-- Two Column Layout -->
            <div class="row g-3">
                <!-- Left Column: Service Provider Zone -->
                <div class="col-12 col-lg-6">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="mb-0">{% translate "Service Provider Zone" %}</h5>
                        </div>
                        <div class="card-body">
                            <form hx-trigger="change"
                                  hx-get="{{ request.path }}?fragment=service-form"
                                  hx-target="#service-form"
                                  hx-swap="outerHTML"
                                  class="control-plane-select-form">
                                {{ select_form }}
                            </form>
                            <style>
                                .control-plane-select-form .form-label {
                                    display: none;
                                }
                            </style>
                            <div id="control-plane-info"
                                 hx-trigger="load, change from:form"
                                 hx-get="{{ request.path }}?fragment=control-plane-info">
                                {% partial control-plane-info %}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Right Column: Service Information -->
                <div class="col-12 col-lg-6">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="mb-0">{% translate "Service Information" %}</h5>
                        </div>
                        <div class="card-body">
                            {% if offering.service.logo or offering.description %}
                                <div class="d-flex gap-3 mb-3">
                                    {% if offering.service.logo %}
                                        <div class="flex-shrink-0">
                                            <img src="{{ offering.service.logo.url }}"
                                                 alt="{{ offering.service.name }}"
                                                 style="max-width: 64px;
                                                        max-height: 64px">
                                        </div>
                                    {% endif %}
                                    {% if offering.description %}
                                        <div class="flex-grow-1">
                                            <p class="mb-0">{{ offering.description|urlize }}</p>
                                        </div>
                                    {% endif %}
                                </div>
                            {% endif %}
                            {% if offering.service.external_links or offering.external_links %}
                                {% if offering.service.logo or offering.description %}<hr class="my-3">{% endif %}
                                <h6 class="mb-3">{% translate "External Links" %}</h6>
                                <div class="d-flex flex-wrap gap-2">
                                    {% for link in offering.service.external_links %}
                                        {% include "includes/external_link.html" %}
                                    {% endfor %}
                                    {% for link in offering.external_links %}
                                        {% include "includes/external_link.html" %}
                                    {% endfor %}
                                </div>
                            {% else %}
                                {% if not offering.service.logo and not offering.description %}
                                    <p class="text-muted mb-0">{% translate "No additional information available." %}</p>
                                {% endif %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
        <form class="form form-vertical crd-form" method="post" novalidate>
            {% csrf_token %}
            {% if plan_form.errors or service_form.errors or custom_service_form.errors %}
                <div class="row mt-3">
                    <div class="col-12">
                        {% include "frontend/forms/errors.html" with form=plan_form %}
                        {% if service_form %}
                            {% include "frontend/forms/errors.html" with form=service_form %}
                        {% endif %}
                        {% if custom_service_form %}
                            {% include "frontend/forms/errors.html" with form=custom_service_form %}
                        {% endif %}
                    </div>
                </div>
            {% endif %}
            <!-- Compute Plan Selection -->
            {% if context_object %}
                {% if not has_available_plans %}
                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="alert alert-warning d-flex align-items-center" role="alert">
                                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                                <div>
                                    <strong>{% translate "No Compute Plans Available" %}</strong>
                                    <p class="mb-0">
                                        {% translate "Service instances cannot be created for this offering because no billing plans are configured. Please contact support." %}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">{% translate "Select Compute Plan" %}</h5>
                                </div>
                                <div class="card-body">
                                    {% include "includes/plan_selection.html" with plan_form=plan_form storage_plan=storage_plan %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            {% endif %}
            <!-- Service Form -->
            <div class="row mt-3">
                <div class="col-12">
                    <fieldset {% if context_object and not has_available_plans %}disabled{% endif %}>
                        <div id="service-form">{% partial service-form %}</div>
                    </fieldset>
                </div>
            </div>
        </form>
    </section>
{% endblock content %}
{% block extra_js %}
    {% if wildcard_dns and organization_namespace %}
        <script>
            const fqdnConfig = {
                wildcardDns: '{{ wildcard_dns }}',
                namespace: '{{ organization_namespace }}'
            };
        </script>
        <script defer src="{% static "js/fqdn.js" %}"></script>
    {% endif %}
    <script>
        // Initialize Bootstrap popovers for help text
        document.addEventListener('DOMContentLoaded', function() {
            const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
            [...popoverTriggerList].map(el => new bootstrap.Popover(el));
        });

        // Re-initialize popovers after HTMX swaps
        document.body.addEventListener('htmx:afterSwap', function(event) {
            if (event.detail.target.id === 'control-plane-info') {
                const popoverTriggerList = event.detail.target.querySelectorAll('[data-bs-toggle="popover"]');
                [...popoverTriggerList].map(el => new bootstrap.Popover(el));
            }
        });
    </script>
{% endblock extra_js %}
