{f:render(partial: 'Extensions/Product/Model/PrefetchedProduct', arguments: '{product: product}') -> f:variable(name: 'model')}

<div 
    data-selector="prefetched-product-teaser" 
    data-model="{model -> f:format.raw()}"

    class="bg-white swiper-slide flex-shrink-0 pr-2 md:pr-4 last:pr-0 flex"
    x-data="productTeaser()"

    @dropdown-open="loadProductVariations"
    @program-selected="setProductVariationByProgramUid($event.detail)"
    data-detail-link="{f:uri.page(pageUid: product.page, absolute: 1)}"

>
    <figure class="flex flex-col relative w-full md:w-[280px] lg:w-[400px]">
        <div class="relative flex justify-center w-full px-8 lg:px-12 -mb-[76px] lg:-mb-[40%]">
            <f:if condition="{product.presenter.image}">
                <div class="standard-dark-grey">
                    <a 
                        :href="populatedDetailPageLink"
                        data-tracking-id="product teaser"
                        data-tracking-value="{product.title}"
                    >
                        <img class="w-full h-full min-h-prefetched-teaser md:min-h-[216px] lg:min-h-[304px]" 
                            src="{v:uri.image(src: product.presenter.image.uid, treatIdAsReference: 1, relative: 0, maxW: 768, quality:87, format:'webp')}"
                            :src="activeVariationDetailImage ?activeVariationDetailImage.url : ''" 
                            width="768"
                            loading="lazy"
                            alt="{product.title}">
                    </a>
                </div>
            </f:if>
        </div>

        <figcaption class="flex-grow flex flex-col bg-sky/50 rounded-lg pt-[88px] md:pt-[104px] lg:pt-[192px] pb-6 lg:pb-8">
            <f:if condition="{product.title}">
                <h4 class="flex items-end min-h-[82px] md:min-h-[88px] lg:min-h-[112px] pb-4 px-4 md:px-6 lg:px-8 not-italic">
                    <f:format.html parseFuncTSPath="lib.parseFunc">{product.title}</f:format.html>
                </h4>
            </f:if>

            <div class="relative z-10">
                <f:render partial="Elements/Dropdown/Dropdown" arguments="{title: product.presenter.productVariation.program.title}" />
            </div>

            <div class="flex-grow flex flex-col px-4 md:px-6 lg:px-8">
                <div class="border-b-2 border-sky py-4">
                    <p class="text-grey-medium text-[8px] md:text-[10px] pb-2 not-italic">
                        <f:translate key="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:products.teaser.colors.label.text" />
                        (<span x-text="activeVariationDetails ? activeVariationDetails.images.length : 0">{product.presenter.productVariation.presenter.images -> f:count()}</span>)
                    </p>

                    <ul class="list-none flex flex-wrap gap-x-4 gap-y-2 lg:gap-x-6 lg:gap-y-3 pb-2">
                        <template x-if="activeVariationDetails">
                            <template x-for="color in activeVariationDetails.images" :key="color.uid">
                                <li 
                                    @click="activeVariationDetailsImageUid = color.uid" 
                                    tabindex="0" 
                                    data-tracking-id="teaser color picker"
                                    :data-tracking-value="`${color.frameColor?.title}` + (color.mainColor ? ` / ${color.mainColor?.title}` : '') "                
                                    role="button"
                                    :aria-label="`{product.title} - ${color?.mainColor?.title}`"
                                    class="relative w-6 h-6 lg:w-8 lg:h-8 rounded-full before:absolute before:inset-0 before:border before:rounded-full before:border-grey border-1" 
                                    :class="{'after:absolute after:inset-0 after:border-2 after:rounded-full after:border-brand': activeVariationDetailImage.uid === color.uid}"
                                    :style="`background-color: ${color.mainColor?.code};`"
                                >
                                    <div class="absolute inset-0 border-[5px] border-transparent rounded-full" :style="`border-color: ${color.frameColor?.code};`;"></div>
                                </li>
                            </template>
                        </template>
                    </ul>
                    
                    <div class="text-[8px] md:text-[10px] not-italic flex flex-col gap-y-2 lg:gap-y-4">
                        <div class="flex flex-col lg:flex-row gap-y-1 md:gap-y-0 gap-x-4">
                            <p class="text-brand font-bold">
                                <v:variable.set name="firstVariationDetailsImage" value="{product.presenter.productVariation.presenter.images -> v:iterator.first()}" />
                                <v:variable.set name="mainColor" value="{firstVariationDetailsImage.mainColor.title}" />
                                <v:variable.set name="frameColor" value="{firstVariationDetailsImage.frameColor.title}" />

                                <span x-show="activeVariationDetailImage ?activeVariationDetailImage.frameColor : false" {f:if(condition: frameColor, else: 'style="display: none;"')} ><f:translate key="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:products.teaser.maincolor.label.text" /></span> <span x-text="activeVariationDetailImage ? activeVariationDetailImage?.mainColor?.title : ''">{mainColor}</span>
                            </p>
                            <p class="text-brand font-bold" x-show="activeVariationDetailImage ? activeVariationDetailImage.frameColor : false" {f:if(condition: frameColor, else: 'style="display: none;"')}>
                                <f:translate key="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:products.teaser.framecolor.label.text" /> <span x-text="activeVariationDetailImage ? activeVariationDetailImage?.frameColor?.title : ''">{frameColor}</span>
                            </p>
                        </div>

                        <f:if condition="{product.systems}">
                            <p>
                                <f:translate key="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:products.teaser.systems.label.text" />

                                <f:for each="{product.systems}" as="system" iteration="iterator">
                                    <f:link.page pageUid="{system.page}" class="font-bold mr-1">{system.title}</f:link.page><f:if condition="{iterator.isLast} == false">, </f:if>
                                </f:for>
                            </p>
                        </f:if>
                    </div>
                </div>

                <f:if condition="{product.teaserText}">
                    <p class="flex-grow not-italic pt-4 text-sm md:text-base lg:text-lg">{product.teaserText}</p>
                </f:if>

                <a 
                    :href="populatedDetailPageLink" 
                    class="btn-tertiary not-italic flex justify-between group pt-6 lg:pt-3"
                    data-tracking-id="product teaser"
                    data-tracking-value="{product.title}"
                >
                    <span class="whitespace-nowrap overflow-hidden text-ellipsis">
                        {product.teaserLinkText}
                    </span>
                    <svg-icon class="group-hover:hidden" src="arrow_default"></svg-icon>
                    <svg-icon class="hidden group-hover:flex" src="arrow_hover"></svg-icon>
                </a>
            </div>
        </figcaption>
    </figure>
</div>