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

{% block container %}

    <div>

        <div class="relative bg-white dark:bg-gray-900">
            <div class="absolute inset-0">
                <div class="absolute inset-y-0 left-0 w-1/2 bg-gray-50"></div>
            </div>
            <div class="relative max-w-7xl mx-auto lg:grid lg:grid-cols-6">
                <div class="bg-white dark:bg-gray-900 py-16 px-4 sm:px-6 lg:col-span-4 lg:py-24 lg:px-8 xl:pl-12">
                    <div class="max-w-lg mx-auto lg:max-w-none">
                        {% if host.logo|default %}
                            <div class="mb-8 -mt-6">
                                {{ figure_html(host.logo | to_filesystem_item, picture_config({
                                    width: 300,
                                    height: 80,
                                    resizeMode: 'box',
                                    densities: '1x, 2x'
                                })) }}
                            </div>
                        {% endif %}
                        <h1 class="mb-6 text-3xl font-bold dark:text-white">{{ host.name }}</h1>
                        <div class="text-gray-500 dark:text-gray-200 text-lg prose dark:prose-invert max-w-none">{{ (host.text ?? '')|markdown_to_html|encodeEmail }}</div>
                        <div class="mt-4">
                            <a href="javascript:history.back()" class="font-medium text-primary-600 hover:underline">&larr;
                                {{ 'hostDetails.back'|trans({}, 'cms') }}</a>
                        </div>
                    </div>
                </div>

                {% set sidebar_container_attributes = attrs(sidebar_container_attributes|default).addClass('bg-gray-50 dark:bg-gray-800 py-16 px-4 sm:px-6 lg:col-span-2 lg:px-8 lg:py-24 xl:pr-12') %}
                <div {{ sidebar_container_attributes }}>
                    <div class="max-w-lg mx-auto">
                        <h2 class="font-semibold dark:text-white text-2xl leading-6">{{ 'hostDetails.contact'|trans({}, 'cms') }}</h2>
                        <dl class="mt-8 text-base leading-6 text-gray-500 dark:text-gray-300">
                            {% if host.postalAddresses|first %}
                                <div>
                                    <dt class="sr-only">{{ 'hostDetails.address'|trans({}, 'cms') }}</dt>
                                    <dd>
                                        <p>
                                            <span>{{ host.postalAddresses|first.street }}</span><br>
                                            <span>{{ host.postalAddresses|first.postalCode ~' ' ~ host.postalAddresses|first.city }}</span>
                                        </p>
                                    </dd>
                                </div>
                            {% endif %}
                            {% if showHostPhone ?? true and host.phone %}
                                <div class="mt-6">
                                    <dt class="sr-only">{{ 'hostDetails.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">{{ host.phone }}</span>
                                    </dd>
                                </div>
                            {% endif %}
                            {% if showHostPhone ?? true and host.fax|trim('-') %}
                                <div class="mt-3">
                                    <dt class="sr-only">{{ 'hostDetails.fax'|trans({}, 'cms') }}</dt>
                                    <dd class="flex">
                                        <twig:ux:icon name="lucide:printer" class="flex-shrink-0 h-6 w-6 text-gray-400" />
                                        <span class="ml-3">{{ host.fax }}</span>
                                    </dd>
                                </div>
                            {% endif %}
                            {% if showHostEmail ?? true and host.email %}
                                <div class="mt-3">
                                    <dt class="sr-only">{{ 'hostDetails.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:'~host.email %}
                                        <a href="{{ mailto|encodeEmail }}"
                                           class="ml-3 hover:underline">{{ host.email|encodeEmail }}</a>
                                    </dd>
                                </div>
                            {% endif %}
                            {% if host.website %}
                                <div class="mt-3">
                                    <dt class="sr-only">{{ 'hostDetails.website'|trans({}, 'cms') }}</dt>
                                    <dd class="flex">
                                        <twig:ux:icon name="lucide:globe" class="flex-shrink-0 h-6 w-6 text-gray-400" />
                                        <a href="{{ host.website }}"
                                           target="_blank"
                                           class="ml-3 hover:underline">{{ host.website|replace({'https://': ''}) }}</a>
                                    </dd>
                                </div>
                            {% endif %}
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-16 pb-16">
            <section class="mt-4 sm:columns-2 lg:columns-3 gap-6" aria-label="{{ 'offerList.ariaLabel'|trans({}, 'cms') }}">

                {% for item in offers %}
                    <twig:Cms:OfferListItem item="{{ item }}"/>
                {% endfor %}

            </section>
        </div>

    </div>

{% endblock %}
