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

<div 
    class="group min-h-[300px] h-full"
    x-data="productComparisonTeaser"

    data-model="{model -> f:format.raw()}"
>
    <div class="flex flex-col relative h-full">
        <div class="px-2 md:px-10 -mb-12 lg:-mb-[40%] z-10">
            <img :src="activeVariationDetailImage.url" alt="">
        </div>

        <div class="grow flex flex-col rounded-lg border-2 border-grey-light px-4 md:px-6 lg:px-8 pt-16 lg:pt-52 pb-4 md:pb-6 lg:pb-8 group-hover:shadow-standard-dark-blue transition-all duration-300">
            <f:if condition="{product.presenter.productVariation.program.title}">
                <header class="border-t-2 border-b-2 border-grey-light py-2 md:py-3">
                    <p class="md:text-sm font-bold md:pb-2">{product.title}</p>
                    <p class="md:text-lg font-bold text-brand">{product.presenter.productVariation.program.title}</p>
                </header>
            </f:if>
                
            <div class="grow flex flex-col">
                <f:render partial="Elements/Colorbadges/ColorpickerList" />
                
                <f:if condition="{product.presenter.productVariation.presenter.image.mainMaterial}">
                    <div class="py-2 border-b-2 border-grey-light">
                        <p class="text-[8px] md:text-[10px] text-grey-medium">Material</p>
                        <p class="text-xs md:text-lg text-brand">
                            {product.presenter.productVariation.presenter.image.mainMaterial.title}<f:if condition="{product.presenter.productVariation.presenter.image.frameMaterial}">, {product.presenter.productVariation.presenter.image.frameMaterial.title}</f:if>
                        </p>
                    </div>
                </f:if>
    
                <f:if condition="{product.presenter.productVariation}">
                    <div class="py-2 border-b-2 border-grey-light">
                        <p class="text-[8px] md:text-[10px] text-grey-medium">Maße</p>
                        <p class="text-xs md:text-lg text-brand">
                            {product.presenter.productVariation.dimensions}
                        </p>
                    </div>
                </f:if>
    
                <div>
                    <f:if condition="{product.teaserLinkText}">
                        <f:link.page pageUid="{product.page}" class="btn-tertiary not-italic flex justify-between group pt-6 lg:pt-3">
                            <span class="whitespace-nowrap overflow-hidden text-ellipsis max-w-[80px] md:max-w-full">
                                {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>
                        </f:link.page>
                    </f:if>
                </div>
            </div>
        </div>
    </div>
</div>