<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:clock" class="size-6" />
    </div>
    <div class="flex-1 text-sm leading-5 text-amber-900 dark:text-amber-100">
        <b class="block font-semibold">{{ 'applicationForm.empty.soon.title'|trans({}, 'cms') }}</b>
        <span class="block text-amber-900/80 dark:text-amber-100/85">
            {{ 'applicationForm.empty.soon.text'|trans({
                date: opens_at|format_datetime(pattern='EEE, dd.MM.', locale: app.request.locale),
                time: opens_at|format_datetime(pattern='HH:mm', locale: app.request.locale),
            }, 'cms') }}
        </span>
    </div>
    <div class="flex-none">
        {# Registration hasn't opened yet — let visitors note the offer (wishlist)
           rather than push a calendar entry. Delegates to the offer-card/wishlists
           controllers wrapping the offer details page, exactly like the sidebar
           heart and the disabled state. #}
        <button type="button"
                data-action="ferienpass--cms-offer-card#openWishlistMenu"
                data-ferienpass--cms-offer-card-target="favBtn"
                aria-haspopup="dialog"
                aria-expanded="false"
                class="inline-flex items-center justify-center gap-2 rounded-md bg-primary-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">
            <span class="size-4">
                <twig:ux:icon name="lucide:heart" data-ferienpass--cms-offer-card-target="favIcon" />
            </span>
            {{ 'applicationForm.empty.addToWishlist'|trans({}, 'cms') }}
        </button>
    </div>
</div>
