{% sw_extends '@Storefront/storefront/base.html.twig' %}

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

{# ThemeWare: Set theme variables #}
{% set twtContainerLayout = theme_config('twt-container-layout') %}
{% set twtAdditionalJsFile = theme_config('twt-additional-js-file') %}
{% set twtAdditionalJsFileAsync = theme_config('twt-additional-js-file-async') %}
{% set twtAnnoncementBannerShow = theme_config('twt-annoncement-banner-show') %}
{% set twtBodyClass = theme_config('twt-body-class') %}
{% set twtBodyClassCmsPageId = theme_config('twt-body-class-cms-page-id') %}
{% set twtContainerLayout = theme_config('twt-container-layout') %}
{% set twtContainerMaxWidth = theme_config('twt-container-max-width') %}
{% set twtFloatingWidgetAnimation = theme_config('twt-floating-widget-animation') %}
{% set twtFloatingWidgetBackdrop = theme_config('twt-floating-widget-backdrop') %}
{% set twtFloatingWidgetShow = theme_config('twt-floating-widget-show') %}
{% set twtFloatingWidgetShowOpened = theme_config('twt-floating-widget-show-opened') %}
{% set twtHeaderLogoType = theme_config('twt-header-logo-type') %}
{% set twtHeaderSearchType = theme_config('twt-header-search-type') %}
{% set twtHeaderType = theme_config('twt-header-type') %}
{% set twtLicensekey = theme_config('twt-footer-lizenzkey') %}
{% set twtShoppingExperiencesHeaderPosition = theme_config('twt-shopping-experiences-header-position') %}
{% set twtStickyNavMainBreakpoint = theme_config('twt-sticky-nav-main-breakpoint') %}
{% set twtStickyNavMainCartShow = theme_config('twt-sticky-nav-main-cart-show') %}
{% set twtStickyNavMainLogoImage = theme_config('twt-sticky-nav-main-logo-image') %}
{% set twtStickyNavMainLogoShow = theme_config('twt-sticky-nav-main-logo-show') %}
{% set twtStickyNavMainScrollTop = theme_config('twt-sticky-nav-main-scroll-top') %}
{% set twtStickyNavMainSearchShow = theme_config('twt-sticky-nav-main-search-show') %}
{% set twtStickyNavMainShow = theme_config('twt-sticky-nav-main-show') %}
{% set twtStickyNavMainToggle = theme_config('twt-sticky-nav-main-toggle') %}
{% set twtStickyNavMainType = theme_config('twt-sticky-nav-main-type') %}
{% set twtUspBarFooter = theme_config('twt-usp-bar-footer') %}
{% set twtUspBarFooterPosition = theme_config('twt-usp-bar-footer-position') %}
{% set twtUspBarHeader = theme_config('twt-usp-bar-header') %}
{% set twtUspBarHeaderPosition = theme_config('twt-usp-bar-header-position') %}

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

{# ThemeWare: Set custom fields #}
{% set twtCustomFields = {
	category: page.header.navigation.active.translated.customFields,
	product: page.product.translated.customFields
} %}

{# TODO: prüfen... #}
{# TODO: Kommentare formatieren, Blöcke mit TW #}

{# ThemeWare: add/change body inner #}
{% block base_body_inner %}
	{% set tcinn = true %}

    {% if twtLicensekey %}
		{% set twtLicensekeyValues = {} %}
		{% for letter in 0..9 %}
			{% set twtLicensekeyValues = twtLicensekeyValues|merge({
				(letter): (loop.index + 47)
			}) %}
		{% endfor %}
		{% for letter in 'A'..'Z' %}
			{% set twtLicensekeyValues = twtLicensekeyValues|merge({
				(letter): (loop.index + 64)
			}) %}
		{% endfor %}
		{% for letter in 'a'..'z' %}
			{% set twtLicensekeyValues = twtLicensekeyValues|merge({
				(letter): (loop.index + 96)
			}) %}
		{% endfor %}
		{% set twtLicensekeySum = 0 %}
		{% for char in twtLicensekey|replace({'-': ''})|split('') %}
			{% set twtLicensekeySum = (twtLicensekeySum + (twtLicensekeyValues[char] * (loop.index-1))) %}
		{% endfor %}
		{% if twtLicensekeySum == 11000 or (twtLicensekey starts with 'TL' and twtLicensekey|length == 16) %}
			{% set tcinn = false %}
		{% endif %}
    {% endif %}

	{# ThemeWare: Add additional wrapper in the body for boxed layout #}
	{% if twtContainerLayout == 3 %}
		<div class="container body-container">{{ parent() }}</div>
	{% else %}
		{# Default block #}
		{{ parent() }}
	{% endif %}
{% endblock %}


{# ThemeWare: Set body classes (reverse order) #}
{% set bodyClasses = [] %}

	{# ThemeWare: Apply category class #}
	{% if twtCustomFields.category.twt_modern_pro_custom_field__category__body_class is not empty %}
		{% set bodyClasses = [twtCustomFields.category.twt_modern_pro_custom_field__category__body_class|lower]|merge(bodyClasses) %}
	{% endif %}

	{# ThemeWare: Theme body class #}
	{% if twtBodyClass %}
		{% set bodyClasses = [twtBodyClass]|merge(bodyClasses) %}
	{% endif %}

	{# ThemeWare: Theme logged-in class #}
	{% if context.customer is not empty %}{% set bodyClasses = ['twt-is-logged-in']|merge(bodyClasses) %}{% endif %}

	{# ThemeWare: Add CMS-Page-ID #}
	{% if page.cmsPage.type != NULL %}
		{% if twtBodyClassCmsPageId == 2 %}
			{% set bodyClasses = ['twt-cms-id-' ~ page.cmsPage.id]|merge(bodyClasses) %}
		{% endif %}
		{% if twtBodyClassCmsPageId == 3 %}
			{% set bodyClasses = ['twt-cms-id-' ~ page.cmsPage.id|slice(0, 7)]|merge(bodyClasses) %}
		{% endif %}
	{% endif %}

	{# ThemeWare: Add CMS-Pagetype #}
	{% if page.cmsPage.type != NULL %}
		{% set bodyClasses = ['twt-is-cms-' ~ page.cmsPage.type|replace({ "_":"-" })]|merge(bodyClasses) %}
	{% endif %}

	{# ThemeWare: Add container layout #}
	{% if twtContainerLayout == 1 %}
		{% set bodyClasses = ['twt-full-width']|merge(bodyClasses) %}
	{% elseif twtContainerLayout == 2 %}
		{% set bodyClasses = ['twt-full-width-boxed']|merge(bodyClasses) %}
	{% elseif twtContainerLayout == 3 %}
		{% set bodyClasses = ['twt-boxed']|merge(bodyClasses) %}
	{% endif %}

	{# ThemeWare: Apply "Shopping experience header" class #}
	{% if twtCustomFields.category.twt_modern_pro_custom_field__category__shopping_experiences_header is not empty and twtCustomFields.category.twt_modern_pro_custom_field__category__shopping_experiences_header == "1" %}
		{% set bodyClasses = ['twt-shopping-experiences-header']|merge(bodyClasses) %}
	{% endif %}

	{# ThemeWare: Add header type #}
	{% if twtHeaderType %}
		{% set bodyClasses = ['twt-header-type-' ~ twtHeaderType]|merge(bodyClasses) %}
	{% endif %}

	{# ThemeWare: Theme variant class #}
	{% set bodyClasses = ['twt-modern']|merge(bodyClasses) %}

	{# ThemeWare: ThemeWare class #}
	{% set bodyClasses = ['themeware']|merge(bodyClasses) %}

{# ThemeWare: Add body classes
	- Replace: tab, new line, return, NUL-byte, vertical tab
#}
{% block base_body_classes %}{{ parent() }}{% apply replace({"\t":"", "\n":"", "\r":"", "\0":"", "\x0B":"", "\r\n":""}) %} {{ bodyClasses|join(' ') }}{% endapply %}{% endblock %}


{# ThemeWare: Add/change header #}
{% block base_header %}
	{# ThemeWare: Announcement banner #}
	{% if twtAnnoncementBannerShow > 1 %}
		{% sw_include '@Storefront/storefront/themeware/twt-announcement-banner.html.twig' ignore missing with {
			type: 'header',
			alignment: 'top',
			close: 'false'
		} %}
	{% endif %}

	{# ThemeWare: Add usp-bar above the header #}
	{% if twtUspBarHeader > 1 and twtUspBarHeaderPosition == 1 %}
		{% sw_include '@Storefront/storefront/themeware/twt-usp-bar.html.twig' ignore missing with {
			type: 'header',
			alignment: 'top'
		} %}
	{% endif %}

	{# Default block #}
	{{ parent() }}

	{# ThemeWare: Add usp-bar to header bottom (above navi) #}
	{% if twtUspBarHeader > 1 and twtUspBarHeaderPosition == 2 %}
		{% sw_include '@Storefront/storefront/themeware/twt-usp-bar.html.twig' ignore missing with {
			type: 'header'
		} %}
	{% endif %}
{% endblock %}


{# ThemeWare: Add/change footer #}
{% block base_footer %}
	{# ThemeWare: Add "USP bar" to footer #}
	{% if twtUspBarFooter > 1 and twtUspBarFooterPosition == 1 %}
		{% sw_include '@Storefront/storefront/themeware/twt-usp-bar.html.twig' ignore missing with {
			type: 'footer'
		} %}
	{% endif %}

	{# Default block #}
	{{ parent() }}

	{# ThemeWare: Add "Floating communities" to footer #}
	{# TODO: Add configuration #}
	{# TODO: Exclude div #}
	{#
	{% sw_include '@Storefront/storefront/themeware/twt-floating-communities.html.twig' ignore missing %}
	#}

	{# ThemeWare: Add "Floating widget" to footer #}
	{% if twtFloatingWidgetShow == 2 %}
		{% sw_include '@Storefront/storefront/themeware/twt-floating-widget.html.twig' ignore missing with {
			open: twtFloatingWidgetShowOpened,
			animation: twtFloatingWidgetAnimation,
			backdrop: twtFloatingWidgetBackdrop
		} %}
	{% endif %}
{% endblock %}


{# ThemeWare: Add/change main navigation #}
{# TODO: Check compatibility #}
{% block base_navigation %}
	{# ThemeWare: Add sticky data attribute #}
	{% if twtStickyNavMainShow > 1 %}
		{# ThemeWare: Set data only if sticky navigation is activated #}
		<div class="nav-main"
			 data-twt-shopping-experiences-nav="{{ twtShoppingExperiencesHeaderPosition }}"
			 data-twt-sticky-layout="{{ twtStickyNavMainType }}"
			 data-twt-sticky-breakpoint="{{ twtStickyNavMainBreakpoint }}"
			 data-twt-sticky-search="{{ twtStickyNavMainSearchShow }}"
			 data-twt-sticky-cart="{{ twtStickyNavMainCartShow }}"
			 data-twt-sticky-scroll-top="{{ twtStickyNavMainScrollTop }}"
			 data-twt-sticky-container-width="{{ twtContainerMaxWidth }}">
			{% block base_navigation_inner %}
				<div class="container">

					{# ThemeWare: Add sticky logo for sticky-navigation #}
					{% if twtStickyNavMainLogoShow == 2 and twtStickyNavMainLogoImage %}
						{% block layout_sticky_logo %}
							<div id="sticky-logo" class="d-none">
								<a class="sticky-logo-main-link" href="{{ path('frontend.home.page') }}" title="{{ "header.logoLink"|trans|striptags }}">
									<picture>

										{# Default logo #}
										{% if twtHeaderLogoType != 2 %}
											<img src="{{ twtStickyNavMainLogoImage |sw_encode_url }}" alt="{{ "header.logoLink"|trans|striptags }}" />
										{% endif %}

										{# ThemeWare Text-Logo #}
										{% block twt_layout_header_textlogo %}
											{% if twtHeaderLogoType == 2 %}
												{% sw_include '@Storefront/storefront/themeware/includes/twt-textlogo-include.html.twig' ignore missing with {
													sticky: true
												} %}
											{% endif %}
										{% endblock %}

									</picture>
								</a>
							</div>
						{% endblock %}
					{% endif %}

					{# ThemeWare: Add nav-main-toggle for sticky-navigation #}
					{% if twtStickyNavMainToggle == 2 or twtStickyNavMainShow == 3 %}
						{% block layout_sticky_navigation_toggle %}
							<div id="sticky-nav-main-toggle" class="d-none">
								<div class="menu-button">
									<button class="btn nav-main-toggle-btn header-actions-btn"	type="button" title="{{ "twt.header.offcanvasMenuText"|trans }}" data-offcanvas-menu="true" aria-label="{{ "general.menuLink"|trans|striptags }}">
									{% sw_icon 'stack' %}
									{# ThemeWare: Add label 'Navigation' to toggle-icon #}
									<span class="header-nav-main-toggle-label">
										{{ "twt.header.offcanvasMenuText"|trans }}
									</span>
									</button>
								</div>
							</div>
						{% endblock %}
					{% endif %}

					{# ThemeWare: Add cart-button for sticky-navigation #}
					{% if twtStickyNavMainCartShow == 2 %}
						<span id="js-sticky-cart-position" class="d-none"></span>
					{% endif %}

					{# ThemeWare: Add search-button for sticky-navigation #}
					{% if twtStickyNavMainSearchShow == 2 %}
						<span id="js-sticky-search-position" class="d-none"></span>
					{% endif %}
				</div>

				{# Default block #}
				{{ parent() }}
			{% endblock %}
		</div>
	{% else %}

		{# Default block #}
		{{ parent() }}
	{% endif %}

	{# ThemeWare: Add elements after the main navigation... #}

	{# ThemeWare: New position for the search container with "Flyout search" (twt-header-search-type 2) or "Header 2.1" (twt-header-type 4)
		- Note: "Flyout search" (twt-header-search-type 2) must be used in "Header 2.1" (twt-header-type 4)
	#}
	{% if twtHeaderSearchType == 2 or  twtHeaderSearchType == 4 or twtHeaderType == 4 %}
		{% block twt_layout_header_search_on_header %}
			<div class="search-container">
				{% sw_include '@Storefront/storefront/layout/header/search.html.twig' %}
			</div>
		{% endblock %}
	{% endif %}

	{# ThemeWare: Add USP bar below the header #}
	{% if twtUspBarHeader > 1 and twtUspBarHeaderPosition == 3 %}
		{% sw_include '@Storefront/storefront/themeware/twt-usp-bar.html.twig' ignore missing with {
			type: 'header',
			alignment: 'top'
		} %}
	{% endif %}
{% endblock %}


{# ThemeWare: Add external JavaScript file #}
{# TODO: Check with v6.5.0 #}
{% block base_body_script %}
	{# Default block #}
	{{ parent() }}

	{% if twtAdditionalJsFile %}
		<script type="text/javascript" src="{{ twtAdditionalJsFile }}" {% if twtAdditionalJsFileAsync == 2 %}async{% endif %}></script>
	{% endif %}
{% endblock %}