{{ header }}{{ column_left }} 
<div id="content"><div class="container-fluid">
	<div class="page-header">
	    <h1>MegaMenu</h1>
	    <ul class="breadcrumb">
		     {% for breadcrumb in breadcrumbs %} 
		      <li><a href="{{ breadcrumb['href'] }}">{{ breadcrumb['text'] }}</a></li>
		      {% endfor %} 
	    </ul>
	  </div>
    
     <link rel="stylesheet" type="text/css" href="view/stylesheet/css/colorpicker.css" />
     <script type="text/javascript" src="view/javascript/jquery/colorpicker.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Poppins:700,600,500,400,300' rel='stylesheet' type='text/css'>
	
	<script type="text/javascript">
	$.fn.tabs = function() {
		var selector = this;
		
		this.each(function() {
			var obj = $(this); 
			
			$(obj.attr('href')).hide();
			
			$(obj).click(function() {
				$(selector).removeClass('selected');
				
				$(selector).each(function(i, element) {
					$($(element).attr('href')).hide();
				});
				
				$(this).addClass('selected');
				
				$($(this).attr('href')).show();
				
				return false;
			});
		});
	
		$(this).show();
		
		$(this).first().click();
	};
	</script>
	
	{% if (error_warning) %} 
		<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_warning }} 
		  <button type="button" class="close" data-dismiss="alert">&times;</button>
		</div>
	{% elseif (success) %} 
		<div class="alert alert-success"><i class="fa fa-exclamation-circle"></i> {{ success }} 
			<button type="button" class="close" data-dismiss="alert">&times;</button>
		</div>
	{% endif %} 
	
	<div class="set-size" id="megamenu">
		<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form">
			<!-- Unlimited MegaMenu Modules -->
			<div class="content theme-skins">
				<div>
					<ul class="skins">
						<li><p>Edited Module: <br><span>{{ active_module }}</span></p></li>
						<li>
							<select name="megamenu_modules">
								{% for module in megamenu_modules %} 
								<option  style="font-size: 12px !important" {% if (active_module_id == module['id']) %} {{ ' selected="selected"' }} {% endif %} value="{{ module['id'] }}">{{ module['name'] }}</option>
								{% endfor %} 
							</select>
						</li>
						<li><input type="submit" name="active-module" class="button-active"></li>
						<li><a onclick="#" class="button-add"><span>Add</span></a><div class="add-skin"><input type="text" name="add-module-name" class="add-skin-name" value=""><input type="submit" name="add-module" value="Add module" class="button-add-skin"></div></li>
						<li><input type="submit" name="delete-module" class="button-delete" onclick="return confirm('Are you sure you want to delete?')"></li>
					</ul>
				</div>
			</div>
			
			<script type="text/javascript">
				$(document).ready(function (){
					$(".button-add").click(function() {
						$(".add-skin").show();
						return false;
					});
				});
			</script>
			
			<div class="content">
				<div>
					<div class="background clearfix">
						<div class="left">
							<a href="{{ action }}&action=create" class="create-new-item"></a>
							{{ nestable_list }} 
							<div id='sortDBfeedback' style="font-size: 10px; font-weight: 600; text-transform: uppercase;padding: 15px 0px 0px 0px"></div>
						</div>
						
						{% if (action_type == 'create' or action_type == 'edit') %} 
						<div class="right">
							{% if (action_type == 'edit') %} 
							<h4>Edit item (ID: {{ get_edit }})</h4>
							<input type="hidden" name="id" value="{{ get_edit }}" />
							{% else %} 
							<h4>Create new item</h4>
							{% endif %} 
							<!-- Input -->
							<div class="input clearfix">
								<p>Name</p>
								<div class="list-language">
								{% for language in languages %} 
								<div class="language">
									{% set language_id = language['language_id'] %} 
									<img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" />
									<input type="text" name="name[{{ language_id }}]" {% if (name[language_id] is defined) %} {{ 'value="'~name[language_id]~'"' }} {% endif %}>
								</div>
								{% endfor %} 
								</div>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Description</p>
								<div class="list-language">
								{% for language in languages %} 
								<div class="language">
									{% set language_id = language['language_id'] %} 
									<img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" />
									<input type="text" name="description[{{ language_id }}]" {% if (description[language_id] is defined) %} {{ 'value="'~description[language_id]~'"' }} {% endif %}>
								</div>
								{% endfor %} 
								</div>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Label</p>
								<div class="list-language">
								{% for language in languages %} 
								<div class="language">
									{% set language_id = language['language_id'] %} 
									<img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" />
									<input type="text" name="label[{{ language_id }}]" {% if (label[language_id] is defined) %}{{ 'value="'~label[language_id]~'"' }} {% endif %}>
								</div>
								{% endfor %} 
								</div>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Label text color</p>
								<input type="text" name="label_text_color" id="label_text_color" value="{% if (label_text_color is defined) %}{{ label_text_color }}{% endif %}">
								<div class="color_selected" {% if (label_text_color is defined) %} {% if (label_text_color != '') %}{{ 'style="background: ' ~ label_text_color ~ '"' }} {% endif %} {% endif %}></div>
							</div>
							
							<script type="text/javascript">
							
							$(document).ready(function() {
							
								$('#label_text_color').ColorPicker({
									onChange: function (hsb, hex, rgb, el) {
										$(el).val("#" +hex);
										$(el).next('.color_selected').css("background", "#" + hex);
									},
									onShow: function (colpkr) {
										$(colpkr).show();
										return false;
									},
									onHide: function (colpkr) {
										$(colpkr).hide();
										return false;
									}
								});
							});
							</script>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Label background color</p>
								<input type="text" name="label_background_color" id="label_background_color" value="{% if (label_background_color is defined) %}{{ label_background_color }}{% endif %}">
								<div class="color_selected" {% if (label_background_color is defined) %} {% if (label_background_color != '') %}{{ 'style="background: ' ~ label_background_color ~ '"' }} {% endif %} {% endif %}></div>
							</div>
							
							<script type="text/javascript">
							
							$(document).ready(function() {
							
								$('#label_background_color').ColorPicker({
									onChange: function (hsb, hex, rgb, el) {
										$(el).val("#" +hex);
										$(el).next('.color_selected').css("background", "#" + hex);
									},
									onShow: function (colpkr) {
										$(colpkr).show();
										return false;
									},
									onHide: function (colpkr) {
										$(colpkr).hide();
										return false;
									}
								});
							});
							</script>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Custom class</p>
								<input type="text" name="custom_class" id="custom_class" value="{% if (custom_class is defined) %}{{ custom_class }}{% endif %}">
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Icon</p>
								<div class="own_image clearfix">
									<input type="hidden" name="icon" value="{{ icon }}" id="input-icon_img_preview" />
									
									{% if (icon == '') %} 
										<a href="" id="thumb-icon_img_preview" class="img-thumbnail img-edit" data-toggle="image"><img src="{{ placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
									{% else %} 
										<a href="" id="thumb-icon_img_preview" class="img-thumbnail img-edit" data-toggle="image"><img src="../image/{{ icon }}" data-placeholder="{{ placeholder }}" alt="" /></a>
									{% endif %} 
								</div>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Links</p>
								<div class="list-language">
								{% for language in languages %} 
								<div class="language">
									{% set language_id = language['language_id'] %} 
									<img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" />
									<input type="text" name="link[{{ language_id }}]" {% if (link[language_id] is defined and link is iterable) %} {{ 'value="'~link[language_id]~'"' }} {% elseif (link is defined and link is not iterable) %} {{ 'value="'~link~'"' }} {% endif %}>
								</div>
								{% endfor %} 
								</div>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Link in new window</p>
								<select name="new_window">
									{% if (new_window == 1) %} 
									<option value="0">disabled</option>
									<option value="1" selected="selected">enabled</option>
									{% else %} 
									<option value="0" selected="selected">disabled</option>
									<option value="1">enabled</option>
									{% endif %} 
								</select>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Status</p>
								<select name="status">
									{% if (status == 1) %} 
									<option value="0">enabled</option>
									<option value="1" selected="selected">disabled</option>
									{% else %} 
									<option value="0" selected="selected">enabled</option>
									<option value="1">disabled</option>
									{% endif %} 
								</select>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Display on mobile</p>
								<select name="display_on_mobile">
									{% if (display_on_mobile == 1) %} 
									<option value="0">yes</option>
									<option value="1" selected="selected">no</option>
									{% else %} 
									<option value="0" selected="selected">yes</option>
									<option value="1">no</option>
									{% endif %} 
								</select>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Position</p>
								<select name="position">
									{% if (position == 1) %} 
									<option value="0">Left</option>
									<option value="1" selected="selected">Right</option>
									{% else %} 
									<option value="0" selected="selected">Left</option>
									<option value="1">Right</option>
									{% endif %} 
								</select>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Submenu width</p>
								<input type="text" name="submenu_width" value="{{ submenu_width }}"> <div>Example: 100%, 260px</div>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Display submenu on</p>
								<select name="display_submenu">
									{% if (display_submenu == '0') %} 
									<option value="0" selected="selected">Hover</option>
									{% else %} 
									<option value="0">Hover</option>
									{% endif %} 
									{% if (display_submenu == '2') %} 
									<option value="2" selected="selected">Hover intent</option>
									{% else %} 
									<option value="2">Hover intent</option>
									{% endif %} 
									{% if (display_submenu == '1') %} 
									<option value="1" selected="selected">Click</option>
									{% else %} 
									<option value="1">Click</option>
									{% endif %} 
								</select>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Submenu background</p>
								<div class="own_image clearfix">
									<input type="hidden" name="submenu_background" value="{{ submenu_background }}" id="input-submenu_background" />
									
									{% if (submenu_background == '') %} 
										<a href="" id="thumb-submenu_background" class="img-thumbnail img-edit" data-toggle="image"><img src="{{ placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
									{% else %} 
										<a href="" id="thumb-submenu_background" class="img-thumbnail img-edit" data-toggle="image"><img src="../image/{{ submenu_background }}" data-placeholder="{{ placeholder }}" alt="" /></a>
									{% endif %} 
								</div>
							</div>
							
								<!-- Input -->	
							
							<div class="input clearfix">
								<p>Submenu background position</p>
								<select name="submenu_background_position">
									<option value="top left"{% if (submenu_background_position == 'top left') %} {{ ' selected="selected"' }} {% endif %}>Top left</option>
									<option value="top center"{% if (submenu_background_position == 'top center') %} {{ ' selected="selected"' }} {% endif %}>Top center</option>
									<option value="top right"{% if (submenu_background_position == 'top right') %} {{ ' selected="selected"' }} {% endif %}>Top right</option>
									<option value="bottom left"{% if (submenu_background_position == 'bottom left') %} {{ ' selected="selected"' }} {% endif %}>Bottom left</option>
									<option value="bottom center"{% if (submenu_background_position == 'bottom center') %} {{ ' selected="selected"' }} {% endif %}>Bottom center</option>
									<option value="bottom right"{% if (submenu_background_position == 'bottom right') %} {{ ' selected="selected"' }} {% endif %}>Bottom right</option>
								</select>
							</div>
							<!-- End Input -->
							
							<!-- Input -->	
							<div class="input clearfix">
								<p>Submenu background repeat</p>
								<select name="submenu_background_repeat">
									<option value="no-repeat"{% if (submenu_background_repeat == 'no-repeat') %} {{ ' selected="selected"' }} {% endif %}>no-repeat</option>
									<option value="repeat-x"{% if (submenu_background_repeat == 'repeat-x') %} {{ ' selected="selected"' }} {% endif %}>repeat-x</option>
									<option value="repeat-y"{% if (submenu_background_repeat == 'repeat-y') %} {{ ' selected="selected"' }} {% endif %}>repeat-y</option>
									<option value="repeat"{% if (submenu_background_repeat == 'repeat') %} {{ ' selected="selected"' }} {% endif %}>repeat</option>
								</select>
							</div>
							<!-- End Input -->
							
							<h5 style="margin-top:20px">Content item - content of these fields will only be displayed if the menu be set as submenu.</h5>
							<!-- Input -->
							<div class="input clearfix">
								<p>Content width</p>
								<select name="content_width">
									{% set i=1 %}{% for i in i..13 %} 
									<option value="{{ i }}" {% if (i == content_width) %} {{ 'selected="selected"' }} {% endif %}>{{ i }}/12</option>
									{% endfor %} 
								</select>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Content type</p>
								<select name="content_type">
									{% if (content_type != '0') %} 
									<option value="0">HTML</option>
									{% else %} 
									<option value="0" selected="selected">HTML</option>
									{% endif %} 
									{% if (content_type != '1') %} 
									<option value="1">Product</option>
									{% else %} 
									<option value="1" selected="selected">Product</option>
									{% endif %} 
									{% if (content_type != '2') %} 
									<option value="2">Links</option>
									{% else %} 
									<option value="2" selected="selected">Links</option>
									{% endif %} 
									{% if (content_type != '3') %} 
									<option value="3">Products</option>
									{% else %} 
									<option value="3" selected="selected">Products</option>
									{% endif %} 
								</select>
							</div>
							
							<div id="content_type0"{% if (content_type != '0') %} style="display:none"{% endif %} class="content_type">
								<h5 style="margin-top:20px">HTML</h5>
								
								<div class="htmltabs htabs">
								{% for language in languages %} 
								<a href="#content_html_{{ language['language_id'] }}"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" title="{{ language['name'] }}" /> {{ language['name'] }}</a>
								{% endfor %} 
								</div>
								
								{% for language in languages %} {% set lang_id = language['language_id'] %} 
								<!-- Input -->
								<div id="content_html_{{ language['language_id'] }}" class="content_html">
									<div class="clearfix" style="padding-top: 7px">
										<textarea name="content[html][text][{{ language['language_id'] }}]" id="content_html_text_{{ language['language_id'] }}" style="float: none;width: 100%;max-width: 100%;height: 300px">{% if (content['html']['text'][lang_id] is defined) %}{{ content['html']['text'][lang_id] }}{% endif %}</textarea>
									</div>
								</div>
								{% endfor %} 
							</div>
							
							<div id="content_type1"{% if (content_type != '1') %} style="display:none"{% endif %} class="content_type">
								<h5 style="margin-top:20px">Product</h5>
								
								<!-- Input -->
								<div class="input clearfix">
									<p>Products:<br><span style="font-size:11px;color:#808080">(Autocomplete)</span></p>
									<input type="hidden" name="content[product][id]" value="{{ content['product']['id'] }}" />
									<input type="text" id="product_autocomplete" name="content[product][name]" value="{{ content['product']['name'] }}">
								</div>
								
								<!-- Input -->
								<div class="input clearfix">
									<p>Dimension product image:<br><span style="font-size:11px;color:#808080">(W x H)</span></p>
									<input type="text" name="content[product][width]" value="{% if (content['product']['width'] is defined) %}{{ content['product']['width'] }}{% endif %}" style="width: 60px; margin-right: 0px">
									<span style="display: block;float: left; padding:7px 15px 0px 7px">px</span>
									<input type="text" name="content[product][height]" value="{% if (content['product']['height'] is defined) %}{{ content['product']['height'] }}{% endif %}" style="width: 60px; margin-right: 0px">
									<span style="display: block;float: left; padding:7px 15px 0px 7px">px</span>
								</div>
							</div>
							
							<div id="content_type2"{% if (content_type != '2') %} style="display:none"{% endif %} class="content_type">
								<h5 style="margin-top:20px">Links</h5>
								
								<!-- Input -->
								<div class="input clearfix">
									<p>Add categories<br><span style="font-size:11px;color:#808080">(Autocomplete)</span></p>
									<input type="text" id="categories_autocomplete" value="">								
								</div>
								
								<!-- Input -->
								<div class="input clearfix">
									<p>Add links<br><span style="font-size:11px;color:#808080">(Autocomplete)</span></p>
									<input type="text" id="links_autocomplete" value="">								
								</div>
								
								<!-- Input -->
								<div class="input clearfix">
									<p>Sort categories, links</p>
									<div class="cf nestable-lists">
										<div class="dd" id="sort_categories">
										    <ol class="dd-list">
										    	{{ list_categories }} 
										    </ol>
										</div>
										<input type="hidden" id="sort_categories_data" name="content[categories][categories]" value="{{ content['categories']['categories'] }}" />
									</div>
								</div>
								
								<!-- Input -->
								<div class="input clearfix">
									<p>Columns</p>
									<select name="content[categories][columns]">
										{% if (content['categories']['columns'] != '1') %} 
										<option value="1">1</option>
										{% else %} 
										<option value="1" selected="selected">1</option>
										{% endif %} 
										{% if (content['categories']['columns'] != '2') %} 
										<option value="2">2</option>
										{% else %} 
										<option value="2" selected="selected">2</option>
										{% endif %} 
										{% if (content['categories']['columns'] != '3') %} 
										<option value="3">3</option>
										{% else %} 
										<option value="3" selected="selected">3</option>
										{% endif %} 
										{% if (content['categories']['columns'] != '4') %} 
										<option value="4">4</option>
										{% else %} 
										<option value="4" selected="selected">4</option>
										{% endif %} 
										{% if (content['categories']['columns'] != '5') %} 
										<option value="5">5</option>
										{% else %} 
										<option value="5" selected="selected">5</option>
										{% endif %} 
										{% if (content['categories']['columns'] != '6') %} 
										<option value="6">6</option>
										{% else %} 
										<option value="6" selected="selected">6</option>
										{% endif %} 
									</select>
								</div>
								
								<!-- Input -->
								<div class="input clearfix" id="submenu-type">
									<p>Submenu type</p>
									<select name="content[categories][submenu]">
										{% if (content['categories']['submenu'] != '1') %} 
										<option value="1">Hover</option>
										{% else %} 
										<option value="1" selected="selected">Hover</option>
										{% endif %} 
										{% if (content['categories']['submenu'] != '2') %} 
										<option value="2">Visible</option>
										{% else %} 
										<option value="2" selected="selected">Visible</option>
										{% endif %} 
									</select>
								</div>
								
								<!-- Input -->
								<div class="input clearfix submenu-columns" {% if (content['categories']['submenu'] != '2') %} {{ 'style="display:none"' }} {% endif %}>
									<p>Image position</p>
									<select name="content[categories][image_position]">
									     {% if (content['categories']['image_position'] is defined) %} 
     										{% if (content['categories']['image_position'] != '1') %} 
     										<option value="1">Disabled</option>
     										{% else %} 
     										<option value="1" selected="selected">Disabled</option>
     										{% endif %} 
     										{% if (content['categories']['image_position'] != '2') %} 
     										<option value="2">Top</option>
     										{% else %} 
     										<option value="2" selected="selected">Top</option>
     										{% endif %} 
     										{% if (content['categories']['image_position'] != '3') %} 
     										<option value="3">Right</option>
     										{% else %} 
     										<option value="3" selected="selected">Right</option>
     										{% endif %} 
     										{% if (content['categories']['image_position'] != '4') %} 
     										<option value="4">Left</option>
     										{% else %} 
     										<option value="4" selected="selected">Left</option>
     										{% endif %} 
										{% else %} 
										     <option value="1">Disabled</option>
										     <option value="2">Top</option>
										     <option value="3">Right</option>
										     <option value="4">Left</option>
										{% endif %} 
									</select>
								</div>
								
								<!-- Input -->
								<div class="input clearfix submenu-columns" {% if (content['categories']['submenu'] != '2') %} {{ 'style="display:none"' }} {% endif %}>
									<p>Image dimensions (px)</p>
									<input type="text" name="content[categories][image_width]" style="width: 70px" value="{% if (content['categories']['image_width'] is defined) %}{{ content['categories']['image_width'] }}{% endif %}">
									<p style="width: 27px">x</p>
									<input type="text" name="content[categories][image_height]" style="width: 70px" value="{% if (content['categories']['image_height'] is defined) %}{{ content['categories']['image_height'] }}{% endif %}">
								</div>
								
								<!-- Input -->
								<div class="input clearfix submenu-columns" {% if (content['categories']['submenu'] != '2') %} {{ 'style="display:none"' }} {% endif %}>
									<p>Submenu columns</p>
									<select name="content[categories][submenu_columns]">
										{% if (content['categories']['submenu_columns'] != '1') %} 
										<option value="1">1</option>
										{% else %} 
										<option value="1" selected="selected">1</option>
										{% endif %} 
										{% if (content['categories']['submenu_columns'] != '2') %} 
										<option value="2">2</option>
										{% else %} 
										<option value="2" selected="selected">2</option>
										{% endif %} 
										{% if (content['categories']['submenu_columns'] != '3') %} 
										<option value="3">3</option>
										{% else %} 
										<option value="3" selected="selected">3</option>
										{% endif %} 
										{% if (content['categories']['submenu_columns'] != '4') %} 
										<option value="4">4</option>
										{% else %} 
										<option value="4" selected="selected">4</option>
										{% endif %} 
										{% if (content['categories']['submenu_columns'] != '5') %} 
										<option value="5">5</option>
										{% else %} 
										<option value="5" selected="selected">5</option>
										{% endif %} 
										{% if (content['categories']['submenu_columns'] != '6') %} 
										<option value="6">6</option>
										{% else %} 
										<option value="6" selected="selected">6</option>
										{% endif %} 
									</select>
								</div>
							</div>
							
							<div id="content_type3"{% if (content_type != '3') %} style="display:none"{% endif %} class="content_type">
								<h5 style="margin-top:20px">Products</h5>
								
								<!-- Input -->
								<div class="input clearfix">
									<p>Heading title</p>
									<div class="list-language">
									{% for language in languages %} 
									<div class="language">
										{% set language_id = language['language_id'] %} 
										<img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" />
										<input type="text" name="content[products][heading][{{ language_id }}]" {% if (content['products']['heading'][language_id] is defined) %} {{ 'value="'~content['products']['heading'][language_id]~'"' }} {% endif %}>
									</div>
									{% endfor %} 
									</div>
								</div>
								
								<!-- Input -->
								<div class="input clearfix">
									<p>Add products<br><span style="font-size:11px;color:#808080">(Autocomplete)</span></p>
									<input type="text" id="products_autocomplete" value="">								
								</div>
								
								<!-- Input -->
								<div class="input clearfix">
									<p>Sort products</p>
									<div class="cf nestable-lists">
										<div class="dd" id="sort_products">
										    <ol class="dd-list">
										    	{{ list_products }} 
										    </ol>
										</div>
										<input type="hidden" id="sort_products_data" name="content[products][products]" value="{{ content['products']['products'] }}" />
									</div>
								</div>
								
								<!-- Input -->
								<div class="input clearfix">
									<p>Number of products in row</p>
									<select name="content[products][columns]">
										{% if (content['products']['columns'] != '1') %} 
										<option value="1">1</option>
										{% else %} 
										<option value="1" selected="selected">1</option>
										{% endif %} 
										{% if (content['products']['columns'] != '2') %} 
										<option value="2">2</option>
										{% else %} 
										<option value="2" selected="selected">2</option>
										{% endif %} 
										{% if (content['products']['columns'] != '3') %} 
										<option value="3">3</option>
										{% else %} 
										<option value="3" selected="selected">3</option>
										{% endif %} 
										{% if (content['products']['columns'] != '4') %} 
										<option value="4">4</option>
										{% else %} 
										<option value="4" selected="selected">4</option>
										{% endif %} 
										{% if (content['products']['columns'] != '5') %} 
										<option value="5">5</option>
										{% else %} 
										<option value="5" selected="selected">5</option>
										{% endif %} 
										{% if (content['products']['columns'] != '6') %} 
										<option value="6">6</option>
										{% else %} 
										<option value="6" selected="selected">6</option>
										{% endif %} 
									</select>
								</div>
								
								<!-- Input -->
								<div class="input clearfix">
									<p>Product image dimensions (px)</p>
									<input type="text" name="content[products][image_width]" style="width: 70px" value="{% if (content['products']['image_width'] is defined) %}{{ content['products']['image_width'] }}{% endif %}">
									<p style="width: 27px">x</p>
									<input type="text" name="content[products][image_height]" style="width: 70px" value="{% if (content['products']['image_height'] is defined) %}{{ content['products']['image_height'] }}{% endif %}">
								</div>
							</div>
						</div>
						{% else %} 
						<div class="right">
							<h4>Basic configuration</h4>
							<!-- Input -->
							<div class="input clearfix">
								<p>Status</p>
								<select name="status">
									{% if (status) %} 
									<option value="1" selected="selected">Enabled</option>
									<option value="0">Disabled</option>
									{% else %} 
									<option value="1">Enabled</option>
									<option value="0" selected="selected">Disabled</option>
									{% endif %} 
								</select>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Display on mobile</p>
								<select name="display_on_mobile">
									{% if (display_on_mobile) %} 
									<option value="0">yes</option>
									<option value="1" selected="selected">no</option>
									{% else %} 
									<option value="0" selected="selected">yes</option>
									<option value="1">no</option>
									{% endif %} 
								</select>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Position</p>
								<select name="position">
									{% if (position == 'menu') %} 
									<option value="menu" selected="selected">Menu</option>
									{% else %} 
									<option value="menu">Menu</option>
									{% endif %} 
									{% if (position == 'menu2') %} 
									<option value="menu2" selected="selected">Menu2</option>
									{% else %} 
									<option value="menu2">Menu2</option>
									{% endif %} 
									{% if (position == 'slideshow') %} 
									<option value="slideshow" selected="selected">Slideshow</option>
									{% else %} 
									<option value="slideshow">Slideshow</option>
									{% endif %} 
									{% if (position == 'preface_left') %} 
									<option value="preface_left" selected="selected">Preface left</option>
									{% else %} 
									<option value="preface_left">Preface left</option>
									{% endif %} 
									{% if (position == 'preface_right') %} 
									<option value="preface_right" selected="selected">Preface right</option>
									{% else %} 
									<option value="preface_right">Preface right</option>
									{% endif %} 
									{% if (position == 'preface_fullwidth') %} 
									<option value="preface_fullwidth" selected="selected">Preface fullwidth</option>
									{% else %} 
									<option value="preface_fullwidth">Preface fullwidth</option>
									{% endif %} 
									{% if (position == 'column_left') %} 
									<option value="column_left" selected="selected">Column left</option>
									{% else %} 
									<option value="column_left">Column left</option>
									{% endif %} 
									{% if (position == 'content_big_column') %} 
									<option value="content_big_column" selected="selected">Content big column</option>
									{% else %} 
									<option value="content_big_column">Content big column</option>
									{% endif %} 
									{% if (position == 'content_top') %} 
									<option value="content_top" selected="selected">Content top</option>
									{% else %} 
									<option value="content_top">Content top</option>
									{% endif %} 
									{% if (position == 'column_right') %} 
									<option value="column_right" selected="selected">Column right</option>
									{% else %} 
									<option value="column_right">Column right</option>
									{% endif %} 
									{% if (position == 'content_bottom') %} 
									<option value="content_bottom" selected="selected">Content bottom</option>
									{% else %} 
									<option value="content_bottom">Content bottom</option>
									{% endif %} 
									{% if (position == 'customfooter_top') %} 
									<option value="customfooter_top" selected="selected">CustomFooter Top</option>
									{% else %} 
									<option value="customfooter_top">CustomFooter Top</option>
									{% endif %} 
									{% if (position == 'customfooter_bottom') %} 
									<option value="customfooter_bottom" selected="selected">CustomFooter Bottom</option>
									{% else %} 
									<option value="customfooter_bottom">CustomFooter Bottom</option>
									{% endif %} 
									{% if (position == 'footer_top') %} 
									<option value="footer_top" selected="selected">Footer top</option>
									{% else %} 
									<option value="footer_top">Footer top</option>
									{% endif %} 
									{% if (position == 'footer_left') %} 
									<option value="footer_left" selected="selected">Footer left</option>
									{% else %} 
									<option value="footer_left">Footer left</option>
									{% endif %} 
									{% if (position == 'footer_right') %} 
									<option value="footer_right" selected="selected">Footer right</option>
									{% else %} 
									<option value="footer_right">Footer right</option>
									{% endif %} 
									{% if (position == 'footer_bottom') %} 
									<option value="footer_bottom" selected="selected">Footer bottom</option>
									{% else %} 
									<option value="footer_bottom">Footer bottom</option>
									{% endif %} 
									{% if (position == 'bottom') %} 
									<option value="bottom" selected="selected">Bottom</option>
									{% else %} 
									<option value="bottom">Bottom</option>
									{% endif %} 
								</select>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Layout</p>
								<select name="layout_id">
									{% if (99999 == layout_id) %} 
									<option value="99999" selected="selected">All pages</option>
									{% else %} 
									<option value="99999">All pages</option>
									{% endif %} 
									{% for store in stores %} 
										{% if ('99999' ~ store['store_id'] == layout_id) %}
											{{ '<option value="99999' ~ store['store_id'] ~ '" selected="selected">All pages - Store ' ~ store['name'] ~ '</option>' }}
										{% else %} 
											{{ '<option value="99999' ~ store['store_id'] ~ '">All pages - Store ' ~ store['name'] ~ '</option>' }}
										{% endif %}
									{% endfor %} 
									{% for layout in layouts %} 
									{% if (layout['layout_id'] == layout_id) %} 
									<option value="{{ layout['layout_id'] }}" selected="selected">{{ layout['name'] }}</option>
									{% else %} 
									<option value="{{ layout['layout_id'] }}">{{ layout['name'] }}</option>
									{% endif %} 
									{% endfor %} 
								</select>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Sort order</p>
								<input type="text" name="sort_order" value="{{ sort_order }}">
							</div>
							
							<h4 style="margin-top:20px">Design configuration</h4>
							<!-- Input -->
							<div class="input clearfix">
								<p>Orientation</p>
								<select name="orientation">
									{% if (orientation == 1) %} 
									<option value="0">Horizontal</option>
									<option value="1" selected="selected">Vertical</option>
									<option value="2">Horizontal type 2 (Flowers version)</option>
									<option value="3">Horizontal type 3 (Audio version)</option>
									{% elseif (orientation == 2) %} 
									<option value="0">Horizontal</option>
									<option value="1">Vertical</option>
									<option value="2" selected="selected">Horizontal type 2 (Flowers version)</option>
									<option value="3">Horizontal type 3 (Audio version)</option>
									{% elseif (orientation == 3) %} 
									<option value="0">Horizontal</option>
									<option value="1">Vertical</option>
									<option value="2">Horizontal type 2 (Flowers version)</option>
									<option value="3" selected="selected">Horizontal type 3 (Audio version)</option>
									{% else %} 
									<option value="0" selected="selected">Horizontal</option>
									<option value="1">Vertical</option>
									<option value="2">Horizontal type 2 (Flowers version)</option>
									<option value="3">Horizontal type 3 (Audio version)</option>
									{% endif %}								
								</select>
							</div>
							
							<!-- Search -->
							<div class="input clearfix">
								<p>Search bar</p>
								<div><input type="checkbox" name="search_bar" {% if (search_bar == 1) %} {{ 'checked="checked"' }} {% endif %} value="1"></div>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Navigation text</p>
								<div class="list-language">
								{% for language in languages %} 
								<div class="language">
									{% set language_id = language['language_id'] %} 
									<img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" />
									<input type="text" name="navigation_text[{{ language_id }}]" {% if (navigation_text[language_id] is defined) %} {{ 'value="'~navigation_text[language_id]~'"' }} {% endif %}>
								</div>
								{% endfor %} 
								</div>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Expand Menu Bar Full Width?</p>
								<select name="full_width">
									{% if (full_width) %} 
									<option value="1" selected="selected">Yes</option>
									<option value="0">No</option>
									{% else %} 
									<option value="1">Yes</option>
									<option value="0" selected="selected">No</option>
									{% endif %}								
								</select>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Home item</p>
								<select name="home_item">
									{% if (home_item == 'icon') %} 
									<option value="icon" selected="selected">Icon</option>
									{% else %} 
									<option value="icon">Icon</option>
									{% endif %} 
									{% if (home_item == 'text') %} 
									<option value="text" selected="selected">Text</option>
									{% else %} 
									<option value="text">Text</option>
									{% endif %} 
									{% if (home_item == 'disabled') %} 
									<option value="disabled" selected="selected">Disabled</option>
									{% else %} 
									<option value="disabled">Disabled</option>
									{% endif %} 
								</select>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Home text</p>
								<div class="list-language">
								{% for language in languages %} 
								<div class="language">
									{% set language_id = language['language_id'] %} 
									<img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" />
									<input type="text" name="home_text[{{ language_id }}]" {% if (home_text[language_id] is defined) %} {{ 'value="'~home_text[language_id]~'"' }} {% endif %}>
								</div>
								{% endfor %} 
								</div>
							</div>
							
							<h4 style="margin-top:20px">jQuery Animations</h4>
							<!-- Input -->
							<div class="input clearfix">
								<p>Animation</p>
								<div>
									<input type="radio" value="slide" name="animation" {% if (animation == 'slide') %} {{ 'checked' }} {% endif %}> Slide<br>
									<input type="radio" value="fade" name="animation" {% if (animation == 'fade') %} {{ 'checked' }} {% endif %}> Fade<br>
									<input type="radio" value="shift-up" name="animation" {% if (animation == 'shift-up') %} {{ 'checked' }} {% endif %}> Shift Up<br>
									<input type="radio" value="shift-down" name="animation" {% if (animation == 'shift-down') %} {{ 'checked' }} {% endif %}> Shift Down<br>
									<input type="radio" value="shift-left" name="animation" {% if (animation == 'shift-left') %} {{ 'checked' }} {% endif %}> Shift Left<br>
									<input type="radio" value="shift-right" name="animation" {% if (animation == 'shift-right') %} {{ 'checked' }} {% endif %}> Shift Right<br>
									<input type="radio" value="flipping" name="animation" {% if (animation == 'flipping') %} {{ 'checked' }} {% endif %}> 3D Flipping<br>
									<input type="radio" value="none" name="animation" {% if (animation == 'none') %} {{ 'checked' }} {% endif %}> None
								</div>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Animation Time</p>
								<input type="text" name="animation_time" style="width:60px;margin-right:10px" value="{{ animation_time }}">
								<div>ms</div>
							</div>
							
							<h4 style="margin-top:20px">Cache Configuration</h4>
							<p style="background: #D9EDFA;padding:12px 15px;margin-top:20px">Allows for faster page loading. Changes made when this option is enabled will be visible after a cache time.</p>
							<!-- Input -->
							<div class="input clearfix">
								<p>Status</p>
								<select name="status_cache">
									{% if (status_cache) %} 
									<option value="1" selected="selected">Enabled</option>
									<option value="0">Disabled</option>
									{% else %} 
									<option value="1">Enabled</option>
									<option value="0" selected="selected">Disabled</option>
									{% endif %} 
								</select>
							</div>
							
							<!-- Input -->
							<div class="input clearfix">
								<p>Cache Time (in hours)</p>
								<input type="text" name="cache_time" style="width:60px;margin-right:10px" value="{{ cache_time }}">
								<div>h</div>
							</div>
							
						</div>
						{% endif %} 
					</div>
					
					<div class="buttons">
						{% if (action_type == 'create') %} 
						<input type="submit" name="button-create" class="button-save" value="">
						{% elseif (action_type == 'edit') %} 
						<input type="submit" name="button-edit" class="button-save" value="">
						{% else %} 
						<input type="submit" name="button-save" class="button-save" value="">
						{% endif %} 
					</div>
				</div>
			</div>
			<!-- End Content -->
		</form>
	</div>
 </div>
 
 {% if (action_type == 'create' or action_type == 'edit') %} 
 <script type="text/javascript">
 	 $('.htmltabs a').tabs();
 </script>
 {% endif %} 
 
