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

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

{# ThemeWare: Set theme variables #}
{% set twtHeaderSearchType = theme_config('twt-header-search-type') %}
{% set twtHeaderSearchShow = theme_config('twt-header-search-show') %}
{% set twtHeaderType = theme_config('twt-header-type') %}
{% set twtNavMainShow = theme_config('twt-nav-main-show') %}
{% set twtHeaderTypeCompatibility = theme_config('twt-header-type-compatibility') %}

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

{# TODO: prüfen... #}
{# TODO: Add "twtHeaderTypeCompatibility"-if to disable all header-adjustments #}

{# ThemeWare: Remove search input when "Flyout search" is configured
	- "Flyout search" (twt-header-search-type 2) must be used in "Header 2.1" (twt-header-type 4)
#}
{% block layout_header_search %}
	{% if twtHeaderSearchType == 2 or twtHeaderSearchType == 4 or twtHeaderType == 4 %}
		{# ThemeWare: Remove search input #}
	{% else %}

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


{# ThemeWare: Adjustments on the navigation toggle #}
{% block layout_header_navigation_toggle %}

	{# ThemeWare: Add classes to hide the toggle if configured #}
	{% set blockClassesMenuButton = ['col'] %}
	
	{# ThemeWare: Top navigation => hide #}
	{% if twtNavMainShow == 1 %}
		{% set blockClassesMenuButton = ['d-block d-lg-none']|merge(blockClassesMenuButton) %}
	{% endif %}
	
	{# ThemeWare: Top navigation => list #}
	{% if twtNavMainShow == 2  %}
		{# ThemeWare: "Header 2.1" (twt-header-type 4) #}
		{% if twtHeaderType == 4 %}
			{% set blockClassesMenuButton = ['d-block d-lg-none']|merge(blockClassesMenuButton) %}
		{% else %}

			{# ThemeWare: "Flyout search" (twt-header-search-type 2) #}
			{% if twtHeaderSearchType == 2 or twtHeaderSearchType == 4 %}
				{% set blockClassesMenuButton = ['d-block d-lg-none']|merge(blockClassesMenuButton) %}
			{% else %}
				{% set blockClassesMenuButton = ['d-block d-sm-none']|merge(blockClassesMenuButton) %}
			{% endif %}
		{% endif %}
	{% endif %}
	
	{# ThemeWare: Top navigation => button #}
	{% if twtNavMainShow == 3 %}
		{# ThemeWare: "Flyout search" (twt-header-search-type 2) #}
		{% if twtHeaderSearchType == 2 or twtHeaderSearchType == 4 %}
			{% set blockClassesMenuButton = ['d-block']|merge(blockClassesMenuButton) %}
		{% else %}

			{# ThemeWare: "Header 2.1" (twt-header-type 4) #}
			{% if twtHeaderType == 4 %}
				{% set blockClassesMenuButton = ['d-sm-block']|merge(blockClassesMenuButton) %}
			{% else %}
				{% set blockClassesMenuButton = ['d-sm-none d-lg-block']|merge(blockClassesMenuButton) %}
			{% endif %}
		{% endif %}
	{% endif %}
	
	<div class="{{ blockClassesMenuButton|join(' ') }}">
		<div class="menu-button">
			{% block layout_header_navigation_toggle_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 }}">
					{% block layout_header_navigation_toggle_button_icon %}
						{% sw_icon 'stack' %}
					{% endblock %}
					{# ThemeWare: Add label 'Navigation' to toggle #}
					<span class="header-nav-main-toggle-label">
						{{ "twt.header.offcanvasMenuText"|trans }}
					</span>
				</button>
			{% endblock %}
		</div>
	</div>
{% endblock %}


{# ThemeWare: Adjustments on the navigation toggle-icon @tablet #}
{# TODO: Default-Konfiguration ergänzen... #}
{% block layout_header_navigation_toggle_tablet_button_icon %}
	{% sw_icon 'stack' %}
	{# ThemeWare: Add label 'Navigation' to toggle-icon #}
	<span class="header-nav-main-toggle-label">
		{{ "twt.header.offcanvasMenuText"|trans }}
	</span>
{% endblock %}


{# ThemeWare: Adjustments on the search toggle
	- $twt-header-search-show: 1 don't, 2 show > d-none
	- $twt-header-search-type: 1 input, 2 flyout > d-sm-none
#}
{# TODO:
	- Default-Konfiguration ergänzen...
	- "Header 2.1" (twt-header-type 4) ggf. berücksichtigen ?!
#}
{% block layout_header_search_toggle %}
	{# ThemeWare: Add classes to hide the toggle if configured #}
	{% set blockClassesSearchToggle = ['col-auto'] %}

	{% if twtHeaderSearchShow == 1 %}
		{% set blockClassesSearchToggle = ['d-none']|merge(blockClassesSearchToggle) %}
	{% endif %}

	{#  ThemeWare: "Flyout search" (twt-header-search-type 2) #}
	{% if twtHeaderSearchType != 2 and twtHeaderSearchType != 4 %}
		{% set blockClassesSearchToggle = ['d-sm-none']|merge(blockClassesSearchToggle) %}
	{% endif %}

	<div class="{{ blockClassesSearchToggle|join(' ') }}">
		  <div class="search-toggle">
				<button class="btn header-actions-btn search-toggle-btn js-search-toggle-btn collapsed"
						  type="button"
						  data-toggle="collapse"
						  data-target="#searchCollapse"
						  aria-expanded="false"
						  aria-controls="searchCollapse"
						  aria-label="{{ "header.searchButton"|trans|striptags }}">
					{# ThemeWare: Add wrapper 'header-search-toggle-icon' around sw_icon + add 'x' icon #}
					 <span class="header-search-toggle-icon">
						 {% sw_icon 'search' %}
						 {% sw_icon 'x' %}
					 </span>
					{# ThemeWare: Ad label 'header-search-toggle-name' #}
					 <span class="header-search-toggle-name">
						{{ "twt.header.searchText"|trans }}
					 </span>
				</button>
		  </div>
	 </div>
{% endblock %}