<div class="flex flex-col gap-4 rounded-2xl border border-gray-200 bg-gray-50 p-5 dark:border-gray-700 dark:bg-gray-800/40 sm:flex-row sm:items-center">
    <div class="flex size-11 flex-none items-center justify-center rounded-xl bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-300">
        <twig:ux:icon name="lucide:calendar-x" class="size-6" />
    </div>
    <div class="flex-1 text-sm leading-5 text-gray-700 dark:text-gray-200">
        <b class="block font-semibold text-gray-900 dark:text-gray-100">{{ 'applicationForm.empty.past.title'|trans({}, 'cms') }}</b>
        <span class="block text-gray-600 dark:text-gray-300">{{ 'applicationForm.empty.past.text'|trans({}, 'cms') }}</span>
    </div>
</div>
