{% block component_product_teaser_properties %}
<div class="product-teaser-properties row mx-n2">
{% for element in group.elements %}
{% if element.translated.customFields.custom_property_groups_teaser_prod_prop %}
{% set activeOptions = element.options.elements|filter(o => o.group) %}
{% set firstColor = (activeOptions|first).colorHexCode|default('#c4e76a') %}
{% set lastColor = (activeOptions|last).colorHexCode|default('#0d553f') %}
{% set border = (activeOptions|length == 1) ? 'unset' : '1px solid gray' %}
{% set background = (activeOptions|length == 1)
? (activeOptions|first).colorHexCode
: ('linear-gradient(90deg, {0} 50%, {1} 50%)'|replace({ '{0}': firstColor, '{1}': lastColor })) %}
{% set value = activeOptions|filter(v => v.name not in ['Ja', 'Nein', 'Yes', 'No'])|map(v => v.translated.name)|join('/') %}
<div class="col-auto px-2">
<span class="property-bullet-point" style="background: {{ background }}; border: {{ border }}"></span>
<span>{{ element.translated.name|e }} {{ value }}</span>
</div>
{% endif %}
{% endfor %}
</div>
{% endblock %}