{% extends 'base.html' %}

{% block title %}Service {{ service.name }}{% 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">{{ service.name }} on Servala</h1>
            <div class="text-gray-300 w-lg-37 mx-auto">
                <p class="mb-0">Details about the service {{ service.name }} on Servala</p>
            </div>
        </header>
    </div>
</section>

<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 service.get_logo %}
                            <img class="img-fluid w-100 w-lg-auto" src="{{ service.get_logo.url }}" alt="{{ service.name }} logo" style="max-height: 120px; object-fit: contain;">
                        {% endif %}
                    </div>

                    <!-- Offerings -->
                    {% if service.offerings.exists %}
                    <div class="mb-40">
                        <h3 class="fw-semibold mb-12">Cloud Providers</h3>
                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
                            {% for offering in service.offerings.all|dictsort:"cloud_provider.order" %}
                            {% if not offering.cloud_provider.disable_listing %}
                            <li>
                                <a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{% url 'services:offering_detail' offering.cloud_provider.slug offering.service.slug %}">
                                    <span class="pr-10">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-fill" viewBox="0 0 16 16">
                                            <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383" fill="#9A63EC"/>
                                        </svg>
                                    </span>
                                    <span>{{ offering.cloud_provider.name }}</span>
                                </a>
                            </li>
                            {% endif %}
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}

                    <!-- Consulting Partners -->
                    {% if service.consulting_partners.exists %}
                    <div class="mb-40">
                        <h3 class="fw-semibold mb-12">Consulting Partners</h3>
                        <p>If you want to get the most out of your {{ service.name }}, our consulting partners can help you optimize your setup and application:</p>
                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
                            {% for partner in 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 %}

                    <!-- External Links -->
                    {% if service.external_links.exists %}
                    <div class="mb-40">
                        <h3 class="fw-semibold mb-12">External Links</h3>
                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
                            {% for link in service.external_links.all %}
                            <li>
                                <a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{{ link.url }}" target="_blank">
                                    <span class="pr-10">
                                        <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">
                                            <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 16h10a1.5 1.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"/>
                                            <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>
                                    </span>
                                    <span>{{ link.description }}</span>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}

                    <!-- Related Articles -->
                    {% if related_articles %}
                    <div class="mb-40">
                        <h3 class="fw-semibold mb-12">Related Articles</h3>
                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
                            {% for article in related_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 %}
                </div>
            </div>

            <!-- Main Content -->
            <div class="col-12 col-lg-9">
                <div class="pr-lg-32">
                    <!-- Header -->
                    <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">{{ service.name }}</h2>
                                </header>
                                <div class="fs-19 text-gray-500">
                                    {% for category in service.categories.all %}
                                        <button class="btn btn-tertiary btn-sm mr-12">{{ category.full_path }}</button>
                                    {% endfor %}
                                </div>
                                {% if service.tagline %}
                                <div class="mt-3">
                                    <p class="fst-italic text-muted fs-19">
                                        "{{ service.tagline }}"
                                    </p>
                                </div>
                                {% endif %}
                            </div>

                            <div class="col-lg-4 d-flex align-items-center justify-content-lg-end mt-4 mt-lg-0">
                                <a href="#getit" 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>
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="pt-40 pt-lg-34">
                        <h3 class="fs-24 fw-semibold lh-1 mb-12">Overview</h3>
                        <div class="fs-19 text-gray-500">
                            {{ service.description|safe }}
                        </div>
                    </div>

                    <!-- Features -->
                    {% if service.features %}
                    <div class="pt-24">
                        <h3 class="fs-24 fw-semibold lh-1 mb-12">Features</h3>
                        <div class="page-content fs-19 text-gray-500">
                            {{ service.features|safe }}
                        </div>
                    </div>
                    {% endif %}

                    <!-- CTA -->
                    <div class="pt-24" id="getit">
                        <div class="page-action">
                            {% if service.offerings.exists %}
                            <h3 class="fs-24 fw-semibold lh-1 mb-12">Get it on</h3>
                            <p>Choose one of our trusted service providers</p>
                            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                                {% for offering in service.offerings.all %}
                                {% if not offering.cloud_provider.disable_listing %}
                                    <div class="col">
                                        <a href="{% url 'services:offering_detail' offering.cloud_provider.slug offering.service.slug %}#plans"
                                           class="text-decoration-none" style="display: block;">
                                            <div class="card h-100 clickable-card">
                                                <div class="card-body text-center">
                                                    {% if offering.cloud_provider.get_logo %}
                                                        <div class="mb-3 d-flex align-items-center justify-content-center" style="height: 80px;">
                                                            <img src="{{ offering.cloud_provider.get_logo.url }}" alt="{{ offering.cloud_provider.name }} logo" 
                                                                 class="img-fluid" style="max-height: 60px; object-fit: contain;">
                                                        </div>
                                                    {% else %}
                                                        <div class="mb-3 d-flex align-items-center justify-content-center" style="height: 80px;">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-cloud-fill text-primary" viewBox="0 0 16 16">
                                                                <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383"/>
                                                            </svg>
                                                        </div>
                                                    {% endif %}
                                                    <h5 class="card-title mb-0 fw-semibold">{{ offering.cloud_provider.name }}</h5>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                {% endif %}
                                {% endfor %}
                            </div>
                            {% else %}
                                <div class="pt-40">
                                    <h3 class="fs-24 fw-semibold lh-1 mb-12">Contact Us About This Service</h3>
                                    <div class="row">
                                        <div class="col-12 mb-30">
                                            {% load contact_tags %}
                                            {% embedded_contact_form source="Service Detail" service=service %}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}