{% set product = product|default(null) %}
<article class="product-teaser shadow stretch-link border-radius-4">
<div class="product-teaser__container-img">
<div class="ratio ratio-4x3">
{% if product.imageGallery.items and product.imageGallery.items[0] %}
{{ product.imageGallery.items[0].getThumbnail('product-teaser').getHTML({
imgAttributes: {
'class': 'ratio-item js-lazy-img product-teaser__img'
},
'lowQualityPlaceholder': true,
})|raw }}
{% endif %}
</div>
</div>
<div class="product-teaser__content">
<div class="d-flex flex-column">
<span class="product-teaser__title">{{ 'product.teaser.Model'|trans }}</span>
<span class="product-teaser__data product-teaser__data--bold">{{ product.manufacturer ~ ' ' ~ product.model }}</span>
</div>
{% if product.yoc != '' or product.liftingHeight != '' %}
<div class="product-teaser__container d-flex">
{% if product.yoc != '' %}
<div class="d-flex flex-column">
<span class="product-teaser__title">{{ 'product.detail.YearOfConstruction'|trans }}</span>
<span class="product-teaser__data">{{ product.yoc }}</span>
</div>
{% endif %}
{% if product.liftingHeight != '' %}
<div class="product-teaser__info-right d-flex flex-column">
<span class="product-teaser__title">{{ 'product.detail.LiftingHeight'|trans }}</span>
<span class="product-teaser__data">{{ product.liftingHeight }} {{ 'product.detail.LiftingHeight-suffix'|trans }}</span>
</div>
{% endif %}
</div>
{% endif %}
<div class="product-teaser__container-link d-flex">
<a class="text-gradient-primary product-teaser__category">{{ product.manufacturer }}</a>
<a href="{{ linkGenerator(product) }}"
class="btn btn-dark stretch-link__link"
data-event-tracking-event="select_product"
data-event-tracking-product_variant="{{ product.model }}"
data-event-tracking-product_category="{{ product.manufacturer }}"
data-event-tracking-link_url="{{ elements_host_url() ~ linkGenerator(product) }}">
{{ 'product.teaser.Detail'|trans }}
</a>
</div>
</div>
</article>