{# ThemeWare "USP bar" content #}

{# ---------------- START: SET TEMPLATE VARS ---------------- #}

{# ThemeWare: Set theme variables #}
{% set twtUspBarBreakpointItem1 = theme_config('twt-usp-bar-breakpoint-item-1') %}
{% set twtUspBarBreakpointItem2 = theme_config('twt-usp-bar-breakpoint-item-2') %}
{% set twtUspBarBreakpointItem3 = theme_config('twt-usp-bar-breakpoint-item-3') %}
{% set twtUspBarBreakpointItem4 = theme_config('twt-usp-bar-breakpoint-item-4') %}
{% set twtUspBarBreakpointItem5 = theme_config('twt-usp-bar-breakpoint-item-5') %}
{% set twtUspBarBreakpointItem6 = theme_config('twt-usp-bar-breakpoint-item-6') %}

{# ---------------- END: SET TEMPLATE VARS ---------------- #}

{# ThemeWare: USP bar items #}
{% block twt_usp_bar_content %}
	{# ThemeWare: Check 'maxitems' (= $twt-widget-benefits-content-max-items (only in 'Benefits widget')) and set itemsshow #}
	{% if maxitems %}
		{# ThemeWare: maxitems is set = benefits widget #}
		{% set itemsshow = false %}
	{% else %}
		{# ThemeWare: maxitems is not set = usp-bar #}
		{% set itemsshow = true %}
	{% endif %}

	{% set itemId = 0 %}
	{# TODO: set itemFirst = 0 ?! #}
	{# TODO: set itemLast = 0 ?! #}

	{# ThemeWare: USP bar item 1 #}
	{% if twtUspBarBreakpointItem1 > 1 %}
		{% set itemId = itemId + 1 %}

		{% block twt_widget_usp_bar_item_1 %}
			{% if itemsshow or maxitems >= 1 %}
				<div class="twt-usp-bar-item twt-usp-{{ itemId }} item-1"
					 data-toggle="tooltip"
					 data-placement="{% if type == "header" %}bottom{% else %}top{% endif %}"
					 title="{{ "twt.extension.uspBar.tooltip1"|trans }}">
					<div class="item-icon">
						{% sw_include '@Storefront/storefront/themeware/twt-icons.html.twig' ignore missing with {
							iconname: "twt.extension.uspBar.icon1"|trans
						} %}
					</div>
					<div class="item-label">{{ "twt.extension.uspBar.item1"|trans|raw }}</div>
				</div>
			{% endif %}
		{% endblock %}
	{% endif %}

	{# ThemeWare: USP bar item 2 #}
	{% if twtUspBarBreakpointItem2 > 1 %}
		{% set itemId = itemId + 1 %}

		{% block twt_widget_usp_bar_item_2 %}
			{% if itemsshow or maxitems >= 2 %}
				<div class="twt-usp-bar-item twt-usp-{{ itemId }} item-2"
					 data-toggle="tooltip"
					 data-placement="{% if type == "header" %}bottom{% else %}top{% endif %}"
					 title="{{ "twt.extension.uspBar.tooltip2"|trans }}">
					<div class="item-icon">
						{% sw_include '@Storefront/storefront/themeware/twt-icons.html.twig' ignore missing with {
							iconname: "twt.extension.uspBar.icon2"|trans
						} %}
					</div>
					<div class="item-label">{{ "twt.extension.uspBar.item2"|trans|raw }}</div>
				</div>
			{% endif %}
		{% endblock %}
	{% endif %}

	{# ThemeWare: USP bar item 3 #}
	{% if twtUspBarBreakpointItem3 > 1 %}
		{% set itemId = itemId + 1 %}

		{% block twt_widget_usp_bar_item_3 %}
			{% if itemsshow or maxitems >= 3 %}
				<div class="twt-usp-bar-item twt-usp-{{ itemId }} item-3"
					 data-toggle="tooltip"
					 data-placement="{% if type == "header" %}bottom{% else %}top{% endif %}"
					 title="{{ "twt.extension.uspBar.tooltip3"|trans }}">
					<div class="item-icon">
						{% sw_include '@Storefront/storefront/themeware/twt-icons.html.twig' ignore missing with {
							iconname: "twt.extension.uspBar.icon3"|trans
						} %}
					</div>
					<div class="item-label">{{ "twt.extension.uspBar.item3"|trans|raw }}</div>
				</div>
			{% endif %}
		{% endblock %}
	{% endif %}

	{# ThemeWare: USP bar item 4 #}
	{% if twtUspBarBreakpointItem4 > 1 %}
		{% set itemId = itemId + 1 %}

		{% block twt_widget_usp_bar_item_4 %}
			{% if itemsshow or maxitems >= 4 %}
				<div class="twt-usp-bar-item twt-usp-{{ itemId }} item-4"
					 data-toggle="tooltip"
					 data-placement="{% if type == "header" %}bottom{% else %}top{% endif %}"
					 title="{{ "twt.extension.uspBar.tooltip4"|trans }}">
					<div class="item-icon">
						{% sw_include '@Storefront/storefront/themeware/twt-icons.html.twig' ignore missing with {
							iconname: "twt.extension.uspBar.icon4"|trans
						} %}
					</div>
					<div class="item-label">{{ "twt.extension.uspBar.item4"|trans|raw }}</div>
				</div>
			{% endif %}
		{% endblock %}
	{% endif %}

	{# ThemeWare: USP bar item 5 #}
	{% if twtUspBarBreakpointItem5 > 1 %}
		{% set itemId = itemId + 1 %}

		{% block twt_widget_usp_bar_item_5 %}
			{% if itemsshow or maxitems >= 5 %}
				<div class="twt-usp-bar-item twt-usp-{{ itemId }} item-5"
					 data-toggle="tooltip"
					 data-placement="{% if type == "header" %}bottom{% else %}top{% endif %}"
					 title="{{ "twt.extension.uspBar.tooltip5"|trans }}">
					<div class="item-icon">
						{% sw_include '@Storefront/storefront/themeware/twt-icons.html.twig' ignore missing with {
							iconname: "twt.extension.uspBar.icon5"|trans
						} %}
					</div>
					<div class="item-label">{{ "twt.extension.uspBar.item5"|trans|raw }}</div>
				</div>
			{% endif %}
		{% endblock %}
	{% endif %}

	{# ThemeWare: USP bar item 6 #}
	{% if twtUspBarBreakpointItem6 > 1 %}
		{% set itemId = itemId + 1 %}

		{% block twt_widget_usp_bar_item_6 %}
			{% if itemsshow or maxitems >= 6 %}
				<div class="twt-usp-bar-item twt-usp-{{ itemId }} item-6"
					 data-toggle="tooltip"
					 data-placement="{% if type == "header" %}bottom{% else %}top{% endif %}"
					 title="{{ "twt.extension.uspBar.tooltip6"|trans }}">
					<div class="item-icon">
						{% sw_include '@Storefront/storefront/themeware/twt-icons.html.twig' ignore missing with {
							iconname: "twt.extension.uspBar.icon6"|trans
						} %}
					</div>
					<div class="item-label">{{ "twt.extension.uspBar.item6"|trans|raw }}</div>
				</div>
			{% endif %}
		{% endblock %}
	{% endif %}
{% endblock %}