<script type="text/javascript">
$(document).ready(function() {

	$("select[name=content_type]").change(function () {
		$("select[name=content_type] option:selected").each(function() {
			$(".content_type").hide();
			$("#content_type" + $(this).val()).show();
		});
	});
	
	$("#submenu-type").change(function () {
		$("#submenu-type option:selected").each(function() {
			if($(this).val() == 2) {
				$(".submenu-columns").show();
			} else {
				$(".submenu-columns").hide();
			}
		});
	});


	$('#product_autocomplete').autocomplete({
		delay: 500,
		max: 30,
		source: function(request, response) {		
			$.ajax({
				url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request),
				dataType: 'json',
				success: function(json) {
					response($.map(json, function(item) {
						return {
							label: item['name'],
							value: item['product_id']
						}
					}));
				}
			});
		},
		select: function(item) {
			$('#product_autocomplete').val(item['label']);
			$('input[name=\'content[product][id]\']').val(item['value']);
			
			return false;
		},
		focus: function(event, ui) {
	      	return false;
	   	}
	});
	
	$('#categories_autocomplete').autocomplete({
		delay: 500,
		max: 30,
		source: function(request, response) {		
			$.ajax({
				url: 'index.php?route=catalog/category/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request),
				dataType: 'json',
				success: function(json) {
					response($.map(json, function(item) {
						return {
							label: item['name'],
							value: item['category_id']
						}
					}));
				}
			});
		},
		select: function(item) {
			$("#sort_categories > .dd-list").append('<li class="dd-item" data-id="' + item['value'] + '" data-name="' + item['label'] + '"><a class="icon-delete"></a><div class="dd-handle">' + item['label'] + '</div></li>');
			updateOutput2($('#sort_categories').data('output', $('#sort_categories_data')));
			return false;
		},
		focus: function(event, ui) {
	      	return false;
	   	}
	});
	
	
	$('#products_autocomplete').autocomplete({
		delay: 500,
		max: 30,
		source: function(request, response) {		
			$.ajax({
				url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request),
				dataType: 'json',
				success: function(json) {
					response($.map(json, function(item) {
						return {
							label: item['name'],
							value: item['product_id']
						}
					}));
				}
			});
		},
		select: function(item) {
			$("#sort_products > .dd-list").append('<li class="dd-item" data-id="' + item['value'] + '" data-name="' + item['label'] + '"><a class="icon-delete"></a><div class="dd-handle">' + item['label'] + '</div></li>');
			updateOutput3($('#sort_products').data('output', $('#sort_products_data')));
			return false;
		},
		focus: function(event, ui) {
	      	return false;
	   	}
	});
	
	$('#links_autocomplete').autocomplete({
		delay: 500,
		max: 30,
		source: function(request, response) {		
			$.ajax({
				url: 'index.php?route=extension/module/megamenu/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request),
				dataType: 'json',
				success: function(json) {
					response($.map(json, function(item) {
						return {
							label: item['name'],
							value: item['id']
						}
					}));
				}
			});
		},
		select: function(item) {
			$("#sort_categories > .dd-list").append('<li class="dd-item" data-id="' + item['value'] + '" data-type="link" data-name="' + item['label'] + '"><a class="icon-delete"></a><div class="dd-handle">' + item['label'] + '</div></li>');
			updateOutput2($('#sort_categories').data('output', $('#sort_categories_data')));
			return false;
		},
		focus: function(event, ui) {
	      	return false;
	   	}
	});
	
	function lagXHRobjekt() {
		var XHRobjekt = null;
		
		try {
			ajaxRequest = new XMLHttpRequest(); // Firefox, Opera, ...
		} catch(err1) {
			try {
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); // Noen IE v.
			} catch(err2) {
				try {
						ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); // Noen IE v.
				} catch(err3) {
					ajaxRequest = false;
				}
			}
		}
		return ajaxRequest;
	}
	
	
	function menu_updatesort(jsonstring) {
	     $.post("index.php?route=extension/module/megamenu&user_token={{ user_token }}&module_id={{ active_module_id }}", {
	         jsonstring: jsonstring
	     }, function(data, status){
	          var ajaxDisplay = document.getElementById('sortDBfeedback');
	          ajaxDisplay.innerHTML = data;
	     });
	}
	
	var updateOutput = function(e)
	{
	    var list   = e.length ? e : $(e.target),
	        output = list.data('output');
	    if (window.JSON) {
	        menu_updatesort(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
	    } else {
	        alert('JSON browser support required for this demo.');
	    }
	};
	
	$('#nestable').nestable({
		group: 1,
		maxDepth: 2
	}).on('change', updateOutput);
	
	updateOutput($('#nestable').data('output', $('#nestable-output')));
	
	
	{% if (action_type == 'create' or action_type == 'edit') %} 
		var updateOutput2 = function(e)
		{
		    var list   = e.length ? e : $(e.target),
		        output = list.data('output');
		    if (window.JSON) {
		        output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
		    } else {
		        output.val('JSON browser support required for this demo.');
		    }
	};
		
		$('#sort_categories').nestable({
			group: 1,
			maxDepth: 5
		}).on('change', updateOutput2);
		
		updateOutput2($('#sort_categories').data('output', $('#sort_categories_data')));
		
		$('#sort_categories').on('click', '.icon-delete', function() {
			$(this).parent().remove();
			updateOutput2($('#sort_categories').data('output', $('#sort_categories_data')));
		});
		
		var updateOutput3 = function(e)
		{
		    var list   = e.length ? e : $(e.target),
		        output = list.data('output');
		    if (window.JSON) {
		        output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
		    } else {
		        output.val('JSON browser support required for this demo.');
		    }
	};
		
		$('#sort_products').nestable({
			group: 1,
			maxDepth: 1
		}).on('change', updateOutput3);
		
		updateOutput3($('#sort_products').data('output', $('#sort_products_data')));
		
		$('#sort_products').on('click', '.icon-delete', function() {
			$(this).parent().remove();
			updateOutput3($('#sort_products').data('output', $('#sort_products_data')));
		});
	{% endif %} 
	
});
</script>
{{ footer }}