{namespace vh=Newland\NeosViewHelpers\ViewHelpers}
{namespace common=Newland\Toubiz\Common\Neos\ViewHelpers}
{namespace poi=Newland\Toubiz\Poi\Neos\ViewHelpers}

<common:slot.render slot="aboveImage" context="{ article: article }" />
<common:slot.render slot="aboveTeaserImage" context="{ article: article }" />
<div class="tb-teaser__image-wrapper">
    <f:if condition="{article.mainMedium.uri}">
        <f:then>
            <f:if condition="{article.sourceSystem} === 'toubiz'">
                <f:then>
                    <img
                        data-src="{article.mainMedium.sourceUri}?w=500"
                        alt="{article.mainMedium.title}"
                        class="tb-teaser__image lazyload"
                        {f:if(condition: article.mainMedium.focusPoint, then: 'style="object-position: {article.mainMedium.focusPoint}"')}
                    />
                </f:then>
                <f:else>
                    <f:if condition="{article.sourceSystem} === 'tportal'">
                        <f:then>
                            <img
                                data-src="{poi:uri.tportal.image(url: article.mainMedium.previewUri, width: 450)}"
                                alt="{article.mainMedium.title}"
                                class="tb-teaser__image lazyload"
                            />
                        </f:then>
                        <f:else>
                            <img
                                data-src="{article.mainMedium.previewUri}"
                                alt="{article.mainMedium.title}"
                                class="tb-teaser__image lazyload"
                            />
                        </f:else>
                    </f:if>
                </f:else>
            </f:if>
        </f:then>
        <f:else>
            <img
                data-src="https://mein.toubiz.de/api/v1/file/placeholder/preview?fm=image/jpeg&w=400"
                alt=""
                class="tb-teaser__image lazyload"
            />
        </f:else>
    </f:if>
    <vh:render section="badge" arguments="{ article: article }" />
    <common:slot.render slot="onImage" context="{ article: article }" />
    <common:slot.render slot="onTeaserImage" context="{ article: article }" />
</div>
<common:slot.render slot="belowImage" context="{ article: article }" />
<common:slot.render slot="belowTeaserImage" context="{ article: article }" />

<f:section name="badge">
    <f:if condition="{article.flatAttributes.labels.top}">
        <span>
            <div class="tb-badge">
                <vh:translate
                    id="property.attribute.labels.top"
                    package="Newland.Toubiz.Poi.Neos"
                    source="Views/Teaser"
                />
            </div>
        </span>
    </f:if>
</f:section>
