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

<v:variable.set name="pageUrl" value="{f:uri.page(pageUid: product.page)}" />

<div 
    class="group/card min-h-[300px] h-full" 
    x-data="productComparisonTeaser()"
    data-tracking-id="compare" 
    id="compare" 
    
    @program-selected="setProductVariationSelection"

    x-modelable="fetchUrl"
    x-model="endpoint"

    data-model="{model -> f:format.raw()}"
    data-detail-link="{f:uri.page(pageUid: product.page, absolute: 1)}"
>
    <div x-show="!isComparingProgramSelected" class="relative h-full flex flex-col">
        <div class="px-2 md:px-10 -mb-12 lg:-mb-44 z-10">
            <img src="{f:uri.image(src: 'EXT:sitepackage/Resources/Public/Images/product-comparison-placeholder.png')}" alt="">
        </div>

        <div class="grow overflow-hidden rounded-lg border-2 border-grey-light pt-16 lg:pt-52 pb-4 md:pb-6 lg:pb-8 group-hover/card:shadow-standard-dark-blue transition-all duration-300">
            <f:render partial="Elements/Dropdown/Dropdown" arguments="{
                isOpen: 1,
                blockToggle: 1,
                isFullHeight: 1
            }"/>
        </div>
    </div>

    <template x-if="isComparingProgramSelected">
        <f:render partial="Extensions/Product/Comparison/SelectedTeaser" arguments="{pageUrl: pageUrl}"/>
    </template>
</div>