{% if menu %}
	{% set page_name = null %}
    {% set submenu = false %}
    {% set submenu_parent_is_current = false %}
    {% for item in menu %}
	{% if item.current_item_parent or item.current and item.get_children %}
	    {% set submenu = item.get_children %}
	    {% if item.current %}
		{% set submenu_parent_is_current = true %}
	    {% endif %}
		{% set page_name = item %}
	{% endif %}
    {% endfor %}

    <div class="m-menu">
	<ul class="m-menu__wrapper {% if submenu %} m-menu__wrapper--mainmenu {% endif %}">
	    {% for item in menu %}
		<li class="m-menu--main m-menu__item {% if item.current_item_parent or item.current%} m-menu__item--active{% endif %}" >
		    <a href="{{ item.link }}"  {% if item.ID == 136 %} data-turbolinks="false" {% endif %}>{{ item.title }}</a>
		</li>
	    {% endfor %}
	</ul>
	
	{# {% if submenu %}
	    <ul class="m-menu__wrapper m-menu__wrapper--submenu">
		{% for item in submenu %}
		    <li class="m-menu__item m-menu__item--subitem {% if item.current or submenu_parent_is_current %}m-menu__item--submenu-stress {% endif %}">
			<a href="{{ item.link }}">{{ item.title }}</a>			
		    </li>
		{% endfor %}
	    </ul>
	{% endif %} #}

	<ul id="submenus" class="m-menu__wrapper m-menu__wrapper--submenu" style="min-height: 18px;">

	</ul>

	<div class="m-menu__burger" data-toggle-target="burger">
	    <div></div>
	    <div></div>
	    <div></div>
	</div>
    </div>
{% endif %}

<style>
.m-menu__item--subitem2{
	color: black;
}
</style>

<script>

(() => {
	var submenu = {{ submenu|json_encode|raw }};
	var menu = {{ menu|json_encode|raw }};
	var pageName = "{{page_name}}";

	var mainMenuButtons = document.getElementsByClassName('m-menu--main');
	var submenu = document.getElementById('submenus');

	for (let i = 0; i < mainMenuButtons.length; i++) {
		var btnMenu = mainMenuButtons[i];

		// if it's page name, then set default submenu
		var btnName = btnMenu.children[0].innerHTML;
		if(btnName == pageName){

			// set default submenu
			var items = menu.filter(x => x.name.split(',')[0] == pageName.split(',')[0]);
			var submenuItems = items.map(x => x.children)[0];

			for(let y = 0; y < submenuItems.length; y++){
				
				var item = submenuItems[y];

				var subname = item.name;
				var suburl = item.url;
				
				var li = document.createElement('li');
				li.classList.add('m-menu__item');
				li.classList.add('m-menu__item--subitem');
				li.classList.add('m-menu__item--subitem2');

				if(item.current_item_parent || item.current){
					li.classList.add('m-menu__item--active');
				}

				var a = document.createElement('a');
				a.setAttribute('href', suburl);
				a.innerHTML = subname;
				li.appendChild(a);

				submenu.appendChild(li);
				
			}

		}

		// otherwise
		btnMenu.addEventListener('mouseover', (e) => {
			var name  = e.target.innerHTML;
			var url = e.target.href;
			
			// find sub menu items
			var items = menu.filter(x => x.name.split(',')[0] == name.split(',')[0]);
			var submenuItems = items.map(x => x.children)[0];
			
			submenu.innerHTML = '';

			for(let y = 0; y < submenuItems.length; y++){
				var item = submenuItems[y];

				var subname = item.name;
				var suburl = item.url;
				
				var li = document.createElement('li');
				li.classList.add('m-menu__item');
				li.classList.add('m-menu__item--subitem');
				li.classList.add('m-menu__item--subitem2');

				if(item.current_item_parent || item.current){
					li.classList.add('m-menu__item--active');
				}
				

				var a = document.createElement('a');
				a.setAttribute('href', suburl);
				a.innerHTML = subname;
				li.appendChild(a);

				submenu.appendChild(li);
				
			}
		})
		
		var leaveArea = document.getElementsByClassName('m-header')[0];

		leaveArea.addEventListener('mouseleave', (e) => {
			console.log(pageName);
			if(pageName === ''){
				submenu.innerHTML = '';
			}
		})


	}

})();
</script>