{# N.b. see https://symfony.com/blog/better-white-space-control-in-twig-templates for what the -s and ~s are used for. #}

{# Required to use Twig functions #}
{%~ import _self as self %}

{%~ macro featureImageOnClickEvent(menuNodeId) %}
	if (!window.zenarioA) return true;
	if (zenarioA.pageMode == 'menu') {
		zenarioAB.open('zenario_menu', {'mID':'{{menuNodeId}}'}, 'feature_image');
		return false;
	}
{%~ endmacro %}

{%~ macro addOnMouseOver(containerId, currentLevelNodeId, topLevelNodeId, menuNodeHasOwnFeatureImage) %}
		
	{# This line must be included again if a function calls another function. #}
	{%~ import _self as self %}
	
	{# Define variables to avoid having to use quotes later #}
	{%~ set topLevelId = topLevelNodeId['id'] %}
	{%~ set topLevelTitle = topLevelNodeId['title'] %}
	{%~ set topLevelText = topLevelNodeId['text'] %}
	
	{%~ set currentLevelId = currentLevelNodeId['id'] %}
	{%~ set currentLevelImageLink = currentLevelNodeId['feature_image_link'] %}
	{%~ set currentLevelImageSrcset = currentLevelNodeId['Image_Srcset'] %}
	{%~ set currentLevelImageWidth = currentLevelNodeId['feature_image_width'] %}
	{%~ set currentLevelImageHeight = currentLevelNodeId['feature_image_height'] %}
	{%~ set currentLevelDestUrl = currentLevelNodeId['dest_url'] %}
	{%~ set currentLevelTitle = (currentLevelNodeId['title'] ? currentLevelNodeId['title'] : '&nbsp') %}
	{%~ set currentLevelText = (currentLevelNodeId['text'] ? currentLevelNodeId['text'] : '<p>&nbsp</p>') %}
	{%~ set currentLevelLinkType = currentLevelNodeId['link_type'] %}
	
	onmouseover="
		
		{# Title/description fallback logic: use the parent node details #}
		{%~ set title = (topLevelTitle ? topLevelTitle|e('js') : "&nbsp;") %}
		{%~ set desc = (topLevelText ? topLevelText|e('js') : "&nbsp;") %}
		
		$('#{{containerId}} .feature_title').html('<h2>{{title}}</h2>');
		$('#{{containerId}} .feature_text').html('{{desc}}');
		
		{# Replace the currently displayed featured image #}
		var el = zenario.get('{{containerId}}_node_id_{{topLevelId}}_feature_img');
		if (el) {
			if (zenario.addBasePath('{{currentLevelImageLink}}') != el.src) {
				$('#' + el.id).show();
				$('#' + el.id).stop().fadeTo(0, 0);
				el.src='{{currentLevelImageLink}}';
				el.srcset='{{currentLevelImageSrcset}}';
				el.width='{{currentLevelImageWidth}}';
				el.height='{{currentLevelImageHeight}}';
				$('#' + el.id).stop().fadeTo(600, 1);
			}
			{# Allow an admin to click on the image in Edit Menu mode to edit the current menu node properties. #}
			$('#' + el.id).removeAttr('onclick');
			{%~ if menuNodeHasOwnFeatureImage %}
				$('#' + el.id).attr('onclick', '{{self.featureImageOnClickEvent(currentLevelId)|e('js')}}');
			{%~ endif %}
		}
		
		{# Set the href of the featured image link to this menu node #}
		{%~ if currentLevelDestUrl %}
			$('#{{containerId}} .feature_image a').attr('href', '{{currentLevelDestUrl|e}}');
		{%~ else %}
			$('#{{containerId}} .feature_image a').removeAttr('href');
		{%~ endif %}
		
		{%~ if menuNodeHasOwnFeatureImage and (currentLevelTitle or currentLevelText) %}
			
			{# Process title and description. Include the link if the menu node has it. #}
			{%~ if currentLevelLinkType != 'no_link' %}
				var start_link_tag = '<a href=\'{{currentLevelDestUrl|e}}\'';
					{%~ if (currentLevelNodeId['open_in_new_window'] == 1) %}
						start_link_tag += 'target=\'_blank\'';
					{%~ endif %}
				start_link_tag += '>';
			{%~ else %}
				var start_link_tag = '';
			{%~ endif %}
			
			var title = '<h2>{{currentLevelTitle|e('js')}}</h2>';
				
			{%~ if (currentLevelLinkType != 'no_link') %}
				var end_link_tag = '</a>';
			{%~ else %}
				var end_link_tag = '';
			{%~ endif %}
			
			$('#{{containerId}} .feature_title').html(start_link_tag + title + end_link_tag);
			$('#{{containerId}} .feature_text').html('{{currentLevelText|e}}');
			
			{# Allow an admin to click on the title/text in Edit Menu mode to edit the current menu node properties. #}
			$('#{{containerId}} .feature_title').removeAttr('onclick');
			$('#{{containerId}} .feature_text').removeAttr('onclick');
			{%~ if currentLevelTitle %}
				$('#{{containerId}} .feature_title').attr('onclick', '{{self.featureImageOnClickEvent(currentLevelId)|e('js')}}');
			{%~ endif %}
			{%~ if currentLevelText %}
				$('#{{containerId}} .feature_text').attr('onclick', '{{self.featureImageOnClickEvent(currentLevelId)|e('js')}}');
			{%~ endif %}
			
		{%~ endif %}
	"
{%~ endmacro %}




<div class="wrap_menu">
	<div class="wrap_menu_outer">
		<div class="wrap_menu_inner">
			{%~ for node1 in nodes %}
				{%~ if not node1.is_admin_add_menu_item %}
					<ul>
						<li class="level1 level1_{{node1.ordinal|e}} {% if node1.on %} level1_on level1_{{node1.ordinal|e}}_on {% endif %} {% if node1.children %}has_child{% endif %} {% if node1.css_class %}{{node1.css_class|e}}{% endif %} {% if nodeExtraProperties[node1.mID]['link_external'] %} link_external {% endif %} zenario_menu_node {% if (node1.privacy and (node1.privacy != 'public')) or (node1.translation_chain_privacy and (node1.translation_chain_privacy != 'public')) %}private{% endif %}">
							{% if node1.image_id %}
								<span class="menu_image">
									<a {% if node1.url %}href="{{node1.url|e}}"{% else %}class="unlinked_menu_item"{% endif %} {% if node1.onclick %}onclick="{{node1.onclick|e}}"{% endif %} {% if node1.accesskey %}accesskey="{{node1.accesskey|e}}"{% endif %} {% if node1.rel_tag %}rel="{{node1.rel_tag|e}}"{% endif %} {% if node1.target %}target="{{node1.target|e}}"{% endif %} {% if node1.title %}title="{{node1.title|e}}"{% endif %}><img src="{{nodeExtraProperties[node1.mID]['image_link']}}" width="{{nodeExtraProperties[node1.mID]['node_image_width']}}" height="{{nodeExtraProperties[node1.mID]['node_image_height']}}" {% if node1.rollover_image_id %} onmouseover="this.src='{{nodeExtraProperties[node1.mID]['rollover_image_link']}}';" onmouseout="this.src='{{nodeExtraProperties[node1.mID]['image_link']}}';" {% endif %}/></a>
								</span>
							{%~ endif %}
							
							{% if not node1.active %}<em class="zenario_inactive">{%~ endif -%}
								<a {% if node1.url %}href="{{node1.url|e}}"{% else %}class="unlinked_menu_item"{% endif %} {% if node1.onclick %}onclick="{{node1.onclick|e}}"{% endif %} {% if node1.accesskey %}accesskey="{{node1.accesskey|e}}"{% endif %} {% if node1.rel_tag %}rel="{{node1.rel_tag|e}}"{% endif %} {% if node1.target %}target="{{node1.target|e}}"{% endif %} {% if node1.title %}title="{{node1.title|e}}"{% endif %}><span {% if (nodeExtraProperties[node1.mID]['feature_image_link']) %} {{self.addOnMouseOver(containerId|e, nodeExtraProperties[node1.mID], nodeExtraProperties[node1.mID], true)}} {% endif %}>{{node1.name|e}}</span></a>
							{% if not node1.active %}</em>{%~ endif %}
							
							{%~ if node1.children or nodeExtraProperties[node1.mID]['use_feature_image'] %}
								<div class="columns_wrap">
									<div class="columns_wrap_inner">
										{% if nodeExtraProperties[node1.mID]['use_feature_image'] == 1 and imagePosition == 'left' %}
											<div class="feature_wrap">
												<div class="feature_image" {% if rollover_js %}{{rollover_js}}{% endif %}>
													{%~ if nodeExtraProperties[node1.mID]['show_banner'] %}
														{% if (nodeExtraProperties[node1.mID]['link_type'] != 'no_link') %}<a href="{{nodeExtraProperties[node1.mID]['dest_url']|e}}" {% if (nodeExtraProperties[node1.mID]['open_in_new_window'] == 1) %}target="_blank"{% endif %}>{%~ endif %}
															<img id="{{containerId|e}}_node_id_{{nodeExtraProperties[node1.mID]['id']}}_feature_img" width="{{nodeExtraProperties[node1.mID]['feature_image_width']}}" height="{{nodeExtraProperties[node1.mID]['feature_image_height']}}" src="{{nodeExtraProperties[node1.mID]['feature_image_link']|e}}" alt="{{nodeExtraProperties[node1.mID]['alt_tag']|e}}" {% if nodeExtraProperties[node1.mID]['Image_Srcset'] %} srcset="{{nodeExtraProperties[node1.mID]['Image_Srcset']|e}}" {% endif %} {% if (nodeExtraProperties[node1.mID]['use_rollover_image'] == 1) %} onmouseover="this.src='{{nodeExtraProperties[node1.mID]['feature_rollover_image_link']|e}}'; this.srcset='{{nodeExtraProperties[node1.mID]['Rollover_Image_Srcset']|e}}';" onmouseout="this.src='{{nodeExtraProperties[node1.mID]['feature_image_link']|e}}'; this.srcset='{{nodeExtraProperties[node1.mID]['Image_Srcset']|e}}';" {% endif %} onclick="{{self.featureImageOnClickEvent(node1.mID)}}"/>
														{% if (nodeExtraProperties[node1.mID]['link_type'] != 'no_link') %}</a>{%~ endif %}
													{%~ endif %}
												</div>
							
												{%~ if (nodeExtraProperties[node1.mID]['title']) or (nodeExtraProperties[node1.mID]['text']) %}
													<div class="feature_content">
														<div class="feature_title">
															{%~ if (nodeExtraProperties[node1.mID]['link_type'] != 'no_link') %}
																<a href="{{nodeExtraProperties[node1.mID]['dest_url']|e}}" {% if (nodeExtraProperties[node1.mID]['open_in_new_window'] == 1) %}target="_blank"{% endif %}>
															{%~ endif %}
																	<h2>{{nodeExtraProperties[node1.mID]['title']|e}}</h2>
															{%~ if (nodeExtraProperties[node1.mID]['link_type'] != 'no_link') %}
																</a>
															{%~ endif %}
														</div>
														<div class="feature_text">{{nodeExtraProperties[node1.mID]['text']}}</div>
													</div>
												{%~ endif %}
											</div>
										{%~ endif %}
										
										{%~ if node1.descriptive_text %}
											<div class="node_descriptive_text">{{node1.descriptive_text}}</div>
										{%~ endif %}
										<div class="column">
											{%~ set currentInCol = 0 %}
											{%~ for node2 in node1.children %}
												{%~ if not node2.is_admin_add_menu_item %}
													{%~ set currentInCol = currentInCol + 1 %}
													{%~ if (nodeExtraProperties[node2.mID]['top_of_column'] == 1 and currentInCol > 1) or (currentInCol > maxInCol) %}
														{%~ set currentInCol = 1 ~%}
										</div>
										<div class="column">
													{%~ endif %}
												
													<div class="level2 level2_{{node2.ordinal|e}} {% if node2.on %} level2_on level2_{{node2.ordinal|e}}_on {% endif %} {% if node2.children %}has_child{% endif %} {% if node2.css_class %}{{node2.css_class|e}}{% endif %} {% if nodeExtraProperties[node2.mID]['link_external'] %} link_external {% endif %} zenario_menu_node {% if (node2.privacy and (node2.privacy != 'public')) or (node2.translation_chain_privacy and (node2.translation_chain_privacy != 'public')) %}private{% endif %}" {% if (nodeExtraProperties[node2.mID]['feature_image_link']) %} {{self.addOnMouseOver(containerId|e, nodeExtraProperties[node2.mID], nodeExtraProperties[node1.mID], true)}} {% elseif (nodeExtraProperties[node1.mID]['feature_image_link']) %} {{self.addOnMouseOver(containerId|e, nodeExtraProperties[node1.mID], nodeExtraProperties[node1.mID], false)}} {% endif %}>
															{% if node2.image_id %}
																<span class="menu_image">
																	<a {% if node2.url %}href="{{node2.url|e}}"{% else %}class="unlinked_menu_item"{% endif %} {% if node2.onclick %}onclick="{{node2.onclick|e}}"{% endif %} {% if node2.accesskey %}accesskey="{{node2.accesskey|e}}"{% endif %} {% if node2.rel_tag %}rel="{{node2.rel_tag|e}}"{% endif %} {% if node2.target %}target="{{node2.target|e}}"{% endif %} {% if node2.title %}title="{{node2.title|e}}"{% endif %}><img src="{{nodeExtraProperties[node2.mID]['image_link']}}" width="{{nodeExtraProperties[node2.mID]['node_image_width']}}" height="{{nodeExtraProperties[node2.mID]['node_image_height']}}" {% if node2.rollover_image_id %} onmouseover="this.src='{{nodeExtraProperties[node2.mID]['rollover_image_link']}}';" onmouseout="this.src='{{nodeExtraProperties[node2.mID]['image_link']}}';" {% endif %}/></a>
																</span>
															{%~ endif %}
														
															{% if not node2.active %}<em class="zenario_inactive">{%~ endif -%}
																<a {% if node2.url %}href="{{node2.url|e}}" {% else %} class="unlinked_menu_item"{% endif %} {% if node2.onclick %}onclick="{{node2.onclick|e}}"{% endif %} {% if node2.accesskey %}accesskey="{{node2.accesskey|e}}"{% endif %} {% if node2.rel_tag %}rel="{{node2.rel_tag|e}}"{% endif %} {% if node2.target %}target="{{node2.target|e}}"{% endif %} {% if node2.title %}title="{{node2.title|e}}"{% endif %}>{{node2.name|e}}</a>
															{% if not node2.active %}</em>{%~ endif %}
														
															{%~ if node2.descriptive_text %}
																<span class="node_descriptive_text">{{node2.descriptive_text}}</span>
															{%~ endif %}
													</div>
													{%~ for node3 in node2.children %}
														{%~ if not node3.is_admin_add_menu_item %}
															{%~ set firstNode = '' %}
															{%~ set currentInCol = currentInCol + 1 %}
															{%~ if currentInCol > maxInCol %}
																{%~ set currentInCol = 1 ~%}
										</div>
										<div class="column">
															{%~ endif %}
															<div class="level3 level3_{{node3.ordinal|e}} {% if node3.on %} level3_on level3_{{node3.ordinal|e}}_on {% endif %} {% if node3.css_class %}{{node3.css_class|e}} {% endif %} {% if nodeExtraProperties[node3.mID]['link_external'] %} link_external {% endif %} {{firstNode}} zenario_menu_node {% if (node3.privacy and (node3.privacy != 'public')) or (node3.translation_chain_privacy and (node3.translation_chain_privacy != 'public')) %}private{% endif %}" {% if (nodeExtraProperties[node3.mID]['feature_image_link']) %} {{self.addOnMouseOver(containerId|e, nodeExtraProperties[node3.mID], nodeExtraProperties[node1.mID], true)}} {% elseif (nodeExtraProperties[node1.mID]['feature_image_link']) %} {{self.addOnMouseOver(containerId|e, nodeExtraProperties[node1.mID], nodeExtraProperties[node1.mID], false)}} {% endif %}>
																{% if node3.image_id %}
																	<span class="menu_image">
																		<a {% if node3.url %}href="{{node3.url|e}}"{% else %}class="unlinked_menu_item"{% endif %} {% if node3.onclick %}onclick="{{node3.onclick|e}}"{% endif %} {% if node3.accesskey %}accesskey="{{node3.accesskey|e}}"{% endif %} {% if node3.rel_tag %}rel="{{node3.rel_tag|e}}"{% endif %} {% if node3.target %}target="{{node3.target|e}}"{% endif %} {% if node3.title %}title="{{node3.title|e}}"{% endif %}><img src="{{nodeExtraProperties[node3.mID]['image_link']}}" width="{{nodeExtraProperties[node3.mID]['node_image_width']}}" height="{{nodeExtraProperties[node3.mID]['node_image_height']}}" {% if node3.rollover_image_id %} onmouseover="{this.src='{{nodeExtraProperties[node3.mID]['rollover_image_link']}}'};" onmouseout="{this.src='{{nodeExtraProperties[node3.mID]['image_link']}}'};" {% endif %}/></a>
																	</span>
																{%~ endif %}
															
																{% if not node3.active %}<em class="zenario_inactive">{%~ endif -%}
																	<a {% if node3.url %}href="{{node3.url|e}}"{% else %}class="unlinked_menu_item"{% endif %} {% if node3.onclick %}onclick="{{node3.onclick|e}}"{% endif %} {% if node3.accesskey %}accesskey="{{node3.accesskey|e}}"{% endif %} {% if node3.rel_tag %}rel="{{node3.rel_tag|e}}"{% endif %} {% if node3.target %}target="{{node3.target|e}}"{% endif %} {% if node3.title %}title="{{node3.title|e}}"{% endif %}>{{node3.name|e}}</a>
																{% if not node3.active %}</em>{%~ endif %}
															
																{%~ if node3.descriptive_text %}
																	<span class="node_descriptive_text">{{node3.descriptive_text}}</span>
																{%~ endif %}
															</div>
														{%~ endif %}
													{%~ endfor %}
												{%~ endif %}
											{%~ endfor %}
										</div>
										
										{% if nodeExtraProperties[node1.mID]['use_feature_image'] == 1 and (not imagePosition or imagePosition == 'right') %}
											<div class="feature_wrap">
												<div class="feature_image" {% if rollover_js %}{{rollover_js}}{% endif %}>
													{%~ if nodeExtraProperties[node1.mID]['show_banner'] %}
														{% if (nodeExtraProperties[node1.mID]['link_type'] != 'no_link') %}<a href="{{nodeExtraProperties[node1.mID]['dest_url']|e}}" {% if (nodeExtraProperties[node1.mID]['open_in_new_window'] == 1) %}target="_blank"{% endif %}>{%~ endif %}
															<img id="{{containerId|e}}_node_id_{{nodeExtraProperties[node1.mID]['id']}}_feature_img" width="{{nodeExtraProperties[node1.mID]['feature_image_width']}}" height="{{nodeExtraProperties[node1.mID]['feature_image_height']}}" src="{{nodeExtraProperties[node1.mID]['feature_image_link']|e}}" alt="{{nodeExtraProperties[node1.mID]['alt_tag']|e}}" {% if nodeExtraProperties[node1.mID]['Image_Srcset'] %} srcset="{{nodeExtraProperties[node1.mID]['Image_Srcset']|e}}" {% endif %} {% if (nodeExtraProperties[node1.mID]['use_rollover_image'] == 1) %} onmouseover="this.src='{{nodeExtraProperties[node1.mID]['feature_rollover_image_link']|e}}'; this.srcset='{{nodeExtraProperties[node1.mID]['Rollover_Image_Srcset']|e}}';" onmouseout="this.src='{{nodeExtraProperties[node1.mID]['feature_image_link']|e}}'; this.srcset='{{nodeExtraProperties[node1.mID]['Image_Srcset']|e}}';" {% endif %} onclick="{{self.featureImageOnClickEvent(node1.mID)}}"/>
														{% if (nodeExtraProperties[node1.mID]['link_type'] != 'no_link') %}</a>{%~ endif %}
													{%~ endif %}
												</div>
								
												{%~ if (nodeExtraProperties[node1.mID]['title']) or (nodeExtraProperties[node1.mID]['text']) %}
													<div class="feature_content">
														<div class="feature_title">
															{%~ if (nodeExtraProperties[node1.mID]['link_type'] != 'no_link') %}
																<a href="{{nodeExtraProperties[node1.mID]['dest_url']|e}}" {% if (nodeExtraProperties[node1.mID]['open_in_new_window'] == 1) %}target="_blank"{% endif %}>
															{%~ endif %}
																	<h2>{{nodeExtraProperties[node1.mID]['title']|e}}</h2>
															{%~ if (nodeExtraProperties[node1.mID]['link_type'] != 'no_link') %}
																</a>
															{%~ endif %}
														</div>
														<div class="feature_text">{{nodeExtraProperties[node1.mID]['text']}}</div>
													</div>
												{%~ endif %}
											</div>
										{% endif %}
									</div>
								</div>
							{%~ endif %}
						</li>
					</ul>
				{%~ endif %}
			{%~ endfor %}
		</div>
	</div>
</div>

{% do this.requireJsLib('zenario/libs/yarn/jquery-doubletaptogo/dist/jquery.dcd.doubletaptogo.min.js') %}
{% do this.jQuery('#' ~ containerId ~ ' .level1.has_child > a', 'doubleTapToGo') %}