{% sw_extends '@parent/storefront/element/cms-element-oo-usp-horizontal.html.twig' %}
{% block element_oo_usp_wrapper %}
<div class="usp-list-horizontal {{ element.config.version.value|default('version-01') }} " style="{{ element.config.blockAlignment ? 'justify-content: ' ~ element.config.blockAlignment.value|default('center') ~ ';' : '' }}">
<div class="line"></div>
<ul>
<div>
{# This file is also used as an include inside checkout, therefore we're checking if every value has been set. #}
{% if element.config.usp1text.value is not null and element.config.usp1text.value is not empty %}
<li>
{% sw_include "@parent/storefront/utilities/icon.html.twig" ignore missing with { 'name': element.config.usp1icon.value|default('fa-check'), 'size': 'xs', 'class': element.config.usp1iconStyle.value|default('far')} %}
{{ element.config.usp1text.value }}
</li>
{% endif %}
{% if element.config.usp2text.value is not null and element.config.usp2text.value is not empty %}
<li>
{% sw_include "@parent/storefront/utilities/icon.html.twig" ignore missing with { 'name': element.config.usp2icon.value|default('fa-check'), 'size': 'xs', 'class': element.config.usp2iconStyle.value|default('far')} %}
{{ element.config.usp2text.value }}
</li>
{% endif %}
{% if element.config.usp3text.value is not null and element.config.usp3text.value is not empty %}
<li>
{% sw_include "@parent/storefront/utilities/icon.html.twig" ignore missing with { 'name': element.config.usp3icon.value|default('fa-check'), 'size': 'xs', 'class': element.config.usp3iconStyle.value|default('far')} %}
{{ element.config.usp3text.value }}
</li>
{% endif %}
{% if element.config.usp4text.value is not null and element.config.usp4text.value is not empty %}
<li>
{% sw_include "@parent/storefront/utilities/icon.html.twig" ignore missing with { 'name': element.config.usp4icon.value|default('fa-check'), 'size': 'xs', 'class': element.config.usp4iconStyle.value|default('far')} %}
{{ element.config.usp4text.value }}
</li>
{% endif %}
{% if element.config.usp5text.value is not null and element.config.usp5text.value is not empty %}
<li>
{% sw_include "@parent/storefront/utilities/icon.html.twig" ignore missing with { 'name': element.config.usp5icon.value|default('fa-check'), 'size': 'xs', 'class': element.config.usp5iconStyle.value|default('far')} %}
{{ element.config.usp5text.value }}
</li>
{% endif %}
{% if element.config.usp6text.value is not null and element.config.usp6text.value is not empty %}
<li>
{% sw_include "@parent/storefront/utilities/icon.html.twig" ignore missing with { 'name': element.config.usp6icon.value|default('fa-check'), 'size': 'xs', 'class': element.config.usp6iconStyle.value|default('far')} %}
{{ element.config.usp6text.value }}
</li>
{% endif %}
</ul>
</div>
{% endblock %}