<article {{ attributes.defaults({
    'data-controller': 'ferienpass--cms-offer-card',
    'data-ferienpass--cms-offer-card-offer-id-value': item.id,
    'data-ferienpass--cms-offer-card-offer-uuid-value': item.uuid.toBase58,
    'data-ferienpass--cms-wishlists-target': 'card',
    class: 'group relative flex h-full flex-col overflow-hidden rounded-md border border-gray-200 bg-white dark:border-white/5 dark:bg-gray-800',
})|raw }}>

    {% if item.cancelled %}
        <span class="absolute right-0 top-0 z-20 inline-block translate-x-7 translate-y-7 rotate-45 bg-red-600 px-8 py-1 text-center text-xs font-semibold uppercase tracking-wider text-white">
            {{ 'offer.status.cancelled'|trans({}, 'cms') }}
        </span>
    {% endif %}

    <div class="relative aspect-[4/3] overflow-hidden bg-gray-100 dark:bg-gray-700 {{ item.cancelled ? 'opacity-50' : '' }}">
        {% if item.media is not empty %}
            {{- figure_html(item.media|first | to_image, picture_config({
                width: 800,
                height: 600,
                resizeMode: 'crop',
                densities: '1x, 2x'
            }), {metadata: { alt: item.media|first.media.alt, creator: item.media|first.media.creator}, options: { img_attr: { class: 'h-full w-full object-cover transition duration-300 group-hover:scale-[1.02]' }}}) -}}
        {% else %}
            <div class="flex h-full w-full items-center justify-center">
                <twig:ux:icon name="lucide:image" class="h-12 w-12 text-gray-300 dark:text-gray-600" />
            </div>
        {% endif %}

        <button type="button"
                data-ferienpass--cms-offer-card-target="favBtn"
                data-action="ferienpass--cms-offer-card#openWishlistMenu"
                aria-label="{{ 'offer.save'|trans({}, 'cms') }}"
                aria-haspopup="dialog"
                aria-expanded="false"
                class="absolute right-3 top-3 z-10 grid h-10 w-10 place-items-center rounded-full bg-white/95 text-gray-700 shadow-md ring-1 ring-black/5 backdrop-blur transition hover:text-red-500 active:scale-95 dark:bg-gray-900/85 dark:text-gray-200 dark:ring-white/10">
            <twig:ux:icon name="lucide:heart" data-ferienpass--cms-offer-card-target="favIcon" class="h-5 w-5" />
        </button>
    </div>

    <div class="flex flex-1 flex-col gap-3 px-4 py-4 {{ item.cancelled ? 'opacity-50' : '' }}">
        {# Schedule block (kind-aware: single / series / recurring / ongoing). Replaces
           the old date tag + permanent flag. #}
        <twig:Cms:OfferSchedule :offer="item" />

        {# Non-date flags. The two "bookable" chips are mutually exclusive and
           mirror the FreeSeatsType filter's semantics:
             - `requiresApplication = false`  → "Ohne Anmeldung"
             - `item.instantlyBookable`       → "Sofort buchbar"
           Anything else — signup required but offline only, deadline passed,
           cancelled, or fully booked — shows neither chip. The chip used to ask
           only whether online applications were switched on, so it kept
           promising instant booking past the deadline and on sold-out offers:
           precisely the dead end the label exists to spare families. #}
        {% set isFree = item.fee|default(0) == 0 %}
        {% set noApplication = item.requiresApplication is defined and not item.requiresApplication %}
        {% set instantBookable = item.instantlyBookable|default(false) %}
        {% if isFree or noApplication or instantBookable %}
            <div class="flex flex-wrap gap-1.5">
                {% if isFree %}
                    <span class="inline-flex items-center rounded-full bg-green-50 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wide text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:ring-green-400/20">
                        {{ 'offerDetails.free'|trans({}, 'cms') }}
                    </span>
                {% endif %}

                {% if noApplication %}
                    <span class="inline-flex items-center rounded-full bg-amber-50 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wide text-amber-800 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-400 dark:ring-amber-400/20">
                        {{ 'filter.chip.noApplication'|trans({}, 'cms') }}
                    </span>
                {% elseif instantBookable %}
                    <span class="inline-flex items-center rounded-full bg-amber-50 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wide text-amber-800 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-400 dark:ring-amber-400/20">
                        <twig:ux:icon name="lucide:zap" class="mr-1 h-3 w-3" />
                        {{ 'filter.chip.instant'|trans({}, 'cms') }}
                    </span>
                {% endif %}
            </div>
        {% endif %}

        <a href="{{ path('cms', { to: 'offer_list', edition: item.edition is defined ? item.edition : null, auto_item: offer_auto_item(item) }) }}"
           data-turbo-frame="_top"
           class="block font-semibold leading-snug text-gray-900 hover:underline dark:text-gray-100">
            <h2 class="line-clamp-2 text-base sm:text-lg">{{ item.name|machine_translate }}</h2>
        </a>

        <div data-ferienpass--cms-offer-card-target="wishlists" class="flex flex-wrap gap-1.5 empty:hidden"></div>

        <div class="space-y-1 text-xs text-gray-500 dark:text-gray-400">
            <div class="flex items-center gap-1.5">
                <twig:ux:icon name="lucide:users" class="h-3.5 w-3.5 flex-shrink-0" />
                <twig:Cms:OfferAge :offer="item" />
            </div>
            {% if item.hosts|first|default %}
                <div class="flex items-center gap-1.5 truncate">
                    <twig:ux:icon name="lucide:map-pin" class="h-3.5 w-3.5 flex-shrink-0" />
                    <span class="truncate">{{ item.hosts|first.name|machine_translate }}</span>
                </div>
            {% endif %}
        </div>

        <div class="mt-auto flex items-center justify-between gap-2 pt-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">
                {%- if item.fee|default(0) == 0 -%}
                    {{ 'offerDetails.free'|trans({}, 'cms') }}
                {%- else -%}
                    {{ (item.fee/100)|format_currency('EUR') }}
                {%- endif -%}
            </span>
            <a class="inline-flex items-center gap-1 rounded-md bg-primary-50 px-3 py-1.5 text-sm font-medium text-primary-700 hover:bg-primary-100 hover:text-primary-800 dark:bg-primary-400/15 dark:text-primary-200 dark:hover:bg-primary-400/25"
               href="{{ path('cms', { to: 'offer_list', edition: item.edition is defined ? item.edition : null, auto_item: offer_auto_item(item) }) }}"
               data-turbo-frame="_top">
                {{ (item.onlineApplication ? 'offer.infoRegistration' : 'offer.info')|trans({}, 'cms') }}
                <twig:ux:icon name="lucide:arrow-right" class="h-3.5 w-3.5" />
            </a>
        </div>
    </div>
</article>
