{% set suffix_id = 'so_megamenu_' ~ random(10) %}
{% set show_verticalmenu_id = 'show-verticalmenu-' ~ random(10) %}
{% set remove_verticalmenu_id = 'remove-verticalmenu-' ~ random(10) %}



<div id="{{suffix_id}}" class="responsive megamenu-style-dev">
	{% if ustawienia.orientation == 1 %}
	<div class="so-vertical-menu no-gutter">
	{% endif %}
	
	{% if ustawienia.disp_title_module and head_name %}
		<h3>{{ head_name }}</h3>
	{% endif %}
	<nav class="navbar-default">
		<div class="container-megamenu {% if ustawienia.full_width != 1 %} {{ 'container' }} {% endif %} {% if ustawienia.orientation == 1 %}{{'vertical '}} {% else %}{{ 'horizontal' }}{% endif %}">
		{% if ustawienia.orientation == 1 %}
			<div id="menuHeading">
				<div class="megamenuToogle-wrapper">
					<div class="megamenuToogle-pattern">
						<div class="container">
							<div><span></span><span></span><span></span></div>
							<span class="title-mega">
							{{ navigation_text }}
							</span>
						</div>
					</div>
				</div>
			</div>
			<div class="navbar-header">
				<span class="hidden">{{ navigation_text }}</span>
				<button type="button" id="{{show_verticalmenu_id}}" data-toggle="collapse"  class="show-verticalmenu navbar-toggle">
					 <span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span> 
					
				</button>
				
			</div>
		{% else %}
			<div class="navbar-header">
				<span class="hidden">{{ navigation_text }}</span>
		<button type="button" id="show-megamenu" data-toggle="collapse"  class="navbar-toggle">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					
				</button>
				
			</div>
		{% endif %}

		{% if ustawienia.orientation == 1 %}
			<div class="vertical-wrapper">
		{% else %}
			<div class="megamenu-wrapper">
		{% endif %}

		{% if ustawienia.orientation == 1 %}
			<span id="{{remove_verticalmenu_id}}" class="remove-verticalmenu fa fa-times"></span>
		{% else %}
			<span id="remove-megamenu" class="fa fa-times"></span>
		{% endif %}

			<div class="megamenu-pattern">
				<div class="container">
					<ul class="megamenu"
					data-transition="{% if ustawienia.animation != '' %}{{ ustawienia.animation }}{% else %}{{ 'none' }}{% endif %}" data-animationtime="{% if ustawienia.animation_time > 0 and ustawienia.animation_time < 5000 %}{{ ustawienia.animation_time }}{% else %}{{ 500 }}{% endif %}">
						{% if ustawienia.home_item == 'icon' or ustawienia.home_item == 'text' %}
							<li class="home">
								<a href="{{ home }}">
								{% if ustawienia.home_item == 'icon' %}
									<i class="fa fa-home"></i>
								{% else %}
									<span><strong>{{ home_text }}</strong></span>
								{% endif %}
								</a>
							</li>
						{% endif %}
						
						{% for key, row in menu %}
							{% set class 		= '' %}
							{% set icon_font 	= '' %}
							{% set class_link 	= 'clearfix' %}
							{% set label_item 	= '' %}
							{% set title 		= false %}
							{% set target 		= false %}

							{% if 'no_image' in row.icon %}
								{% set icon = '' %}
							{% else %}
								{% set icon = row.icon %}
							{% endif %}
							
							{% if row.description != '' %}
								{% set class_link = class_link~' description' %}
							{% endif %}

							{% if route and route == row.route and path and path == row.path %}
								{% set class = class~' active_menu' %}
							{% endif %}

							{% if row.class_menu %}
								{% set class = class~row.class_menu %}
							{% endif %}

							{% if row.icon_font %}
								{% set icon_font = icon_font~'<i class="'~row.icon_font~'"></i>' %}
							{% endif %}

							{% if row.label_item %}
								{% set label_item = label_item~'<span class="label'~row.label_item~'"></span>' %}
							{% endif %}

							{% if row.submenu is iterable and row.submenu %}
								{% set class = class~' with-sub-menu' %}
								{% if row.submenu_type == 1 %}
									{% set class = class~' click' %}
								{% else %}
									{% set class = class~' hover' %}
								{% endif %}
							{% endif %}

							{% if row.position == 1 %}
								{% set class = class~' pull-right' %}
							{% endif %}

							{% if row.submenu_type == 2 %}
								{% set title = 'title="hover-intent"' %}
							{% endif %}

							{% if row.new_window == 1 %}
								{% set target = 'target="_blank"' %}
							{% endif %}

							{% if ustawienia.orientation == 1 %}
								<li class="item-vertical {{ class }}" {{ title }}>
									<p class='close-menu'></p>
									{% if row.submenu is iterable and row.submenu %}
										<a href="{{ row.link }}" class="{{ class_link }}" {{ target }}>
											<span>
												<strong>{{ icon_font~icon~row.name[lang_id]~row.description }}</strong>
											</span>
											{{ label_item }}
											<b class='fa fa-angle-right' ></b>
										</a>
									{% else %}
								 		<a href="{{ row.link }}" class="{{ class_link }}" {{ target }}>
											<span>
												<strong>{{ icon_font~icon~row.name[lang_id]~row.description }}</strong>
											</span>
											{{ label_item }}
										</a>
									{% endif %}

									{% if row.submenu is iterable and row.submenu %}
										 {% if '%' in row.submenu_width %}
											<div class="sub-menu" data-subwidth ="{{ row.submenu_width|replace({'%': ''}) }}">
										{% else %}
											<div class="sub-menu" style="width:{{ row.submenu_width }}">
										{% endif %}

										<div class="content">
											<div class="row">
												{% set row_fluid = 0 %}
												{% for submenu in row.submenu %}
													{% if row_fluid+submenu.content_width > 12 %}
														{% set row_fluid = submenu.content_width %}
										 				</div><div class="border"></div><div class="row">
													{% else %}
														{% set row_fluid = row_fluid+submenu.content_width %}
													{% endif %}
													<div class="col-sm-{{ submenu.content_width }}">
														{% if submenu.content_type == 0 %}
															<div class="html {{submenu.class_menu }}">{{ submenu.html }}</div>
														{% elseif submenu.content_type == 1 %}
															{% if submenu.product is iterable %}
																<div class="product {{ submenu.class_menu }}">
																	<div class="image"><a href="{{ submenu.product.link }}" onclick="window.location = '{{ submenu.product.link }}'"><img src="{{ submenu.product.image }}" alt=""></a></div>
																	<div class="name"><a href="{{ submenu.product.link }}" onclick="window.location = '{{ submenu.product.link }}'">{{ submenu.product.name }}</a></div>
																	<div class="price">
																		{% if not submenu.product.special %}
																			{{ submenu.product.price }}
																		{% else %}
																			{{ submenu.product.special }}
																		{% endif %}
																	</div>
																</div>
															{% endif %}
														{% elseif submenu.content_type == 2 %}
															<div class="categories {{ submenu.class_menu }}">{{ submenu.categories }}</div>
														{% elseif submenu.content_type == 3 %}
															{% if submenu.manufactures is iterable %}
																<ul class="manufacturer {{ submenu.class_menu }}">
																	{% for manufacturer in submenu.manufactures %}
																		<li><a href="{{ manufacturer.link }}">{{ manufacturer.name }}</a></li>
																	{% endfor %}
																</ul>
															{% endif %}
														{% elseif submenu.content_type == 4 %}
															{% if submenu.images.show_title == 1 %}
																<span class="title-submenu">{{ submenu.name[lang_id] }}</span>
															{% endif %}
															<div class="link {{ submenu.class_menu }}">
																{{ submenu.images.link }}
															</div>
														{% elseif submenu.content_type == 5 %}
															{% if submenu.subcategory.categories %}
																<ul class="subcategory {{ submenu.class_menu }}">
																	{% for categories in submenu.subcategory.categories %}
																		<li>
																			{% if submenu.subcategory.show_title == 1 %}
																				<a href="{{ categories.href }}" class="title-submenu {{ submenu.class_menu }}">{{ categories.name }}</a>
																			{% endif %}
																			{% if categories.categories %}
																				{{ categories.categories }}
																			{% endif %}
																			{% if submenu.subcategory.show_image == 1 %}
																				<img src="{{ categories.thumb }}" alt="" >
																			{% endif %}
																		</li>
																	{% endfor %}
																</ul>
															{% endif %}
														{% elseif submenu.content_type == 6 %}
															{% if submenu.productlist.show_title == 1 %}
																<span class="title-submenu">{{ submenu.name[lang_id] }}</span>
															{% endif %}
															{% if submenu.productlist.products %}
																{% for product in submenu.productlist.products %}
																	{% set itempage = submenu.productlist.col ? 12/submenu.productlist.col : 4 %}
																	<div class="col-xs-{{ itempage }} {{ submenu.class_menu }}">
																		<div class="product-thumb">
																			<div class="image">
																				<a href="{{ product.href }}">
																					<img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" />
																				</a>
																			</div>
																			<div>
																				<div class="caption">
																					<h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
																					<p>{{ product.description }}</p>
																					{% if product.rating %}
																						<div class="rating">
																							{% for i in 1..5 %}
																								{% if product.rating < i %}
																									<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
																								{% else %}
																									<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
																								{% endif %}
																							{% endfor %}
																						</div>
																					{% endif %}
																			
																					{% if product.price %}
																						<p class="price">
																							{% if not product.special %}
																								{{ product.price }}
																					   		{% else %}
																								<span class="price-new">{{ product.special }}</span>
																								<span class="price-old">{{ product.price }}</span>
																					   		{% endif %}

																					   		{% if product.tax %}
																								<span class="price-tax">{{ product.tax }}</span>
																							{% endif %}
																						</p>
																					{% endif %}
																		  		</div>
																			</div>
																	  	</div>
																	</div>
															 	{% endfor %}
															{% endif %}
														{% endif %}													
													</div>
												{% endfor %}
											</div>
										</div>				
										</div>			
									{% endif %}
								</li>							
							{% else %}						
								<li class="{{ class }}" {{ title }}>
									<p class='close-menu'></p>
									{% if row.submenu is iterable and row.submenu %}
										<a href="{{ row.link }}" class="{{ class_link }}" {{ target }}>
											<strong>
												{{ icon_font~icon~row.name[lang_id]~row.description }}
											</strong>
											{{ label_item }}
											<b class='caret'></b>
										</a>
									{% else %}
										<a href="{{ row.link }}" class="{{ class_link }}" {{ target }}>
											<strong>
												{{ icon_font~icon~row.name[lang_id]~row.description }}
											</strong>
											{{ label_item }}
										</a>
									{% endif %}

									{% if row.submenu is iterable and row.submenu %}
										<div class="sub-menu" style="width: {{ row.submenu_width }}">
											<div class="content">
												<div class="row">
													{% set row_fluid = 0 %}
													{% for submenu in row.submenu %}
														{% if row_fluid+submenu.content_width > 12 %}
															{% set row_fluid = submenu.content_width %}
															</div><div class="border"></div><div class="row">
														{% else %}
															{% set row_fluid = row_fluid+submenu.content_width %}
														{% endif %}
														<div class="col-sm-{{ submenu.content_width }}">
															{% if submenu.content_type == 0 %}
																<div class="html {{ submenu.class_menu }}">
																	{{ submenu.html }}
																</div>
															{% elseif submenu.content_type == 1 %}
																{% if submenu.product is iterable %}
																	<div class="product {{ submenu.class_menu }}">
																		<div class="image"><a href="{{ submenu.product.link }}" onclick="window.location = '{{ submenu.product.link }}'"><img src="{{ submenu.product.image }}" alt=""></a></div>
																		<div class="name"><a href="{{ submenu.product.link }}" onclick="window.location = '{{ submenu.product.link }}'">{{ submenu.product.name }}</a></div>
																		<div class="price">
																			{% if not submenu.product.special %}
																				{{ submenu.product.price }}
																			{% else %}
																				{{ submenu.product.special }}
																			{% endif %}
																		</div>
																	</div>
																{% endif %}
															{% elseif submenu.content_type == 2 %}
																<div class="categories {{ submenu.class_menu }}">
																	{{ submenu.categories }}
																</div>															
															{% elseif submenu.content_type == 3 %}
																{% if submenu.manufactures is iterable %}
																	<ul class="manufacturer {{ submenu.class_menu }}">
																		{% for manufacturer in submenu.manufactures %}
																			<li><a href="{{ manufacturer.link }}">{{ manufacturer.name }}</a></li>
																		{% endfor %}
																	</ul>
																{% endif %}
															{% elseif submenu.content_type == 4 %}
																{% if submenu.images.show_title == 1 %}
																	<span class="title-submenu">{{ submenu.name[lang_id] }}</span>
																{% endif %}
																<div class="link {{ submenu.class_menu }}">
																	{{ submenu.images.link }}
																</div>
															{% elseif submenu.content_type == 5 %}
																{% if submenu.subcategory.categories %}
																	<ul class="subcategory {{ submenu.class_menu }}">
																		{% for categories in submenu.subcategory.categories %}
																			<li>
																				{% if submenu.subcategory.show_title == 1 %}
																					<a href="{{ categories.href }}" class="title-submenu {{ submenu.class_menu }}">{{ categories.name }}</a>
																				{% endif %}
																				{% if categories.categories %}
																					{{ categories.categories }}
																				{% endif %}
																				{% if submenu.subcategory.show_image == 1 %}
																					<img src="{{ categories.thumb }}" alt="" />
																				{% endif %}
																			</li>		
																		{% endfor %}
																	</ul>
																{% endif %}
															{% elseif submenu.content_type == 6 %}
																{% if submenu.productlist.show_title == 1 %}
																	<span class="title-submenu">{{ submenu.name[lang_id] }}</span>
																{% endif %}
																{% if submenu.productlist.products %}
																	{% for product in submenu.productlist.products %}
																		{% set itempage = submenu.productlist.col ? 12/submenu.productlist.col : 4 %}
																		<div class="col-sm-{{ itempage }} {{ submenu.class_menu }}">
																			<div class="product-thumb">
																				<div class="image">
																					<a href="{{ product.href }}">
																						<img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" />
																					</a>
																				</div>
																				<div>
																					<div class="caption">
																						<h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
																						<p>{{ product.description }}</p>
																						{% if product.rating %}
																							<div class="rating">
																								{% for i in 1..5 %}
																									{% if product.rating < i %}
																										<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
																									{% else %}
																										<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
																									{% endif %}
																								{% endfor %}
																							</div>
																						{% endif %}

																						{% if product.price %}
																							<p class="price">
																								{% if not product.special %}
																									{{ product.price }}
																							   	{% else %}
																									<span class="price-new">{{ product.special }}</span>
																									<span class="price-old">{{ product.price }}</span>
																							   	{% endif %}
																							   	
																							   	{% if product.tax %}
																									<span class="price-tax">{{ product.tax }}</span>
																								{% endif %}
																							</p>
																						{% endif %}
																			  		</div>
																				</div>
														  					</div>
																		</div>
													 				{% endfor %}
																{% endif %}
															{% endif %}
														</div>
													{% endfor %}
												</div>												
											</div>
										</div>										
									{% endif %}
								</li>
							{% endif %}
						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
		</div>
	</nav>
	{% if ustawienia.orientation == 1 %}
		</div>
	{% endif %}
