{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 }" />
<f:if condition="{article.sourceSystem} === 'toubiz'">
    <f:then>
        <div class="tb-teaser__image-wrapper">
            <img
                data-src="{settings.toubizBaseUri}/api/v1/article/{article.originalId}/mainImage?format=image/jpeg&width=500"
                alt="{article.mainMedium.title}"
                class="tb-teaser__image lazyload"
                itemprop="image url"
                {f:if(condition: article.mainMedium.focusPoint, then: 'style="object-position: {article.mainMedium.focusPoint}"')}
            />

            <vh:render section="badge" arguments="{ article: article }" />
            <common:slot.render slot="onImage" context="{ article: article }" />
            <common:slot.render slot="onTeaserImage" context="{ article: article }" />
        </div>
    </f:then>
    <f:else if="{article.mainMedium}">
        <div class="tb-teaser__image-wrapper">
            <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"
                        itemprop="image url"
                    />
                </f:then>
                <f:else>
                    <img
                        data-src="{article.mainMedium.previewUri}"
                        alt="{article.mainMedium.title}"
                        class="tb-teaser__image lazyload"
                        itemprop="image url"
                    />
                </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>
    </f:else>
    <f:else>
        <div class="tb-teaser__image-wrapper">
            <div class="tb-teaser__image-fallback">
                <svg class="c-icon">
                    <use xlink:href="#icon-image"></use>
                </svg>
            </div>

            <vh:render section="badge" arguments="{ article: article }" />
            <common:slot.render slot="onImage" context="{ article: article }" />
            <common:slot.render slot="onTeaserImage" context="{ article: article }" />
        </div>
    </f:else>
</f:if>
<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 itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
            <meta itemprop="name" content="label" />
            <div class="tb-badge" itemprop="value">
                <vh:translate
                    id="property.attribute.labels.top"
                    package="Newland.Toubiz.Poi.Neos"
                    source="Views/Teaser" />

            </div>
        </span>
    </f:if>
</f:section>