{% extends 'base.html' %}
{% load form_tags %}

{% block title %}Contact Us{% endblock %}

{% block content %}
<section class="section">
    <div class="container mx-auto px-20 px-lg-0 pt-80 pb-60">
        <div class="d-lg-flex">
            <div class="flex-1 pr-lg-40 mb-40 mb-lg-0">
                <div class="bg-gray-50 rounded-20 p-40">
                    <header>
                        <h1 class="fs-44 fw-semibold mb-40">Inquiry for {{ service.name }}</h1>
                    </header>

                    <form method="post">
                        {% csrf_token %}

                        <div class="mb-40">
                            <label for="{{ form.name.id_for_label }}" class="form-label text-purple">Your Name</label>
                            {{ form.name|addclass:"form-control" }}
                            {% if form.name.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.name.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="mb-40">
                            <label for="{{ form.email.id_for_label }}" class="form-label text-purple">Your Email Address</label>
                            {{ form.email|addclass:"form-control" }}
                            {% if form.email.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.email.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="mb-40">
                            <label for="{{ form.phone.id_for_label }}" class="form-label text-purple">Your Phone Number (Optional)</label>
                            {{ form.phone|addclass:"form-control" }}
                            {% if form.phone.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.phone.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="mb-40">
                            <label for="{{ form.company.id_for_label }}" class="form-label text-purple">Your Company (Optional)</label>
                            {{ form.company|addclass:"form-control" }}
                            {% if form.company.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.company.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="mb-40">
                            <label for="{{ form.message.id_for_label }}" class="form-label text-purple">Your Message (Optional)</label>
                            {{ form.message|addclass:"form-control" }}
                            {% if form.message.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.message.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary btn-lg w-100">Submit</button>
                        </div>
                    </form>
                </div>
            </div>

            {% if selected_offering %}
            <div class="w-lg-34 bg-purple-50 rounded-16 p-24 d-flex flex-column">
                <div class="d-flex align-items-center mb-24">
                    <div class="card__image mb-0">
                        {% if selected_offering.service.logo %}
                            <img class="img-fluid" src="{{ selected_offering.service.logo.url }}" alt="Service Logo">
                        {% endif %}
                    </div>
                    <div class="card__header ps-16">
                        <h3 class="card__title">{{ service.name }}</h3>
                        <p class="card__subtitle mb-0">on {{ selected_offering.cloud_provider.name }}</p>
                    </div>
                </div>

                {% if selected_plan %}
                <div class="mb-24">
                    <div class="bg-white border-all rounded-7 p-20">
                        <h3 class="text-purple fs-18 fw-semibold lh-1-7 mb-0">{{ selected_plan.name }}</h3>
                    </div>
                </div>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</section>
{% endblock %}