<div class="flex flex-col gap-4 rounded-2xl border border-rose-200 bg-rose-50 p-5 dark:border-rose-900/50 dark:bg-rose-900/15 sm:flex-row sm:items-center">
    <div class="flex size-11 flex-none items-center justify-center rounded-xl bg-rose-600/10 text-rose-700 dark:bg-rose-400/15 dark:text-rose-300">
        <twig:ux:icon name="lucide:lock" class="size-6" />
    </div>
    <div class="flex-1 text-sm leading-5 text-rose-900 dark:text-rose-100">
        <b class="block font-semibold">{{ 'applicationForm.empty.closed.title'|trans({}, 'cms') }}</b>
        <span class="block text-rose-900/80 dark:text-rose-100/85">{{ 'applicationForm.empty.closed.text'|trans({}, 'cms') }}</span>
    </div>
    <div class="flex-none">
        <a href="{{ path('cms_edition_landing', { alias: offer.edition.alias }) }}"
           class="inline-flex items-center justify-center gap-2 rounded-md bg-white px-4 py-2.5 text-sm font-semibold text-rose-700 ring-1 ring-inset ring-rose-300 hover:bg-rose-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose-600 dark:bg-rose-950/40 dark:text-rose-200 dark:ring-rose-900 dark:hover:bg-rose-950 transition-colors">
            {{ 'applicationForm.empty.closed.browseSimilar'|trans({}, 'cms') }}
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>
        </a>
    </div>
</div>
