{% extends '@Contao/fragment/_container.html.twig' %}

{% block container %}
    <div class="lg:grid lg:grid-cols-5">
        <div class="py-16 px-4 sm:px-6 lg:col-span-2 lg:px-8 lg:py-24 xl:pr-12">
            <div class="max-w-lg mx-auto">
                <h2 class="text-2xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-50 sm:text-3xl sm:leading-9">
                    {{ headline }}
                </h2>
                <div class="mt-3 text-lg leading-6 text-gray-500 dark:text-gray-300">
                    {{ text|raw }}
                </div>
                <dl class="mt-8 text-base leading-6 text-gray-500 dark:text-gray-300">
                    {% if address is not empty %}
                        <div>
                            <dt class="sr-only">{{ 'contact.address'|trans({}, 'cms') }}</dt>
                            <dd>
                                <p>{{ address|nl2br }}</p>
                            </dd>
                        </div>
                    {% endif %}
                    {% if phone is not empty %}
                        <div class="mt-6">
                            <dt class="sr-only">{{ 'contact.phone'|trans({}, 'cms') }}</dt>
                            <dd class="flex">
                                <twig:ux:icon name="lucide:phone" class="flex-shrink-0 h-6 w-6 text-gray-400" />
                                <span class="ml-3">{{ phone }}</span>
                            </dd>
                        </div>
                    {% endif %}
                    {% if email is not empty %}
                        <div class="mt-3">
                            <dt class="sr-only">{{ 'contact.email'|trans({}, 'cms') }}</dt>
                            <dd class="flex">
                                <twig:ux:icon name="lucide:mail" class="flex-shrink-0 h-6 w-6 text-gray-400" />
                                {% set mailto = 'mailto:'~email %}
                                <a href="{{ mailto|encodeEmail }}"
                                   class="ml-3 hover:underline">{{ email|encodeEmail }}</a>
                            </dd>
                        </div>
                    {% endif %}
                </dl>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg py-16 px-4 sm:px-6 lg:col-span-3 lg:py-24 lg:px-8 xl:pl-12">
            <div class="max-w-lg mx-auto lg:max-w-none">
                {{ form|raw }}
            </div>
        </div>
    </div>
{% endblock %}
