{% set isReadonly = isReadonly|default(false) %}

<div class="flex items-center gap-x-2" id="offer-date-{{ date.uuid }}">
    <div class="inline-flex rounded-md shadow-sm border {{ date.begin ? 'border-gray-300 dark:border-gray-700' : 'border-red-500' }} {{ isReadonly ? '' : 'divide-x ' ~ (date.begin ? 'divide-gray-300 dark:divide-gray-700' : 'divide-red-500') }}">
        {% if isReadonly %}
            <div class="inline-flex items-center bg-gray-50 px-3 py-2 text-sm font-semibold text-gray-900 rounded-md dark:bg-white/5 dark:text-white">
                {% if date.begin %}
                    <twig:Cms:OfferDate :dates="[date]" />
                {% else %}
                    <span class="text-gray-400">— kein Termin —</span>
                {% endif %}
            </div>
        {% else %}
            <a href="{{ path('admin_offer_date_edit', { uuid: date.uuid.toBase58 }) }}"
               data-turbo-frame="modal"
               class="inline-flex items-center bg-white px-3 py-2 text-sm font-semibold text-gray-900 rounded-l-md hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:hover:bg-white/20">
                {% if date.begin %}
                    <twig:Cms:OfferDate :dates="[date]" />
                {% else %}
                    Termin wählen...
                {% endif %}
            </a>

            <a href="{{ path('admin_offer_date_edit', { uuid: date.uuid.toBase58 }) }}"
               data-turbo-frame="modal"
               class="inline-flex items-center bg-white px-2 py-2 text-gray-400 hover:bg-gray-50 dark:bg-white/10 dark:hover:bg-white/20">
                <twig:ux:icon name="ph:pencil-simple" aria-hidden="true" class="size-5"/>
            </a>

            <a href="{{ path('admin_offer_date_delete', { uuid: date.uuid.toBase58 }) }}"
               data-turbo-frame="modal"
               class="inline-flex items-center bg-white px-2 py-2 text-red-400 rounded-r-md hover:bg-red-50 dark:bg-white/10 dark:hover:bg-red-900/20">
                <twig:ux:icon name="ph:trash" aria-hidden="true" class="size-5"/>
            </a>
        {% endif %}
    </div>
</div>
