{% if offer.requiresApplication|default %}
    {# Application required, but not handled online — point the visitor to the host
       and surface the offer's applyText (e.g. where/how to register). Mirrors the
       offer-details sidebar (offer_details.html.twig) so both stay consistent. #}
    <div class="flex flex-col gap-4 rounded-2xl border border-amber-200 bg-amber-50 p-5 dark:border-amber-900/50 dark:bg-amber-900/15 sm:flex-row sm:items-center">
        <div class="flex size-11 flex-none items-center justify-center rounded-xl bg-amber-600/10 text-amber-700 dark:bg-amber-400/15 dark:text-amber-300">
            <twig:ux:icon name="lucide:info" class="size-6" />
        </div>
        <div class="flex-1 text-sm leading-5 text-amber-900 dark:text-amber-100">
            <b class="block font-semibold">{{ 'offerDetails.registrationRequired'|trans({}, 'cms') }}</b>
            <span class="block text-amber-900/80 dark:text-amber-100/85">{{ 'offerDetails.contactHost'|trans({}, 'cms') }}</span>
        </div>
    </div>
    {% if offer.applyText|default %}
        <blockquote class="mt-3 border-l-4 border-gray-200 pl-4 text-sm leading-5 text-gray-600 dark:border-gray-700 dark:text-gray-300">
            <span class="mb-1 block font-medium text-gray-500 dark:text-gray-400">{{ 'offerDetails.registrationAt'|trans({}, 'cms') }}</span>
            {{ offer.applyText|machine_translate|encodeEmail }}
        </blockquote>
    {% endif %}
{% else %}
    <div class="flex flex-col gap-4 rounded-2xl border border-emerald-200 bg-emerald-50 p-5 dark:border-emerald-900/50 dark:bg-emerald-900/15 sm:flex-row sm:items-center">
        <div class="flex size-11 flex-none items-center justify-center rounded-xl bg-emerald-600/10 text-emerald-700 dark:bg-emerald-400/15 dark:text-emerald-300">
            <twig:ux:icon name="lucide:map-pin" class="size-6" />
        </div>
        <div class="flex-1 text-sm leading-5 text-emerald-900 dark:text-emerald-100">
            <b class="block font-semibold">{{ 'applicationForm.empty.open.title'|trans({}, 'cms') }}</b>
            <span class="block text-emerald-900/80 dark:text-emerald-100/85">{{ 'applicationForm.empty.open.text'|trans({}, 'cms') }}</span>
        </div>
        <div class="flex-none">
            {% include '@Contao/components/application_form/_save_calendar_button.html.twig' with { offer: offer } only %}
        </div>
    </div>
{% endif %}
