{% set isModal = app.request.headers.get('turbo-frame') == 'modal' %}

<div data-controller="ferienpass--cms-wishlists ferienpass--cms-offer-card"
     data-ferienpass--cms-offer-card-offer-id-value="{{ offer.id }}"
     data-ferienpass--cms-offer-card-offer-uuid-value="{{ offer.uuid.toBase58 }}"
     data-ferienpass--cms-wishlists-target="card">
<div class="max-w-5xl mx-auto sm:px-6 lg:px-8">

    {% embed '@Contao/fragment/_modalBase.html.twig' with {spaceless:true} %}
        {% block modalContent %}

            <div class="relative">
                <div class="absolute inset-0">
                    <div class="absolute inset-y-0 left-0 w-1/2"></div>
                </div>
                <div class="relative max-w-7xl mx-auto lg:grid lg:grid-cols-6">

                    {% set main_container_attributes = attrs(main_container_attributes|default).addClass("bg-white dark:bg-gray-800 lg:col-span-4") %}
                    <div {{ main_container_attributes }}>

                        {% block image_before_content %}
                            {% if offer.media is not empty %}
                                {% set figure = figure(offer.media|first | to_image, picture_config({
                                    width: 650,
                                    height: 320,
                                    resizeMode: 'crop',
                                    densities: '1x, 2x'
                                }), {metadata: { alt: offer.media|first.media.alt, creator: offer.media|first.media.creator}, options: { attr: { class: 'object-cover w-full h-auto' }}}) %}

                                {% if figure %}
                                    {# The caption below reads figure.metadata, so the object has to
                                       stay; that rules out figure_html() and leaves the component. #}
                                    {{- include('@Contao/component/_figure.html.twig', {figure: figure}) -}}

                                    {% set caption = figure.metadata.get('creator') %}
                                    {% if caption %}
                                        <p class="text-xs pt-1 pr-4 text-right text-gray-400">
                                            {{ 'offerDetails.imageCaption'|trans({'caption': caption}, 'cms') }}</p>
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                        {% endblock %}

                        <div class="{{ isModal ? 'py-4 md:py-8' : 'py-16 lg:py-24' }} px-4 sm:px-6 lg:px-8 xl:pl-12">
                            <div class="max-w-lg mx-auto lg:max-w-none">

                                {% block content %}

                                    {% if offer.cancelled %}
                                        <div class="mb-4">
                                            {% include '@FerienpassCore/Alert/error.html.twig' with {message: 'offerDetails.cancelledAlert'|trans({}, 'cms')} %}
                                        </div>
                                    {% endif %}
                                    <h1 class="text-3xl font-bold dark:text-white">{{ offer.name|machine_translate }} {{ offer.variants|length ? offer.variantNumber|default : '' }}</h1>
                                    <div class="mt-4 text-xl lg:text-2xl font-semibold dark:text-white"><twig:Cms:OfferDate :dates="offer.dates" /></div>
                                    <div class="font-semibold {{ isModal ? 'text-lg' : 'text-xl' }} text-gray-500 dark:text-gray-300"><twig:Cms:OfferAge :offer="offer" /></div>

                                    {% if not isModal %}
                                        {% set variants = offer.getVariants(true)|default([])|filter((v) => v.published) %}
                                        {% if variants|length > 1 %}
                                            <h3 class="mt-3 font-medium text-gray-700 dark:text-white/75 text-sm">{{ 'offerDetails.alternativeDates'|trans({}, 'cms') }}</h3>
                                            <div class="mt-1 flex overflow-x-auto flex-wrap">
                                                {% for variant in variants %}
                                                    <div class="mr-2 mb-1 border-2 {{ variant.id == offer.id ? 'border-primary-600 bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-300' : 'border-gray-200 dark:border-white/10 hover:border-primary-500' }} rounded-lg px-3 py-2 group relative">
                                                        <p class="text-sm font-semibold {{ variant.id == offer.id ? 'text-primary-700 dark:text-primary-300' : 'dark:text-white group-hover:text-primary-600' }}"><twig:Cms:OfferDate :dates="variant.dates" /></p>
                                                        <p class="font-semibold text-xs {{ variant.id == offer.id ? 'text-primary-600/70 dark:text-primary-400/70' : 'text-gray-500 dark:text-gray-300' }}"><twig:Cms:OfferAge :offer="variant" /></p>
                                                        <a class="absolute inset-0 -indent-[99999px]"
                                                           href="{{ path('cms', { to: 'offer_list', edition: variant.edition, auto_item: offer_auto_item(variant)}) }}"></a>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        {% endif %}
                                    {% endif %}

                                    <div class="text-gray-500 dark:text-gray-300 {{ isModal ? 'text-base mt-2' : 'text-lg mt-4' }} prose prose-sm dark:prose-invert max-w-none">{{ offer.description|machine_translate|markdown_to_html|encodeEmail }}</div>

                                    {% if offer.meetingAddress or offer.meetingPoint %}
                                        <div class="mt-10 border-t border-gray-100 dark:border-gray-800 pt-10">
                                            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ 'offerDetails.locationTitle'|trans({}, 'cms') }}</h2>
                                            <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
                                                {% if offer.meetingAddress %}
                                                    <div class="flex items-start">
                                                        <twig:ux:icon name="lucide:map-pin" class="h-5 w-5 mr-3 text-primary-600 mt-0.5 flex-shrink-0" />
                                                        <div>
                                                            <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ 'offer.meetingAddressLabel'|trans({}, 'cms') }}</p>
                                                            <p class="mt-1 text-base text-gray-900 dark:text-gray-300">{{ offer.meetingAddress }}</p>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                                {% if offer.meetingPoint %}
                                                    <div class="flex items-start">
                                                        <twig:ux:icon name="lucide:info" class="h-5 w-5 mr-3 text-primary-600 mt-0.5 flex-shrink-0" />
                                                        <div>
                                                            <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ 'offer.meetingPointLabel'|trans({}, 'cms') }}</p>
                                                            <p class="mt-1 text-base text-gray-900 dark:text-gray-300">{{ offer.meetingPoint|machine_translate }}</p>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    {% endif %}

                                    {% if offer.bring|default %}
                                        <div class="mt-10 pt-10 border-t border-gray-100 dark:border-gray-800">
                                            <div class="flex items-start">
                                                <twig:ux:icon name="lucide:backpack" class="h-5 w-5 mr-3 text-primary-600 mt-0.5 flex-shrink-0" />
                                                <div>
                                                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ 'offer.bringLabel'|trans({}, 'cms') }}</p>
                                                    <p class="mt-1 text-base text-gray-900 dark:text-gray-300">{{ offer.bring|machine_translate }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}

                                    {% if attachments is not empty %}
                                        <div class="mt-6 text-sm text-gray-900">
                                            <ul role="list"
                                                class="divide-y divide-gray-200 dark:divide-gray-700 border-t border-b border-gray-200">
                                                {% for attachment in attachments %}
                                                    <li class="flex items-center justify-between py-4 pl-2 pr-3 text-sm leading-6">
                                                        <div class="flex w-0 flex-1 items-center">
                                                            <twig:ux:icon name="lucide:paperclip" class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
                                                            <div class="ml-4 flex min-w-0 flex-1 gap-2">
                                                                <span class="truncate font-medium">{{ attachment.name }}</span>
                                                                {#                                                <span class="flex-shrink-0 text-gray-400">2.4mb</span> #}
                                                            </div>
                                                        </div>
                                                        <div class="ml-4 flex-shrink-0">
                                                            <a target="_blank"
                                                               href="{{ path('cms', { to: 'offer_list', edition: offer.edition, auto_item: offer_auto_item(offer), file: attachment.path}) }}"
                                                               class="font-medium text-primary-600 hover:text-primary-500">{{ 'offerDetails.download'|trans({}, 'cms') }}</a>
                                                        </div>
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    {% endif %}

                                {% endblock content %}

                            </div>
                        </div>
                    </div>

                    {% set sidebar_container_attributes = attrs(sidebar_container_attributes|default).addClass("bg-[color:var(--bg-body)] dark:bg-gray-900 "~ (isModal ? 'py-8 md:py-16' : 'py-16')~ " px-4 sm:px-6 lg:col-span-2 lg:px-8 xl:pr-12") %}
                    <div {{ sidebar_container_attributes }}>
                        <div class="max-w-lg mx-auto">
                            {% block sidebar %}

                                <div class="flex items-center space-x-3">
                                    {% for logo in offer.hosts|map(h => h.logo)|filter(v => v) %}
                                        <div class="mb-8 -mt-6">
                                            {{ figure_html(logo | to_filesystem_item, picture_config({
                                                width: 300,
                                                height: 80,
                                                resizeMode: 'box',
                                                densities: '1x, 2x'
                                            })) }}
                                        </div>
                                    {% endfor %}
                                </div>
                                {% for host in offer.hosts %}
                                    <h2 class="font-semibold text-xl dark:text-white leading-6">{{ host.name|machine_translate }}</h2>
                                    <div class="text-sm mt-1">
                                        <a href="{{ path('cms_host_details', { alias: host.alias }) }}"
                                           class="font-medium text-primary-600 hover:underline">{{ 'offerDetails.toHost'|trans({}, 'cms') }}
                                            &rarr;</a>
                                    </div>
                                {% endfor %}
                                <div class="mt-8">
                                    <div class="flex items-center justify-between mb-4">
                                        <div>
                                            <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold">{{ 'offer.feeLabel'|trans({}, 'cms') }}</p>
                                            <p class="text-2xl font-bold dark:text-white">{% if offer.fee|default(0) > 0 %} {{ (offer.fee/100)|format_currency('EUR') }}{% else %}{{ 'offerDetails.free'|trans({}, 'cms') }}{% endif %}</p>
                                        </div>
                                    </div>

                                    {% if offer.onlineApplication and not offer.cancelled %}
                                        <a href="{{ path('cms', { to: 'offer_list', edition: offer.edition, auto_item: offer_auto_item(offer) }) }}#anmelden"
                                           class="block w-full text-center bg-primary-600 hover:bg-primary-700 text-white font-semibold py-3 px-4 rounded-md transition-colors">
                                            {{ 'offerDetails.registerNow'|trans({}, 'cms')|default('Jetzt anmelden') }} &darr;
                                        </a>
                                    {% endif %}
                                    <button type="button"
                                            data-action="ferienpass--cms-offer-card#openWishlistMenu"
                                            data-ferienpass--cms-offer-card-target="favBtn"
                                            aria-haspopup="dialog"
                                            aria-expanded="false"
                                            class="mt-3 block w-full text-center font-medium rounded-md px-4 py-2 text-sm flex items-center space-x-1 justify-center ring-1 ring-inset bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 ring-gray-300 dark:ring-white/10 hover:bg-gray-50 dark:hover:bg-white/5"
                                    >
                                        <span class="w-4 h-4">
                                            <twig:ux:icon name="lucide:heart" data-ferienpass--cms-offer-card-target="favIcon" />
                                        </span>
                                        <span>
                                            {{ 'offer.save'|trans({}, 'cms') }}
                                        </span>
                                    </button>
                                    <div data-ferienpass--cms-offer-card-target="wishlists" class="mt-2 flex flex-wrap gap-1.5 empty:hidden"></div>
                                </div>

                                <dl class="mt-8 text-base leading-6 text-gray-500 dark:text-gray-300">
                                    {% for contact in offer.contact %}
                                        {% if contact.name %}
                                            <div class="mt-3">
                                                <dt class="sr-only">{{ 'offerDetails.info'|trans({}, 'cms') }}</dt>
                                                <dd class="flex">
                                                    <span>{{ contact.name }}</span>
                                                </dd>
                                            </div>
                                        {% endif %}

                                        {% if showHostPhone ?? true and contact.phone %}
                                            <div class="mt-3">
                                                <dt class="sr-only">{{ 'offerDetails.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">{{ contact.phone }}</span>
                                                </dd>
                                            </div>
                                        {% endif %}

                                        {% if showHostEmail ?? true and contact.email %}
                                            <div class="mt-3">
                                                <dt class="sr-only">{{ 'offerDetails.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:'~contact.email %}
                                                    <a href="{{ mailto|encodeEmail }}"
                                                       class="ml-3 hover:underline">{{ contact.email|encodeEmail }}</a>
                                                </dd>
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                </dl>

                                <div class="border-b dark:border-gray-700 mt-10 mb-10"></div>
                                {% if offer.cancelled %}
                                    <div class="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
                                        <div class="flex">
                                            <div class="flex-shrink-0">
                                                <twig:ux:icon name="lucide:circle-x" class="h-5 w-5 text-red-400" />
                                            </div>
                                            <div class="ml-3">
                                                <h3 class="text-sm font-medium text-red-800 dark:text-red-300">{{ 'offerDetails.statusCancelled'|trans({}, 'cms') }}</h3>
                                                <div class="mt-2 text-sm text-red-700 dark:text-red-400">
                                                    <p>{{ 'offerDetails.cancelledInfo'|trans({}, 'cms') }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% else %}
                                    {% if offer.requiresApplication|default %}
                                        <div class="rounded-md bg-amber-50 dark:bg-amber-900/20 p-4">
                                            <div class="flex">
                                                <div class="flex-shrink-0">
                                                    <twig:ux:icon name="lucide:info" class="h-5 w-5 text-amber-400" />
                                                </div>
                                                <div class="ml-3">
                                                    <h3 class="text-sm font-medium text-amber-800 dark:text-amber-300">{{ 'offerDetails.registrationRequired'|trans({}, 'cms') }}</h3>
                                                    <div class="mt-2 text-sm text-amber-700 dark:text-amber-400">
                                                        <p>
                                                            {% if offer.onlineApplication %}
                                                                {{ 'offerDetails.registrationRequired'|trans({}, 'cms') }}
                                                                <a href="{{ path('cms', { to: 'offer_list', edition: offer.edition, auto_item: offer_auto_item(offer) }) }}#anmelden"
                                                                                     class="underline hover:no-underline font-medium">{{ 'offerDetails.registrationFormLink'|trans({}, 'cms') }}</a> {{ 'offerDetails.registrationInfo'|trans({}, 'cms') }}
                                                            {% else %}
                                                                {{ 'offerDetails.contactHost'|trans({}, 'cms') }}
                                                            {% endif %}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {% if offer.applyText|default %}
                                            <dl class="mt-3">
                                                <dt class="sr-only">{{ 'offerDetails.registrationAt'|trans({}, 'cms') }}</dt>
                                                <dd class="flex">
                                                    <twig:ux:icon name="lucide:info" class="flex-shrink-0 h-6 w-6 text-gray-400" />
                                                    <span class="ml-2 text-gray-500 dark:text-gray-300 text-sm leading-5">{{ offer.applyText|machine_translate|encodeEmail }}</span>
                                                </dd>
                                            </dl>
                                        {% endif %}
                                    {% else %}
                                        <div class="rounded-md bg-green-50 dark:bg-green-900/20 p-4">
                                            <div class="flex">
                                                <div class="flex-shrink-0">
                                                    <twig:ux:icon name="lucide:check-circle" class="h-5 w-5 text-green-400" />
                                                </div>
                                                <div class="ml-3">
                                                    <h3 class="text-sm font-medium text-green-800 dark:text-green-300">{{ 'offerDetails.noRegistrationRequired'|trans({}, 'cms') }}</h3>
                                                    <div class="mt-2 text-sm text-green-700 dark:text-green-400">
                                                        <p>{{ 'offerDetails.noRegistrationInfo'|trans({}, 'cms') }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endif %}

                                {% block sidebar_add %}{% endblock %}

                            {% endblock %}
                        </div>
                    </div>
                </div>
            </div>

        {% endblock %}
    {% endembed %}

    {% if offer.meetingLat and offer.meetingLng %}
        </div> {# Close max-w-5xl #}
        <div data-controller="ferienpass--cms-mapbox-consent">
            <div data-ferienpass--cms-mapbox-consent-target="map"
                 class="hidden w-full h-48 sm:h-64 md:h-80 my-12 bg-gray-100 dark:bg-gray-900 border-y border-gray-200 dark:border-gray-800 shadow-inner overflow-hidden"
                 data-controller="ferienpass--cms-mapbox-view"
                 data-ferienpass--cms-mapbox-view-token-value="{{ mapboxToken }}"
                 data-ferienpass--cms-mapbox-view-lat-value="{{ offer.meetingLat }}"
                 data-ferienpass--cms-mapbox-view-lng-value="{{ offer.meetingLng }}"
                 data-ferienpass--cms-mapbox-view-zoom-value="14">
            </div>
            <div data-ferienpass--cms-mapbox-consent-target="placeholder"
                 class="hidden w-full min-h-[12rem] sm:min-h-[16rem] md:min-h-[20rem] my-12 bg-gray-100 dark:bg-gray-900 border-y border-gray-200 dark:border-gray-800 shadow-inner overflow-hidden flex flex-col items-center justify-center p-6 text-center">
                <p class="text-gray-600 dark:text-gray-400 mb-6 max-w-md">
                    {{ 'offerDetails.mapboxConsent.text'|trans({}, 'cms') }}
                </p>
                <div class="flex flex-col sm:flex-row gap-3">
                    <button type="button"
                            data-action="click->ferienpass--cms-mapbox-consent#giveConsent"
                            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors">
                        {{ 'offerDetails.mapboxConsent.button'|trans({}, 'cms') }}
                    </button>
                    <button type="button"
                            data-action="click->ferienpass--cms-mapbox-consent#toggleInfo"
                            class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors">
                        {{ 'offerDetails.mapboxConsent.infoButton'|trans({}, 'cms') }}
                    </button>
                </div>
                <div data-ferienpass--cms-mapbox-consent-target="info" class="hidden mt-6 text-xs text-gray-500 dark:text-gray-400 max-w-2xl">
                    {{ 'offerDetails.mapboxConsent.infoText'|trans({}, 'cms')|nl2br }}
                </div>
            </div>
        </div>
        <div class="max-w-5xl mx-auto sm:px-6 lg:px-8">
    {% endif %}

    {% if not offer.isCancelled %}
        <div>
            <a id="anmelden"></a>
            <div class="relative max-w-7xl mx-auto mt-16 lg:grid lg:grid-cols-6">
                <div class="lg:col-span-2"></div>
                {% set register_container_attributes = attrs(main_container_attributes|default).addClass("bg-white dark:bg-gray-800 lg:col-span-4") %}
                <div {{ register_container_attributes }}>
                    <div class="py-12 px-4 sm:px-6 lg:px-8 xl:pl-12">
                        <div class="max-w-lg mx-auto lg:max-w-none">
                            <h2 class="font-semibold text-xl dark:text-white leading-6">{{ 'offerDetails.registerToOffer'|trans({}, 'cms') }}</h2>

                            {{ render_esi(controller(
                                'Ferienpass\\CmsBundle\\Controller\\Fragment\\ApplicationFormController',
                                {
                                    offerUuid: offer.uuid.toRfc4122,
                                    consentToken: consentToken|default(''),
                                }
                            )) }}

                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    {% include '@Contao/components/wishlists_host.html.twig' %}
</div>{# /max-w-5xl #}
</div>{# /wishlists controller wrapper #}