</div>

{% if ustawienia.orientation == 1 %}
<script type="text/javascript">
	$(document).ready(function() {

		(function (element) {
			var $element = $(element);
			var itemver =  {{ ustawienia.show_itemver }};
			
			$("ul.megamenu  li.item-vertical", $element ).addClass('demo');
			
			if(itemver <= $( ".vertical ul.megamenu >li", $element ).length){
				$('.vertical ul.megamenu', $element).append('<li class="loadmore"><span class="more-view"> {{text_more_category}}</span></li>');
				$('.horizontal ul.megamenu li.loadmore', $element).remove();
			}
			
			var show_itemver = itemver-1 ;
			$('ul.megamenu > li.item-vertical', $element).each(function(i){
				if(i>show_itemver){
						$(this).css('display', 'none');
				} 
			});
			
			$(".megamenu .loadmore", $element).click(function(){
				if($(this).hasClass('open')){
					$('ul.megamenu li.item-vertical', $element).each(function(i){
							if(i>show_itemver){
									$(this).slideUp(200);
									$(this).css('display', 'none');
							}
					});
					
					$(this).removeClass('open');
					$('.loadmore', $element).html('<span class="more-view">{{text_more_category}}</span>');
				}else{
					$('ul.megamenu li.item-vertical', $element).each(function(i){
							if(i>show_itemver){
									$(this).slideDown(200);
							}
					});
					$(this).addClass('open');
					$('.loadmore', $element).html('<span class="more-view">{{text_close_category}}</span>');
				}
			});
		})("#{{suffix_id}}");


	

	    $("#{{show_verticalmenu_id}}").click(function () {
			if($('.vertical-wrapper').hasClass('so-vertical-active'))
				$('.vertical-wrapper').removeClass('so-vertical-active');
			else
				$('.vertical-wrapper').addClass('so-vertical-active');
		}); 
		$('#{{remove_verticalmenu_id}}').click(function() {
	        $('.vertical-wrapper').removeClass('so-vertical-active');
	        return false;
	    });	
	});
</script>
{% endif %}
<script>
$(document).ready(function(){
	$('a[href="{{ actual_link }}"]').each(function() {
		$(this).parents('.with-sub-menu').addClass('sub-active');
	});  
});
</script>