{{ header }}{{ column_left }} 
<div id="content"><div class="container-fluid">
  <div class="page-header">
      <h1>Advanced Grid</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" src="view/javascript/summernote/summernote.js"></script>
  <link href="view/javascript/summernote/summernote.css" rel="stylesheet" />
  <script type="text/javascript" src="view/javascript/summernote/opencart.js"></script>  
  
  <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>
  
  <script type="text/javascript">
  $(document).ready(function() {
  
    $('.colorpicker-input').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>

  {% 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 %} 
  
  <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form">
    <div class="set-size" id="advanced_grid">
      <div class="content">
        <div>
          <div class="tabs clearfix">
            <!-- Tabs module -->
            <div id="tabs" class="htabs main-tabs">
              {% set module_row = 1 %} 
              {% for module in modules %} 
              <a href="#tab-module-{{ module_row }}" id="module-{{ module_row }}">Module {{ module_row }} &nbsp;<img src="view/image/module_template/delete-slider.png"  alt="" onclick="$('#module-{{ module_row }}').remove(); $('#tab-module-{{ module_row }}').remove(); $('.main-tabs a:first').trigger('click'); return false;" /></a>
              {% set module_row = module_row + 1 %} 
              {% endfor %} 
                            <span id="module-add" onclick="addModule();"><img src="view/image/module_template/add.png" alt=""  />Add<br> Module</span>
            </div>
            
            {% set module_row = 1 %} {% set modules_count = 1 %} {% set columns_count = 1 %} {% set links = 1 %} {% set products_tabs = 1 %} 
            {% for module in modules %} {% set column_count = columns_count %} 
              <div id="tab-module-{{ module_row }}" class="tab-content">
                <div id="tab-module-{{ module_row }}-tabs" class="module-tabs">
                  <a href="#tab-module-{{ module_row }}-settings">Module <br>Settings</a>
                  {% if (module['column'] is defined) %} {% for column in module['column'] %} 
                  <a href="#tab-module-{{ module_row }}-column-{{ column_count }}" id="column-{{ column_count }}">Column &nbsp;<img src="view/image/module_template/delete-slider.png" alt="" onclick="$('#tab-module-{{ module_row }}-column-{{ column_count }}').remove(); $('#column-{{ column_count }}').remove(); return false;" /></a>
                  {% set column_count = column_count + 1 %} {% endfor %} {% endif %} 
                                <span class="column-add"  onclick="addcolumn({{ module_row }});" ><img src="view/image/module_template/add.png" alt=""/>Add<br> Column</span>
                </div>
            
                <div id="tab-module-{{ module_row }}-settings" class="tab-content3">
                                  <h4>Design settings</h4>
                                  <table class="form">
                                    <tr>
                                        <td>Add custom class:</td>
                                        <td><input type="text" name="advanced_grid_module[{{ module_row }}][custom_class]" value="{{ module['custom_class'] }}" /></td>
                                    </tr>
                                    <tr>
                                        <td>Margins (px):<br><small style="color:#a3a3a3;font-size: 10px">(Top - right - bottom - left)</small></td>
                                        <td><input type="text" name="advanced_grid_module[{{ module_row }}][margin_top]" style="display: inline-block;margin-right:10px;" size="2" value="{{ module['margin_top'] }}" /> - <input type="text" name="advanced_grid_module[{{ module_row }}][margin_right]" size="2" style="display: inline-block;margin-right:10px;margin-left: 10px" value="{{ module['margin_right'] }}" /> - <input type="text" name="advanced_grid_module[{{ module_row }}][margin_bottom]" size="2" style="display: inline-block;margin-right:10px;margin-left: 10px" value="{{ module['margin_bottom'] }}" /> - <input type="text" name="advanced_grid_module[{{ module_row }}][margin_left]" style="display: inline-block;margin-right:10px;margin-left: 10px" size="2" value="{{ module['margin_left'] }}" /></td>
                                    </tr>
                                    <tr>
                                        <td>Paddings (px):<br><small style="color:#a3a3a3;font-size: 10px">(Top - right - bottom - left)</small></td>
                                        <td><input type="text" name="advanced_grid_module[{{ module_row }}][padding_top]" style="display: inline-block;margin-right:10px;" size="2" value="{{ module['padding_top'] }}" /> - <input type="text" name="advanced_grid_module[{{ module_row }}][padding_right]" size="2" style="display: inline-block;margin-right:10px;margin-left: 10px" value="{{ module['padding_right'] }}" /> - <input type="text" name="advanced_grid_module[{{ module_row }}][padding_bottom]" size="2" style="display: inline-block;margin-right:10px;margin-left: 10px" value="{{ module['padding_bottom'] }}" /> - <input type="text" name="advanced_grid_module[{{ module_row }}][padding_left]" style="display: inline-block;margin-right:10px;margin-left: 10px" size="2" value="{{ module['padding_left'] }}" /></td>
                                    </tr>
                                    <tr>
                                        <td>Force full width:</td>
                                        <td><select name="advanced_grid_module[{{ module_row }}][force_full_width]">
                                        <option value="0"{% if (module['force_full_width'] == 0) %} {{ ' selected="selected"' }}{% endif %}>No</option>
                                        <option value="1"{% if (module['force_full_width'] == 1) %} {{ ' selected="selected"' }}{% endif %}>Yes</option>
                                        </select></td>
                                    </tr>
                                    <tr>
                                        <td>Background color:</td>
                                        <td class="color_input">
                                                <input type="text" name="advanced_grid_module[{{ module_row }}][background_color]" class="colorpicker-input" value="{{ module['background_color'] }}" />
                                                <span class="color_selected" {% if (module['background_color'] != '') %} {{ 'style="background: ' ~ module['background_color'] ~ '"' }}{% endif %} ></span>
                                            </td>
                                    </tr>
                                    <tr>
                                        <td>Background image type:</td>
                                        <td><select name="advanced_grid_module[{{ module_row }}][background_image_type]">
                                        <option value="0"{% if (module['background_image_type'] == 0) %} {{ ' selected="selected"' }}{% endif %}>None</option>
                                        <option value="1"{% if (module['background_image_type'] == 1) %} {{ ' selected="selected"' }}{% endif %}>Standard</option>
                                        <option value="2"{% if (module['background_image_type'] == 2) %} {{ ' selected="selected"' }}{% endif %}>Parallax</option>
                                        </select></td>
                                    </tr>
                                     <tr>
                                       <td>Background image:</td>
                                       <td>
                                            {% if (module['background_image']) %} 
                                            <a href="" id="thumb-{{ module_row }}" class="img-thumbnail img-edit" data-toggle="image"><img src="../image/{{ module['background_image'] }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
                                            {% else %} 
                                            <a href="" id="thumb-{{ module_row }}" class="img-thumbnail img-edit" data-toggle="image"><img src="{{ placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
                                            {% endif %} 
                                         <input type="hidden" name="advanced_grid_module[{{ module_row }}][background_image]" value="{{ module['background_image'] }}" id="input-{{ module_row }}" />
                                       </td>
                                  </tr>
                                    <tr>
                                        <td>Position:</td>
                                        <td><select name="advanced_grid_module[{{ module_row }}][background_image_position]">
                                        <option value="top left"{% if (module['background_image_position'] == 'top left') %} {{ ' selected="selected"' }}{% endif %}>Top left</option>
                                        <option value="top center"{% if (module['background_image_position'] == 'top center') %} {{ ' selected="selected"' }}{% endif %}>Top center</option>
                                        <option value="top right"{% if (module['background_image_position'] == 'top right') %} {{ ' selected="selected"' }}{% endif %}>Top right</option>
                                        <option value="bottom left"{% if (module['background_image_position'] == 'bottom left') %} {{ ' selected="selected"' }}{% endif %}>Bottom left</option>
                                        <option value="bottom center"{% if (module['background_image_position'] == 'bottom center') %} {{ ' selected="selected"' }}{% endif %}>Bottom center</option>
                                        <option value="bottom right"{% if (module['background_image_position'] == 'bottom right') %} {{ ' selected="selected"' }}{% endif %}>Bottom right</option>
                                        <option value="50% 0"{% if (module['background_image_position'] == '50% 0') %} {{ ' selected="selected"' }}{% endif %}>50% 0</option>
                                        </select></td>
                                    </tr>
                                    <tr>
                                        <td>Repeat:</td>
                                        <td><select name="advanced_grid_module[{{ module_row }}][background_image_repeat]">
                                        <option value="no-repeat"{% if (module['background_image_repeat'] == 'no-repeat') %} {{ ' selected="selected"' }}{% endif %}>no-repeat</option>
                                        <option value="repeat-x"{% if (module['background_image_repeat'] == 'repeat-x') %} {{ ' selected="selected"' }}{% endif %}>repeat-x</option>
                                        <option value="repeat-y"{% if (module['background_image_repeat'] == 'repeat-y') %} {{ ' selected="selected"' }}{% endif %}>repeat-y</option>
                                        <option value="repeat"{% if (module['background_image_repeat'] == 'repeat') %} {{ ' selected="selected"' }}{% endif %}>repeat</option>
                                        </select></td>
                                    </tr>
                                    <tr>
                                         <td>Attachment:</td>
                                         <td><select name="advanced_grid_module[{{ module_row }}][background_image_attachment]">
                                              <option value="scroll"{% if (module['background_image_attachment'] == 'scroll') %} {{ ' selected="selected"' }}{% endif %}>scroll</option>
                                              <option value="fixed"{% if (module['background_image_attachment'] == 'fixed') %} {{ ' selected="selected"' }}{% endif %}>fixed</option>
                                         </select></td>
                                    </tr>
                                  </table> 
                         
                                  <h4 style="padding-top: 30px">Layout settings</h4>
                                  <table class="form">
                                    <tr>
                                      <td>Layout:</td>
                                        <td><select name="advanced_grid_module[{{ module_row }}][layout_id]">
                                {% if (99999 == module['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'] == module['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'] == module['layout_id']) %} 
                                <option value="{{ layout['layout_id'] }}" selected="selected">{{ layout['name'] }}</option>
                                {% else %} 
                                <option value="{{ layout['layout_id'] }}">{{ layout['name'] }}</option>
                                {% endif %} 
                                {% endfor %} 
                                        </select></td>
                                   </tr>
                                    <tr>
                                        <td>Position:</td>
                                        <td><select name="advanced_grid_module[{{ module_row }}][position]">
                                                {% if (module['position'] == 'header_notice') %} 
                                                <option value="header_notice" selected="selected">Header notice</option>
                                                {% else %} 
                                                <option value="header_notice">Header notice</option>
                                                {% endif %} 
                                              {% if (module['position'] == 'slideshow') %} 
                                              <option value="slideshow" selected="selected">Slideshow</option>
                                              {% else %} 
                                              <option value="slideshow">Slideshow</option>
                                              {% endif %} 
                                              {% if (module['position'] == 'preface_left') %} 
                                              <option value="preface_left" selected="selected">Preface left</option>
                                              {% else %} 
                                              <option value="preface_left">Preface left</option>
                                              {% endif %} 
                                              {% if (module['position'] == 'preface_right') %} 
                                              <option value="preface_right" selected="selected">Preface right</option>
                                              {% else %} 
                                              <option value="preface_right">Preface right</option>
                                              {% endif %} 
                                              {% if (module['position'] == 'preface_fullwidth') %} 
                                              <option value="preface_fullwidth" selected="selected">Preface fullwidth</option>
                                              {% else %} 
                                              <option value="preface_fullwidth">Preface fullwidth</option>
                                              {% endif %} 
                                              {% if (module['position'] == 'column_left') %} 
                                              <option value="column_left" selected="selected">Column left</option>
                                              {% else %} 
                                              <option value="column_left">Column left</option>
                                              {% endif %} 
                                              {% if (module['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 (module['position'] == 'content_top') %} 
                                              <option value="content_top" selected="selected">Content top</option>
                                              {% else %} 
                                              <option value="content_top">Content top</option>
                                              {% endif %} 
                                                 {% if (module['position'] == 'product_custom_block') %} 
                                                 <option value="product_custom_block" selected="selected">Product Custom Block</option>
                                                 {% else %} 
                                                 <option value="product_custom_block">Product Custom Block</option>
                                                 {% endif %} 
                                              {% if (module['position'] == 'column_right') %} 
                                              <option value="column_right" selected="selected">Column right</option>
                                              {% else %} 
                                              <option value="column_right">Column right</option>
                                              {% endif %} 
                                              {% if (module['position'] == 'content_bottom') %} 
                                              <option value="content_bottom" selected="selected">Content bottom</option>
                                              {% else %} 
                                              <option value="content_bottom">Content bottom</option>
                                              {% endif %} 
                                              {% if (module['position'] == 'customfooter_top') %} 
                                              <option value="customfooter_top" selected="selected">CustomFooter Top</option>
                                              {% else %} 
                                              <option value="customfooter_top">CustomFooter Top</option>
                                              {% endif %} 
                                              
                                              {% if (module['position'] == 'customfooter') %} 
                                                 <option value="customfooter" selected="selected">CustomFooter</option>
                                                 {% else %} 
                                                 <option value="customfooter">CustomFooter</option>
                                                 {% endif %} 
                                                 
                                              {% if (module['position'] == 'customfooter_bottom') %} 
                                              <option value="customfooter_bottom" selected="selected">CustomFooter Bottom</option>
                                              {% else %} 
                                              <option value="customfooter_bottom">CustomFooter Bottom</option>
                                              {% endif %} 
                                              {% if (module['position'] == 'footer_top') %} 
                                              <option value="footer_top" selected="selected">Footer top</option>
                                              {% else %} 
                                              <option value="footer_top">Footer top</option>
                                              {% endif %} 
                                              {% if (module['position'] == 'footer') %} 
                                              <option value="footer" selected="selected">Footer</option>
                                              {% else %} 
                                              <option value="footer">Footer</option>
                                              {% endif %} 
                                              {% if (module['position'] == 'footer_bottom') %} 
                                              <option value="footer_bottom" selected="selected">Footer bottom</option>
                                              {% else %} 
                                              <option value="footer_bottom">Footer bottom</option>
                                              {% endif %} 
                                              {% if (module['position'] == 'bottom') %} 
                                              <option value="bottom" selected="selected">Bottom</option>
                                              {% else %} 
                                              <option value="bottom">Bottom</option>
                                              {% endif %} 
                                        </select></td>
                                    </tr>
                                    <tr>
                                        <td>Status:</td>
                                        <td><select name="advanced_grid_module[{{ module_row }}][status]">
                                        <option value="1"{% if (module['status'] == 1) %} {{ ' selected="selected"' }}{% endif %}>Enabled</option>
                                        <option value="0"{% if (module['status'] == 0) %} {{ ' selected="selected"' }}{% endif %}>Disabled</option>
                                        </select></td>
                                    </tr>
                                    <tr>
                                        <td>Sort Order:</td>
                                        <td><input type="text" name="advanced_grid_module[{{ module_row }}][sort_order]" value="{{ module['sort_order'] }}" size="3" /></td>
                                    </tr>
                                    <tr>
                                        <td>Disable on mobile:</td>
                                        <td><select name="advanced_grid_module[{{ module_row }}][disable_on_mobile]">
                                        <option value="0"{% if (module['disable_on_mobile'] == 0) %} {{ ' selected="selected"' }}{% endif %}>No</option>
                                        <option value="1"{% if (module['disable_on_mobile'] == 1) %} {{ ' selected="selected"' }}{% endif %}>Yes</option>
                                        </select></td>
                                    </tr>
                                  </table> 
                              </div>
                              
                              {% if (module['column'] is defined) %} {% for column in module['column'] %} 
                              <div id="tab-module-{{ module_row }}-column-{{ columns_count }}" class="tab-content3">
                                        {% if (column['status'] == 1) %} {{ '<div class="status status-on" title="1" rel="module_' ~ module_row ~ '_column_' ~ columns_count ~ '_status"></div>' }} {% else %} {{ '<div class="status status-off" title="0" rel="module_' ~ module_row ~ '_column_' ~ columns_count ~ '_status"></div>' }} {% endif %} 
                                  <input name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][status]" value="{{ column['status'] }}" id="module_{{ module_row }}_column_{{ columns_count }}_status" type="hidden" />
                              
                                  <div class="input clearfix">
                                    <p>Column width:</p>
                                    <select name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][width]" class="change-column-width" id="module-{{ module_row }}-column-{{ columns_count }}">
                                      <option value="1"{% if (column['width'] == 1) %} {{ ' selected="selected"' }}{% endif %}>1/12</option>
                                      <option value="2"{% if (column['width'] == 2) %} {{ ' selected="selected"' }}{% endif %}>2/12</option>
                                      <option value="3"{% if (column['width'] == 3) %} {{ ' selected="selected"' }}{% endif %}>3/12</option>
                                      <option value="4"{% if (column['width'] == 4) %} {{ ' selected="selected"' }}{% endif %}>4/12</option>
                                      <option value="5"{% if (column['width'] == 5) %} {{ ' selected="selected"' }}{% endif %}>5/12</option>
                                      <option value="6"{% if (column['width'] == 6) %} {{ ' selected="selected"' }}{% endif %}>6/12</option>
                                      <option value="7"{% if (column['width'] == 7) %} {{ ' selected="selected"' }}{% endif %}>7/12</option>
                                      <option value="8"{% if (column['width'] == 8) %} {{ ' selected="selected"' }}{% endif %}>8/12</option>
                                      <option value="9"{% if (column['width'] == 9) %} {{ ' selected="selected"' }}{% endif %}>9/12</option>
                                      <option value="10"{% if (column['width'] == 10) %} {{ ' selected="selected"' }}{% endif %}>10/12</option>
                                      <option value="11"{% if (column['width'] == 11) %} {{ ' selected="selected"' }}{% endif %}>11/12</option>
                                      <option value="12"{% if (column['width'] == 12) %} {{ ' selected="selected"' }}{% endif %}>12/12</option>
                                      <option value="advanced"{% if (column['width'] == 'advanced') %} {{ ' selected="selected"' }}{% endif %}>Advanced</option>
                                    </select>
                                  </div>
                              
                                  <div class="input clearfix simple-width"{% if (column['width'] == 'advanced') %} {{ ' style="display: none"' }}{% endif %}>
                                    <p>Disable on mobile:</p>
                                    <select name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][disable_on_mobile]">
                                      <option value="0"{% if (column['disable_on_mobile'] == 0) %} {{ ' selected="selected"' }}{% endif %}>No</option>
                                      <option value="1"{% if (column['disable_on_mobile'] == 1) %} {{ ' selected="selected"' }}{% endif %}>Yes</option>
                                    </select>
                                  </div>
                              
                                  <div class="input clearfix advanced-width"{% if (column['width'] != 'advanced') %} {{ ' style="display: none"' }}{% endif %}>
                                    <p>Column width on extra small devices (<768px):</p>
                                    <select name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][width_xs]">
                                      <option value="1"{% if (column['width_xs'] == 1) %} {{ ' selected="selected"' }}{% endif %}>1/12</option>
                                      <option value="2"{% if (column['width_xs'] == 2) %} {{ ' selected="selected"' }}{% endif %}>2/12</option>
                                      <option value="3"{% if (column['width_xs'] == 3) %} {{ ' selected="selected"' }}{% endif %}>3/12</option>
                                      <option value="4"{% if (column['width_xs'] == 4) %} {{ ' selected="selected"' }}{% endif %}>4/12</option>
                                      <option value="5"{% if (column['width_xs'] == 5) %} {{ ' selected="selected"' }}{% endif %}>5/12</option>
                                      <option value="6"{% if (column['width_xs'] == 6) %} {{ ' selected="selected"' }}{% endif %}>6/12</option>
                                      <option value="7"{% if (column['width_xs'] == 7) %} {{ ' selected="selected"' }}{% endif %}>7/12</option>
                                      <option value="8"{% if (column['width_xs'] == 8) %} {{ ' selected="selected"' }}{% endif %}>8/12</option>
                                      <option value="9"{% if (column['width_xs'] == 9) %} {{ ' selected="selected"' }}{% endif %}>9/12</option>
                                      <option value="10"{% if (column['width_xs'] == 10) %} {{ ' selected="selected"' }}{% endif %}>10/12</option>
                                      <option value="11"{% if (column['width_xs'] == 11) %} {{ ' selected="selected"' }}{% endif %}>11/12</option>
                                      <option value="12"{% if (column['width_xs'] == 12) %} {{ ' selected="selected"' }}{% endif %}>12/12</option>
                                      <option value="hidden"{% if (column['width_xs'] == 'hidden') %} {{ ' selected="selected"' }}{% endif %}>hidden</option>
                                    </select>
                                  </div>
                              
                                  <div class="input clearfix advanced-width"{% if (column['width'] != 'advanced') %} {{ ' style="display: none"' }}{% endif %}>
                                    <p>Column width on small devices (≥768px):</p>
                                    <select name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][width_sm]">
                                      <option value="1"{% if (column['width_sm'] == 1) %} {{ ' selected="selected"' }}{% endif %}>1/12</option>
                                      <option value="2"{% if (column['width_sm'] == 2) %} {{ ' selected="selected"' }}{% endif %}>2/12</option>
                                      <option value="3"{% if (column['width_sm'] == 3) %} {{ ' selected="selected"' }}{% endif %}>3/12</option>
                                      <option value="4"{% if (column['width_sm'] == 4) %} {{ ' selected="selected"' }}{% endif %}>4/12</option>
                                      <option value="5"{% if (column['width_sm'] == 5) %} {{ ' selected="selected"' }}{% endif %}>5/12</option>
                                      <option value="6"{% if (column['width_sm'] == 6) %} {{ ' selected="selected"' }}{% endif %}>6/12</option>
                                      <option value="7"{% if (column['width_sm'] == 7) %} {{ ' selected="selected"' }}{% endif %}>7/12</option>
                                      <option value="8"{% if (column['width_sm'] == 8) %} {{ ' selected="selected"' }}{% endif %}>8/12</option>
                                      <option value="9"{% if (column['width_sm'] == 9) %} {{ ' selected="selected"' }}{% endif %}>9/12</option>
                                      <option value="10"{% if (column['width_sm'] == 10) %} {{ ' selected="selected"' }}{% endif %}>10/12</option>
                                      <option value="11"{% if (column['width_sm'] == 11) %} {{ ' selected="selected"' }}{% endif %}>11/12</option>
                                      <option value="12"{% if (column['width_sm'] == 12) %} {{ ' selected="selected"' }}{% endif %}>12/12</option>
                                      <option value="hidden"{% if (column['width_sm'] == 'hidden') %} {{ ' selected="selected"' }}{% endif %}>hidden</option>
                                    </select>
                                  </div>
                              
                                  <div class="input clearfix advanced-width"{% if (column['width'] != 'advanced') %} {{ ' style="display: none"' }}{% endif %}>
                                    <p>Column width on medium devices (≥992px):</p>
                                    <select name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][width_md]">
                                      <option value="1"{% if (column['width_md'] == 1) %} {{ ' selected="selected"' }}{% endif %}>1/12</option>
                                      <option value="2"{% if (column['width_md'] == 2) %} {{ ' selected="selected"' }}{% endif %}>2/12</option>
                                      <option value="3"{% if (column['width_md'] == 3) %} {{ ' selected="selected"' }}{% endif %}>3/12</option>
                                      <option value="4"{% if (column['width_md'] == 4) %} {{ ' selected="selected"' }}{% endif %}>4/12</option>
                                      <option value="5"{% if (column['width_md'] == 5) %} {{ ' selected="selected"' }}{% endif %}>5/12</option>
                                      <option value="6"{% if (column['width_md'] == 6) %} {{ ' selected="selected"' }}{% endif %}>6/12</option>
                                      <option value="7"{% if (column['width_md'] == 7) %} {{ ' selected="selected"' }}{% endif %}>7/12</option>
                                      <option value="8"{% if (column['width_md'] == 8) %} {{ ' selected="selected"' }}{% endif %}>8/12</option>
                                      <option value="9"{% if (column['width_md'] == 9) %} {{ ' selected="selected"' }}{% endif %}>9/12</option>
                                      <option value="10"{% if (column['width_md'] == 10) %} {{ ' selected="selected"' }}{% endif %}>10/12</option>
                                      <option value="11"{% if (column['width_md'] == 11) %} {{ ' selected="selected"' }}{% endif %}>11/12</option>
                                      <option value="12"{% if (column['width_md'] == 12) %} {{ ' selected="selected"' }}{% endif %}>12/12</option>
                                      <option value="hidden"{% if (column['width_md'] == 'hidden') %} {{ ' selected="selected"' }}{% endif %}>hidden</option>
                                    </select>
                                  </div>
                              
                                  <div class="input clearfix advanced-width"{% if (column['width'] != 'advanced') %} {{ ' style="display: none"' }}{% endif %}>
                                    <p>Column width on large devices (≥1200px):</p>
                                    <select name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][width_lg]">
                                      <option value="1"{% if (column['width_lg'] == 1) %} {{ ' selected="selected"' }}{% endif %}>1/12</option>
                                      <option value="2"{% if (column['width_lg'] == 2) %} {{ ' selected="selected"' }}{% endif %}>2/12</option>
                                      <option value="3"{% if (column['width_lg'] == 3) %} {{ ' selected="selected"' }}{% endif %}>3/12</option>
                                      <option value="4"{% if (column['width_lg'] == 4) %} {{ ' selected="selected"' }}{% endif %}>4/12</option>
                                      <option value="5"{% if (column['width_lg'] == 5) %} {{ ' selected="selected"' }}{% endif %}>5/12</option>
                                      <option value="6"{% if (column['width_lg'] == 6) %} {{ ' selected="selected"' }}{% endif %}>6/12</option>
                                      <option value="7"{% if (column['width_lg'] == 7) %} {{ ' selected="selected"' }}{% endif %}>7/12</option>
                                      <option value="8"{% if (column['width_lg'] == 8) %} {{ ' selected="selected"' }}{% endif %}>8/12</option>
                                      <option value="9"{% if (column['width_lg'] == 9) %} {{ ' selected="selected"' }}{% endif %}>9/12</option>
                                      <option value="10"{% if (column['width_lg'] == 10) %} {{ ' selected="selected"' }}{% endif %}>10/12</option>
                                      <option value="11"{% if (column['width_lg'] == 11) %} {{ ' selected="selected"' }}{% endif %}>11/12</option>
                                      <option value="12"{% if (column['width_lg'] == 12) %} {{ ' selected="selected"' }}{% endif %}>12/12</option>
                                      <option value="hidden"{% if (column['width_lg'] == 'hidden') %} {{ ' selected="selected"' }}{% endif %}>hidden</option>
                                    </select>
                                  </div>
                              
                                  <div class="input clearfix">
                                    <p>Sort:</p>
                                    <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][sort]" value="{{ column['sort'] }}">
                                  </div>
                
                  
                
                    <div id="module_{{ module_row }}_column_{{ columns_count }}_modules" class="tabs_add_element clearfix">
                                        <div class="column_add_head">Add modules<br> to the column</div> 
                                        {% if (column['module'] is defined) %} {% set s = 1 %} {% for column_module in column['module'] %} 
                         <a href="#module-{{ module_row }}-{{ columns_count }}-module-{{ s }}" id="element-{{ modules_count }}">{{ s }} &nbsp;<img src="view/image/module_template/delete-slider.png" alt="" onclick="$('#element-{{ modules_count }}').remove(); $('#module-{{ module_row }}-{{ columns_count }}-module-{{ s }}').remove(); return false;" /></a>
                         {% set s = s + 1 %} {% set modules_count = modules_count + 1 %} {% endfor %} {% endif %} 
                      <img src="view/image/module_template/add.png" alt="" onclick="addModuleToColumn({{ module_row }}, {{ columns_count }});">
                    </div>
                          
                          {% if (column['module'] is defined) %} {% set s = 1 %} {% for column_module in column['module'] %} 
                          <div id="module-{{ module_row }}-{{ columns_count }}-module-{{ s }}" style="padding-top: 20px">
                               {% if (column_module['status'] == 1) %} {{ '<div class="status status-on" title="1" rel="module_' ~ module_row ~ '_column_' ~ columns_count ~ '_module_' ~ s ~ '_status"></div>' }} {% else %} {{ '<div class="status status-off" title="0" rel="module_' ~ module_row ~ '_column_' ~ columns_count ~ '_module_' ~ s ~ '_status"></div>' }} {% endif %} 
                               <input name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][status]" value="{{ column_module['status'] }}" id="module_{{ module_row }}_column_{{ columns_count }}_module_{{ s }}_status" type="hidden" />
                                                                                      
                              <div class="input clearfix">
                                <p>Sort:</p>
                                <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][sort]" value="{{ column_module['sort'] }}">
                              </div>
                              <div class="input clearfix">
                                <p>Type column:</p>
                                <select name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][type]" class="type-column" id="{{ module_row }}-{{ columns_count }}-module-{{ s }}">
                                  <option value="html"{% if (column_module['type'] == 'html') %} {{ ' selected="selected"' }}{% endif %}>HTML</option>
                                  <option value="box"{% if (column_module['type'] == 'box') %} {{ ' selected="selected"' }}{% endif %}>Box</option>
                                  <option value="links"{% if (column_module['type'] == 'links') %} {{ ' selected="selected"' }}{% endif %}>Links</option>
                                  <option value="products"{% if (column_module['type'] == 'products') %} {{ ' selected="selected"' }}{% endif %}>Products</option>
                                  <option value="products_tabs"{% if (column_module['type'] == 'products_tabs') %} {{ ' selected="selected"' }}{% endif %}>Products Tabs</option>
                                  <option value="newsletter"{% if (column_module['type'] == 'newsletter') %} {{ ' selected="selected"' }}{% endif %}>Newsletter</option>
                                  <option value="latest_blogs"{% if (column_module['type'] == 'latest_blogs') %} {{ ' selected="selected"' }}{% endif %}>Latest blogs</option>
                                  <option value="load_module"{% if (column_module['type'] == 'load_module') %} {{ ' selected="selected"' }}{% endif %}>Load module</option>
                                </select>
                              </div>
                          
                              <div class="type-column">
                          
                                <div class="html"{% if (column_module['type'] != 'html') %} {{ ' style="display: none"' }}{% endif %}>
                                    <div id="language-html-{{ module_row }}-{{ columns_count }}-{{ s }}" class="htabs">
                          {% for language in languages %} 
                                      <a href="#tab-language-html-{{ module_row }}-{{ columns_count }}-{{ s }}-{{ language['language_id'] }}"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" title="{{ language['name'] }}" /> {{ language['name'] }}</a>
                          {% endfor %} 
                                    </div>
                          
                          {% for language in languages %} 
                                  <div id="tab-language-html-{{ module_row }}-{{ columns_count }}-{{ s }}-{{ language['language_id'] }}">
                                    <div class="input clearfix">
                                      <p>HTML:</p>
                                      <textarea name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][html][{{ language['language_id'] }}]" {% if (column_module['type'] != 'html') %} {{ 'disabled="disabled"' }}{% endif %}>{% set language_id = language['language_id'] %}{% if (column_module['html'][language_id] is defined) %}{{ column_module['html'][language_id] }}{% endif %}</textarea>
                                    </div>
                                  </div>
                          {% endfor %} 
                                </div>
                          
                                <div class="box"{% if (column_module['type'] != 'box') %} {{ ' style="display: none"' }}{% endif %}>
                                    <div id="language-box-{{ module_row }}-{{ columns_count }}-{{ s }}" class="htabs">
                          {% for language in languages %} 
                                      <a href="#tab-language-box-{{ module_row }}-{{ columns_count }}-{{ s }}-{{ language['language_id'] }}"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" title="{{ language['name'] }}" /> {{ language['name'] }}</a>
                          {% endfor %} 
                                    </div>
                          
                          {% for language in languages %} 
                                  <div id="tab-language-box-{{ module_row }}-{{ columns_count }}-{{ s }}-{{ language['language_id'] }}">
                                    <div class="input clearfix">
                                      <p>Module Title:</p>
                                      <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][module][title][{{ language['language_id'] }}]" value="{% set language_id = language['language_id'] %}{% if (column_module['module']['title'][language_id] is defined) %}{{ column_module['module']['title'][language_id] }}{% endif %}" {% if (column_module['type'] != 'box') %} {{ 'disabled="disabled"' }}{% endif %}>
                                    </div>
                          
                                    <div class="input clearfix">
                                      <p>Module Text:</p>
                                      <textarea name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][module][text][{{ language['language_id'] }}]" {% if (column_module['type'] != 'box') %} {{ 'disabled="disabled"' }}{% endif %}>{% set language_id = language['language_id'] %}{% if (column_module['module']['text'][language_id] is defined) %}{{ column_module['module']['text'][language_id] }}{% endif %}</textarea>
                                    </div>
                                  </div>
                          {% endfor %} 
                                </div>
                          
                                <div class="links"{% if (column_module['type'] != 'links') %} {{ ' style="display: none"' }}{% endif %}>
                          
                                  <div class="input clearfix" style="padding-top:30px">
                                    <p>Module Template - Advanced:</p>
                                    
                                    <div class="hint">
                                         <b>Advanced templates was created only for selected skins to provide your skins with better 
                                         and more varied content. They can be used with other skins but with some css changes.</b>
                                    </div>
                                    
                                    <p>&nbsp;</p>
                                    
                                                        <a href="#documentation_link" class="hint-tooltip" data-toggle="tooltip" title="Go to the documentation to se how it works" target="_blank"></a>
                                    <div class="module-layouts">
                                                            
                          {% for template in templates %} 
               {% if (links_templates[template] is defined) %}
               {% set i = 0 %}
               {{ '<div class="module-layout-title">' ~ template ~ '</div>' }}
               {# {% if (column_module['links']['module_layout'] is not defined) %} {% set column_module['links']['module_layout'] = constant('false') %}{% endif %} #}
               {% for file_template in links_templates[template] %} 
                                                                  <div class="module-layout clearfix">
                                                                       <input type="radio" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][links][module_layout]" value="{{ file_template }}" {% if (column_module['links']['module_layout']|replace({'.tpl': '.twig'}) == file_template) %} {{ 'checked="checked"' }}{% endif %} class="input-module-layout" {% if (column_module['type'] != 'links') %} {{ 'disabled="disabled"' }}{% endif %}>
                                                                       <p>{{ file_template }}</p>
                                                                  </div>
                                    {% set i = i + 1 %} {% endfor %}
               {% endif %}
               {% endfor %} 
                                    </div>
                                  </div>
                          
                                  <div class="input clearfix">
                                    <p>Module Title:</p>
                                    <div class="list-language">
                          {% for language in languages %} 
                                      <div class="language"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" /><input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][links][title][{{ language['language_id'] }}]" value="{% set language_id = language['language_id'] %}{% if (column_module['links']['title'][language_id] is defined) %}{{ column_module['links']['title'][language_id] }}{% endif %}" {% if (column_module['type'] != 'links') %} {{ 'disabled="disabled"' }}{% endif %}></div>
                          {% endfor %} 
                                    </div>
                                  </div>
                                  
                                  <div class="input clearfix" style="border:none">
                                       <p>Max links in one column:</p>
                                       <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][links][limit]" value="{% if (column_module['links']['limit'] is defined) %}{{ column_module['links']['limit'] }}{% endif %}" style="width: 60px" {% if (column_module['type'] != 'links') %} {{ 'disabled="disabled"' }}{% endif %}>
                                  </div>
                     
                                  <table id="links-{{ module_row }}-{{ columns_count }}-{{ s }}">
                                    <thead>
                                      <tr>
                                        <td class="first">Name</td>
                                        <td>Link</td>
                                        <td>Sort</td>
                                        <td>Delete</td>
                                      </tr>
                                    </thead>
                                    {% if (column_module['links']['array'] is defined) %} {% for link in column_module['links']['array'] %} 
                                    <tbody id="link-{{ links }}">
                                         <tr>
                                              <td class="first"><div class="list-language">
                                              {% for language in languages %} 
                                                   <div class="language">
                                                        <img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" />
                                                        <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][links][array][{{ links }}][name][{{ language['language_id'] }}]" value="{% set language_id = language['language_id'] %}{% if (link['name'][language_id] is defined) %}{{ link['name'][language_id] }}{% endif %}">
                                                   </div>
                                              {% endfor %} 
                                              </div></td>
                                                 <td><div class="list-language">
                                                 {% for language in languages %} 
                                                      <div class="language">
                                                           <img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" />
                                                           <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][links][array][{{ links }}][url][{{ language['language_id'] }}]" value="{% set language_id = language['language_id'] %}{% if (link['url'][language_id] is defined and link['url'] is iterable) %}{{ link['url'][language_id] }}{% elseif (link['url'] is defined and link['url'] is not iterable) %} {{ link['url'] }}{% endif %}">
                                                      </div>
                                                 {% endfor %} 
                                                 </div></td>
                                              <td><input type="text" class="sort" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][links][array][{{ links }}][sort]" value="{{ link['sort'] }}" {% if (column_module['type'] != 'links') %} {{ 'disabled="disabled"' }}{% endif %}></td>
                                                                  <td><a onclick="$('#link-{{ links }}').remove();" class="remove-link"><img src="view/image/module_template/delete-slider.png" alt=""/></a></td>
                                         </tr>
                                    </tbody>
                                    {% set links = links + 1 %} {% endfor %} {% endif %} 
                                    <tfoot></tfoot>
                                  </table>
                                                    <a onclick="addLink({{ module_row }}, {{ columns_count }}, {{ s }});" class="add-link"><span>Add<br> new</span></a>
                                </div>
                          
                                 <div class="products"{% if (column_module['type'] != 'products') %} {{ ' style="display: none"' }}{% endif %}>
                          
                                  <div class="input clearfix" style="padding-top:30px">
                                    <p>Module Template - Advanced:</p>
                                    
                                    <div class="hint">
                                         <b>Advanced templates was created only for selected skins to provide your skins with better 
                                         and more varied content. They can be used with other skins but with some css changes.</b>
                                    </div>
                                  
                                    <p>&nbsp;</p>
                                    
                                                         <a href="#documentation_link" class="hint-tooltip" data-toggle="tooltip" title="Go to the documentation to se how it works" target="_blank"></a>
                                    <div class="module-layouts">
                          {% for template in templates %} 
               {% if (products_templates[template] is defined) %}
               {% set i = 0 %}
               {{ '<div class="module-layout-title">' ~ template ~ '</div>' }}
               {# {% if (column_module['products']['module_layout'] is not defined) %} {% set column_module['products']['module_layout'] = constant('false') %}{% endif %} #}
                {% for file_template in products_templates[template] %} 
                                                                  <div class="module-layout clearfix">
                                                                       <input type="radio" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products][module_layout]" value="{{ file_template }}" {% if (column_module['products']['module_layout']|replace({'.tpl': '.twig'}) == file_template) %} {{ 'checked="checked"' }}{% endif %} class="input-module-layout" {% if (column_module['type'] != 'products') %} {{ 'disabled="disabled"' }}{% endif %}>
                                                                       <p>{{ file_template }}</p>
                                                                  </div>
                                    {% set i = i + 1 %} {% endfor %}
               {% endif %}
               {% endfor %} 
                                    </div>
                                  </div>
                          
                                   <div class="input clearfix">
                                    <p>Module Title:</p>
                                    <div class="list-language">
                          {% for language in languages %} 
                                      <div class="language"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" /><input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products][title][{{ language['language_id'] }}]" value="{% set language_id = language['language_id'] %}{% if (column_module['products']['title'][language_id] is defined) %}{{ column_module['products']['title'][language_id] }}{% endif %}" {% if (column_module['type'] != 'products') %} {{ 'disabled="disabled"' }}{% endif %}></div>
                          {% endfor %} 
                                    </div>
                                  </div>
                          
                                  <div class="input clearfix">
                                    <p>Get products from:</p>
                                    <div style="float:left;width:425px">
                                      <select name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products][get_products_from]" class="get-product" id="{{ module_row }}-{{ columns_count }}-module-{{ s }}" {% if (column_module['type'] != 'products') %} {{ 'disabled="disabled"' }}{% endif %}>
                                      {# {% if (column_module['products']['get_products_from'] is not defined) %} {% set column_module['products']['get_products_from'] = constant('false') %}{% endif %} #}
                                         <option value="latest"{% if (column_module['products']['get_products_from'] == 'latest') %} {{ ' selected="selected"' }}{% endif %}>Latest Products</option>
                                        <option value="special"{% if (column_module['products']['get_products_from'] == 'special') %} {{ ' selected="selected"' }}{% endif %}>Special Products</option>
                                        <option value="bestsellers"{% if (column_module['products']['get_products_from'] == 'bestsellers') %} {{ ' selected="selected"' }}{% endif %}>Bestsellers Products</option>
                                        <option value="products"{% if (column_module['products']['get_products_from'] == 'products') %} {{ ' selected="selected"' }}{% endif %}>Choose a products</option>
                                        <option value="category"{% if (column_module['products']['get_products_from'] == 'category') %} {{ ' selected="selected"' }}{% endif %}>Choose a category</option>
                                        <option value="random"{% if (column_module['products']['get_products_from'] == 'random') %} {{ ' selected="selected"' }}{% endif %}>Random products</option>
                                        <option value="people_also_bought"{% if (column_module['products']['get_products_from'] == 'people_also_bought') %} {{ ' selected="selected"' }}{% endif %}>People also bought</option>
                                        <option value="related"{% if (column_module['products']['get_products_from'] == 'related') %} {{ ' selected="selected"' }}{% endif %}>Related products</option>
                                        <option value="most_viewed"{% if (column_module['products']['get_products_from'] == 'most_viewed') %} {{ ' selected="selected"' }}{% endif %}>Most viewed</option>
                                      </select>
                          
                                       <div class="filter_{{ module_row }}_{{ columns_count }}_{{ s }}_products panel-products-autocomplete"{% if (column_module['products']['get_products_from'] != 'products') %} {{ ' style="display: none"' }}{% endif %}>
                                        <div class="products-autocomplete clearfix">
                                          <p>Products:<br><span style="font-size:11px;color:#808080">(Autocomplete)</span></p>
                                            <div><input type="text" alt="{{ module_row }}" title="{{ columns_count }}" id="{{ s }}" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products][product]" value="" {% if (column_module['type'] != 'products') %} {{ 'disabled="disabled"' }}{% endif %} /></div>
                                        </div>
                                        <div class="scrollbox products">
                                             {# {% if (column_module['products']['products'] is not defined) %} {% set column_module['products']['products'] = constant('false') %}{% endif %} #}
                                            {% set products = column_module['products']['products']|split(',') %}
                                             {% set class = 'odd' %} 
                                             {% for product in products %} {% if (product > 0) %} 
                                             {% set class = class == 'even' ? 'odd' : 'even' %} 
                                             
                              {% set model_catalog_product = registry.get('model_catalog_product') %}
                              {% set product_info = model_catalog_product.getProduct(product) %} 
                              {% set product_name = constant('false') %}
                              {% if (product_info) %} 
                                {% set product_name = product_info['name'] %}
                              {% endif %} 
                             
                                             <div id="product-{{ module_row }}-{{ columns_count }}-{{ s }}-{{ product }}" class="{{ class }}">{{ product_name }} <img src="view/image/module_template/delete-slider.png" alt="{{ module_row }}" title="{{ columns_count }}" id="{{ s }}" class="{{ product }}" />
                                               <input type="hidden" value="{{ product }}" />
                                             </div>
                                             {% endif %} {% endfor %} 
                                         </div>
                                        <input type="hidden" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products][products]" value="{% if (column_module['products']['products'] is defined) %}{{ column_module['products']['products'] }}{% endif %}" {% if (column_module['type'] != 'products') %} {{ 'disabled="disabled"' }}{% endif %} />
                                      </div>
                          
                                      <div class="filter_{{ module_row }}_{{ columns_count }}_{{ s }}_categories panel-categories-autocomplete"{% if (column_module['products']['get_products_from'] != 'category') %} {{ ' style="display: none"' }}{% endif %}>
                                        <div class="products-autocomplete clearfix">
                                          <p>Categories:<br><span style="font-size:11px;color:#808080">(Autocomplete)</span></p>
                                          <div><input type="text" alt="{{ module_row }}" title="{{ columns_count }}" id="{{ s }}" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products][category]" {% if (column_module['type'] != 'products') %} {{ 'disabled="disabled"' }}{% endif %} value="" /></div>
                                        </div>
                                        <div class="scrollbox categories">
                                             {# {% if (column_module['products']['categories'] is not defined) %} {% set column_module['products']['categories'] = constant('false') %}{% endif %} #}
                                             {% set categories = column_module['products']['categories']|split(',') %}
                                             {% set class = 'odd' %} 
                                             {% for category in categories %} {% if (category > 0) %} 
                                             {% set class = class == 'even' ? 'odd' : 'even' %} 
                                             
                              {% set model_catalog_category = registry.get('model_catalog_category') %}
                              {% set category_info = model_catalog_category.getCategory(category) %} 
                              {% set category_name = constant('false') %}
                              {% if (category_info) %} 
                                {% set category_name = category_info['name'] %}
                              {% endif %}
                             
                                              <div id="category-{{ module_row }}-{{ columns_count }}-{{ s }}-{{ category }}" class="{{ class }}">{{ category_name }} <img src="view/image/module_template/delete-slider.png" alt="{{ module_row }}" title="{{ columns_count }}" id="{{ s }}" class="{{ category }}" />
                                               <input type="hidden" value="{{ category }}" />
                                             </div>
                                             {% endif %} {% endfor %} 
                                        </div>
                                        <input type="hidden" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products][categories]" value="{% if (column_module['products']['categories'] is defined) %}{{ column_module['products']['categories'] }}{% endif %}" {% if (column_module['type'] != 'products') %} {{ 'disabled="disabled"' }}{% endif %} />
                                      </div>
                                    </div>
                                  </div>
                         
                                  <div class="input clearfix">
                                    <p>Image dimension (W x H) and Resize Type:</p>
                                    <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products][width]" value="{% if (column_module['products']['width'] is defined) %}{{ column_module['products']['width'] }}{% endif %}" style="width:60px;margin-right: 5px" {% if (column_module['type'] != 'products') %} {{ 'disabled="disabled"' }}{% endif %}>
                                    <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products][height]" value="{% if (column_module['products']['height'] is defined) %}{{ column_module['products']['height'] }}{% endif %}" style="width: 60px" {% if (column_module['type'] != 'products') %} {{ 'disabled="disabled"' }}{% endif %}>
                                  </div>
                          
                                  <div class="input clearfix">
                                    <p>Limit products:</p>
                                    <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products][limit]" value="{% if (column_module['products']['limit'] is defined) %}{{ column_module['products']['limit'] }}{% endif %}" style="width: 60px" {% if (column_module['type'] != 'products') %} {{ 'disabled="disabled"' }}{% endif %}>
                                  </div>
                                </div>
                                
                                <div class="products_tabs"{% if (column_module['type'] != 'products_tabs') %} {{ ' style="display: none"' }}{% endif %}>
                                    <div class="input clearfix" style="padding-top:30px">
                                      <p>Module Template - Advanced:</p>
                                      
                                      <div class="hint">
                                           <b>Advanced templates was created only for selected skins to provide your skins with better 
                                           and more varied content. They can be used with other skins but with some css changes.</b>
                                      </div>
                                      
                                      <p>&nbsp;</p>
                                      
                                                            <a href="#documentation_link" class="hint-tooltip" data-toggle="tooltip" title="Go to the documentation to se how it works" target="_blank"></a>
                                      <div class="module-layouts">
                             {% for template in templates %} 
               {% if (products_tabs_templates[template] is defined) %}
               {% set i = 0 %}
               {{ '<div class="module-layout-title">' ~ template ~ '</div>' }}
               {# {% if (column_module['products_tabs']['module_layout'] is not defined) %} {% set column_module['products_tabs']['module_layout'] = constant('false') %}{% endif %} #}
               {% for file_template in products_tabs_templates[template] %} 
                                                                     <div class="module-layout clearfix">
                                                                          <input type="radio" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products_tabs][module_layout]" value="{{ file_template }}" {% if (column_module['products_tabs']['module_layout']|replace({'.tpl': '.twig'}) == file_template) %} {{ 'checked="checked"' }}{% endif %} class="input-module-layout" {% if (column_module['type'] != 'products_tabs') %} {{ 'disabled="disabled"' }}{% endif %}>
                                                                          <p>{{ file_template }}</p>
                                                                     </div>
                                       {% set i = i + 1 %} {% endfor %}
               {% endif %}
               {% endfor %} 
                                      </div>
                                    </div>
                                    
                                  <div class="input clearfix">
                                    <p>Module Title:</p>
                                    <div class="list-language">
                           {% for language in languages %} 
                                      <div class="language"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" /><input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products_tabs][title][{{ language['language_id'] }}]" value="{% set language_id = language['language_id'] %}{% if (column_module['products_tabs']['title'][language_id] is defined) %}{{ column_module['products_tabs']['title'][language_id] }}{% endif %}" {% if (column_module['type'] != 'products_tabs') %} {{ 'disabled="disabled"' }}{% endif %}></div>
                           {% endfor %} 
                                    </div>
                                  </div>
                                  
                                      <div class="input clearfix">
                                        <p>Module Description:</p>
                                        <div class="list-language">
                              {% for language in languages %} 
                                          <div class="language"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" /><input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products_tabs][description][{{ language['language_id'] }}]" value="{% set language_id = language['language_id'] %}{% if (column_module['products_tabs']['description'][language_id] is defined) %}{{ column_module['products_tabs']['description'][language_id] }}{% endif %}" {% if (column_module['type'] != 'products_tabs') %} {{ 'disabled="disabled"' }}{% endif %}></div>
                              {% endfor %} 
                                        </div>
                                      </div>
                                      
                                    <div class="input clearfix">
                                      <p>Image dimension (W x H) and Resize Type:</p>
                                      <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products_tabs][width]" value="{% if (column_module['products_tabs']['width'] is defined) %}{{ column_module['products_tabs']['width'] }}{% endif %}" style="width:60px;margin-right: 5px" {% if (column_module['type'] != 'products_tabs') %} {{ 'disabled="disabled"' }}{% endif %}>
                                      <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products_tabs][height]" value="{% if (column_module['products_tabs']['height'] is defined) %}{{ column_module['products_tabs']['height'] }}{% endif %}" style="width: 60px" {% if (column_module['type'] != 'products_tabs') %} {{ 'disabled="disabled"' }}{% endif %}>
                                    </div>
                            
                                    <div class="input clearfix">
                                      <p>Limit products:</p>
                                      <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products_tabs][limit]" value="{% if (column_module['products_tabs']['limit'] is defined) %}{{ column_module['products_tabs']['limit'] }}{% endif %}" style="width: 60px" {% if (column_module['type'] != 'products_tabs') %} {{ 'disabled="disabled"' }}{% endif %}>
                                    </div>
                                    
                                    <table id="products-tabs-{{ module_row }}-{{ columns_count }}-{{ s }}">
                                         <thead>
                                              <tr>
                                                   <td class="first">Title</td>
                                                   <td>Get product from</td>
                                                   <td>Delete</td>
                                              </tr>
                                         </thead>
                                      {% if (column_module['products_tabs']['products'] is defined) %} {% for product in column_module['products_tabs']['products'] %} 
                                          <tbody id="product-tab-{{ products_tabs }}">
                                           <tr>
                                                <td class="first"><div class="list-language">
                                                {% for language in languages %} 
                                                     <div class="language">
                                                          <img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" />
                                                          <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products_tabs][products][{{ products_tabs }}][title][{{ language['language_id'] }}]" value="{% set language_id = language['language_id'] %}{% if (product['title'][language_id] is defined) %}{{ product['title'][language_id] }}{% endif %}" {% if (column_module['type'] != 'products_tabs') %} {{ 'disabled="disabled"' }}{% endif %}>
                                                     </div>
                                                {% endfor %} 
                                                </div></td>
                                                
                                                <td id="module-{{ module_row }}-{{ columns_count }}-module-{{ s }}-{{ products_tabs }}">
                                                        <div class="input clearfix">
                                                             <p>Get products from:</p>
                                                             <div style="float:left;width:425px">
                                                                  <select name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products_tabs][products][{{ products_tabs }}][get_products_from]" class="get-product" id="{{ module_row }}-{{ columns_count }}-module-{{ s }}-{{ products_tabs }}" {% if (column_module['type'] != 'products_tabs') %} {{ 'disabled="disabled"' }}{% endif %}>
                                                                  {# {% if (product['get_products_from'] is not defined) %} {% set product['get_products_from'] = constant('false') %}{% endif %} #}
                                                                    <option value="latest"{% if (product['get_products_from'] == 'latest') %} {{ ' selected="selected"' }}{% endif %}>Latest Products</option>
                                                                    <option value="special"{% if (product['get_products_from'] == 'special') %} {{ ' selected="selected"' }}{% endif %}>Special Products</option>
                                                                    <option value="bestsellers"{% if (product['get_products_from'] == 'bestsellers') %} {{ ' selected="selected"' }}{% endif %}>Bestsellers Products</option>
                                                                    <option value="products"{% if (product['get_products_from'] == 'products') %} {{ ' selected="selected"' }}{% endif %}>Choose a products</option>
                                                                    <option value="category"{% if (product['get_products_from'] == 'category') %} {{ ' selected="selected"' }}{% endif %}>Choose a category</option>
                                                                    <option value="random"{% if (product['get_products_from'] == 'random') %} {{ ' selected="selected"' }}{% endif %}>Random products</option>
                                                                    <option value="people_also_bought"{% if (product['get_products_from'] == 'people_also_bought') %} {{ ' selected="selected"' }}{% endif %}>People also bought</option>
                                                                    <option value="related"{% if (product['get_products_from'] == 'related') %} {{ ' selected="selected"' }}{% endif %}>Related products</option>
                                                                    <option value="most_viewed"{% if (product['get_products_from'] == 'most_viewed') %} {{ ' selected="selected"' }}{% endif %}>Most viewed</option>
                                                                  </select>
                                                             
                                                                  <div class="filter_{{ module_row }}_{{ columns_count }}_{{ s }}_{{ products_tabs }}_products panel-products-autocomplete"{% if (product['get_products_from'] != 'products') %} {{ ' style="display: none"' }}{% endif %}>
                                                                       <div class="products-autocomplete clearfix">
                                                                            <p>Products:<br><span style="font-size:11px;color:#808080">(Autocomplete)</span></p>
                                                                            <div><input type="text" alt="{{ module_row }}" title="{{ columns_count }}" id="{{ s }}-{{ products_tabs }}" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products_tabs][products][{{ products_tabs }}][product]" value="" {% if (column_module['type'] != 'products_tabs') %} {{ 'disabled="disabled"' }}{% endif %} /></div>
                                                                       </div>
                                                                    <div class="scrollbox products2">
                                                                        {# {% if (product['products'] is not defined) %} {% set product['products'] = constant('false') %}{% endif %} #}
                                                                        {% set products = product['products']|split(',') %}
                                                                         {% set class = 'odd' %} 
                                                                         {% for production in products %} {% if (production > 0) %} 
                                                                         {% set class = class == 'even' ? 'odd' : 'even' %} 
                                                                         
                          {% set model_catalog_product = registry.get('model_catalog_product') %}
                          {% set product_info = model_catalog_product.getProduct(production) %} 
                          {% set product_name = constant('false') %}
                          {% if (product_info) %} 
                            {% set product_name = product_info['name'] %}
                          {% endif %} 
                         
                                                                         <div id="product-{{ module_row }}-{{ columns_count }}-{{ s }}-{{ products_tabs }}-{{ production }}" class="{{ class }}">{{ product_name }} <img src="view/image/module_template/delete-slider.png" alt="{{ module_row }}" title="{{ columns_count }}" id="{{ s }}" value="{{ products_tabs }}" class="{{ production }}" />
                                                                           <input type="hidden" value="{{ production }}" />
                                                                         </div>
                                                                         {% endif %} {% endfor %} 
                                                                    </div>
                                                                       <input type="hidden" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products_tabs][products][{{ products_tabs }}][products]" value="{% if (product['products'] is defined) %}{{ product['products'] }}{% endif %}" {% if (column_module['type'] != 'products_tabs') %} {{ 'disabled="disabled"' }}{% endif %} />
                                                                  </div>
                                                             
                                                                  <div class="filter_{{ module_row }}_{{ columns_count }}_{{ s }}_{{ products_tabs }}_categories panel-categories-autocomplete" {% if (product['get_products_from'] != 'category') %} {{ ' style="display: none"' }}{% endif %}>
                                                                       <div class="products-autocomplete clearfix">
                                                                            <p>Categories:<br><span style="font-size:11px;color:#808080">(Autocomplete)</span></p>
                                                                            <div><input type="text" alt="{{ module_row }}" title="{{ columns_count }}" id="{{ s }}-{{ products_tabs }}" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products_tabs][products][{{ products_tabs }}][category]" value="" {% if (column_module['type'] != 'products_tabs') %} {{ 'disabled="disabled"' }}{% endif %} /></div>
                                                                       </div>
                                                                    <div class="scrollbox categories2">
                                                                         {# {% if (product['categories'] is not defined) %} {% set product['categories'] = constant('false') %}{% endif %} #}
                                                                        {% set categories = product['categories']|split(',') %}
                                                                         {% set class = 'odd' %} 
                                                                         {% for category in categories %} {% if (category > 0) %} 
                                                                         {% set class = class == 'even' ? 'odd' : 'even' %} 
                                                                         
                          {% set model_catalog_category = registry.get('model_catalog_category') %}
                          {% set category_info = model_catalog_category.getCategory(category) %} 
                          {% set category_name = constant('false') %}
                          {% if (category_info) %} 
                            {% set category_name = category_info['name'] %}
                          {% endif %}
                         
                                                                         <div id="category-{{ module_row }}-{{ columns_count }}-{{ s }}-{{ products_tabs }}-{{ category }}" class="{{ class }}">{{ category_name }} <img src="view/image/module_template/delete-slider.png" alt="{{ module_row }}" title="{{ columns_count }}" value="{{ products_tabs }}" id="{{ s }}" class="{{ category }}" />
                                                                           <input type="hidden" value="{{ category }}" />
                                                                         </div>
                                                                         {% endif %} {% endfor %} 
                                                                    </div>
                                                                       <input type="hidden" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products_tabs][products][{{ products_tabs }}][categories]" value="{% if (product['categories'] is defined) %}{{ product['categories'] }}{% endif %}" {% if (column_module['type'] != 'products_tabs') %} {{ 'disabled="disabled"' }}{% endif %} />
                                                                  </div>
                                                             </div>
                                                        </div>
                                                   </td>
                                    
                                                                       <td><a onclick="$('#product-tab-{{ products_tabs }}').remove();" class="remove-link"><img src="view/image/module_template/delete-slider.png" alt=""/></a></td>
                                           </tr>
                                      </tbody>
                                      
                                      <script type="text/javascript">
                                           $('input[name=\'advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products_tabs][products][{{ products_tabs }}][category]\']').autocomplete({
                                            delay: 500,
                                            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) {
                                              $('#category-{{ module_row }}-{{ columns_count }}-{{ s }}-{{ products_tabs }}-' + item['value']).remove();
                                              
                                              $('.filter_{{ module_row }}_{{ columns_count }}_{{ s }}_{{ products_tabs }}_categories .scrollbox').append('<div id="category-{{ module_row }}-{{ columns_count }}-{{ s }}-{{ products_tabs }}-' + item['value'] + '">' + item['label'] + '<img src="view/image/module_template/delete-slider.png" alt="{{ module_row }}" title="{{ columns_count }}" id="{{ s }}" value="{{ products_tabs }}" class="' + item['value'] + '" /><input type="hidden" value="' + item['value'] + '" /></div>');
                                           
                                              $('.filter_{{ module_row }}_{{ columns_count }}_{{ s }}_{{ products_tabs }}_categories .scrollbox div:odd').attr('class', 'odd');
                                              $('.filter_{{ module_row }}_{{ columns_count }}_{{ s }}_{{ products_tabs }}_categories .scrollbox div:even').attr('class', 'even');
                                              
                                              data = $.map($('.filter_{{ module_row }}_{{ columns_count }}_{{ s }}_{{ products_tabs }}_categories .scrollbox input'), function(element){
                                                return $(element).attr('value');
                                              });
                                                      
                                              $('input[name=\'advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products_tabs][products][{{ products_tabs }}][categories]\']').attr('value', data.join());
                                                    
                                              return false;
                                            },
                                            focus: function(event, ui) {
                                                  return false;
                                                }
                                           });
                                            
                                           $('input[name=\'advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products_tabs][products][{{ products_tabs }}][product]\']').autocomplete({
                                            delay: 500,
                                            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-{{ module_row }}-{{ columns_count }}-{{ s }}-{{ products_tabs }}-' + item['value']).remove();
                                              
                                              $('.filter_{{ module_row }}_{{ columns_count }}_{{ s }}_{{ products_tabs }}_products .scrollbox').append('<div id="product-{{ module_row }}-{{ columns_count }}-{{ s }}-{{ products_tabs }}-' + item['value'] + '">' + item['label'] + '<img src="view/image/module_template/delete-slider.png" alt="{{ module_row }}" title="{{ columns_count }}" value="{{ products_tabs }}" id="{{ s }}" class="' + item['value'] + '" /><input type="hidden" value="' + item['value'] + '" /></div>');
                                           
                                              $('.filter_{{ module_row }}_{{ columns_count }}_{{ s }}_{{ products_tabs }}_products .scrollbox div:odd').attr('class', 'odd');
                                              $('.filter_{{ module_row }}_{{ columns_count }}_{{ s }}_{{ products_tabs }}_products .scrollbox div:even').attr('class', 'even');
                                              
                                              data = $.map($('.filter_{{ module_row }}_{{ columns_count }}_{{ s }}_{{ products_tabs }}_products .scrollbox input'), function(element){
                                                return $(element).attr('value');
                                              });
                                                      
                                              $('input[name=\'advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products_tabs][products][{{ products_tabs }}][products]\']').attr('value', data.join());
                                                    
                                              return false;
                                            },
                                            focus: function(event, ui) {
                                                  return false;
                                                }
                                           });
                                      </script>
                                      {% set products_tabs = products_tabs + 1 %} {% endfor %} {% endif %} 
                                         <tfoot></tfoot>
                                    </table>
                                    <a onclick="addProductTab({{ module_row }}, {{ columns_count }}, {{ s }});" class="add-link"><span>Add<br> new</span></a>
                                </div>
                          
                                <div class="newsletter"{% if (column_module['type'] != 'newsletter') %} {{ ' style="display: none"' }}{% endif %}>
                                  <div class="input clearfix" style="padding-top:30px">
                                    <p>Module Template - Advanced:</p>
                                    
                                    <div class="hint">
                                         <b>Advanced templates was created only for selected skins to provide your skins with better 
                                         and more varied content. They can be used with other skins but with some css changes.</b>
                                    </div>
                                    
                                    <p>&nbsp;</p>
                                    
                                                        <a href="#documentation_link" class="hint-tooltip" data-toggle="tooltip" title="Go to the documentation to se how it works" target="_blank"></a>
                                    <div class="module-layouts">
                          {% for template in templates %} 
               {% if (newsletter_templates[template] is defined) %}
               {% set i = 0 %}
               {{ '<div class="module-layout-title">' ~ template ~ '</div>' }}
               {# {% if (column_module['newsletter']['module_layout'] is not defined) %} {% set column_module['newsletter']['module_layout'] = constant('false') %}{% endif %} #}
               {% for file_template in newsletter_templates[template] %} 
                                                                  <div class="module-layout clearfix">
                                                                       <input type="radio" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][newsletter][module_layout]" value="{{ file_template }}" {% if (column_module['newsletter']['module_layout']|replace({'.tpl': '.twig'}) == file_template) %} {{ 'checked="checked"' }}{% endif %} class="input-module-layout" {% if (column_module['type'] != 'newsletter') %} {{ 'disabled="disabled"' }}{% endif %}>
                                                                       <p>{{ file_template }}</p>
                                                                  </div>
                                    {% set i = i + 1 %} {% endfor %}
               {% endif %}
               {% endfor %} 
                                    </div>
                                  </div>
                          
                                  <div id="language-newsletter-{{ module_row }}-{{ columns_count }}-{{ s }}" class="htabs">
                          {% for language in languages %} 
                                      <a href="#tab-language-newsletter-{{ module_row }}-{{ columns_count }}-{{ s }}-{{ language['language_id'] }}"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" title="{{ language['name'] }}" /> {{ language['name'] }}</a>
                          {% endfor %} 
                                  </div>
                          
                          {% for language in languages %} 
                                  <div id="tab-language-newsletter-{{ module_row }}-{{ columns_count }}-{{ s }}-{{ language['language_id'] }}">
                                    <div class="input clearfix">
                                      <p>Module Title:</p>
                                      <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][newsletter][title][{{ language['language_id'] }}]" value="{% set language_id = language['language_id'] %}{% if (column_module['newsletter']['title'][language_id] is defined) %}{{ column_module['newsletter']['title'][language_id] }}{% endif %}" {% if (column_module['type'] != 'newsletter') %} {{ 'disabled="disabled"' }}{% endif %}>
                                    </div>
                          
                                    <div class="input clearfix">
                                      <p>Module Text:</p>
                                      <textarea name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][newsletter][text][{{ language['language_id'] }}]" style="height: 100px" {% if (column_module['type'] != 'newsletter') %} {{ 'disabled="disabled"' }}{% endif %}>{% set language_id = language['language_id'] %}{% if (column_module['newsletter']['text'][language_id] is defined) %}{{ column_module['newsletter']['text'][language_id] }}{% endif %}</textarea>
                                    </div>
                          
                                    <div class="input clearfix">
                                      <p>Input Placeholder:</p>
                                      <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][newsletter][input_placeholder][{{ language['language_id'] }}]" value="{% set language_id = language['language_id'] %}{% if (column_module['newsletter']['input_placeholder'][language_id] is defined) %}{{ column_module['newsletter']['input_placeholder'][language_id] }}{% endif %}" {% if (column_module['type'] != 'newsletter') %} {{ 'disabled="disabled"' }}{% endif %}>
                                    </div>
                          
                                    <div class="input clearfix">
                                      <p>Subscribe button text:</p>
                                      <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][newsletter][subscribe_text][{{ language['language_id'] }}]" value="{% set language_id = language['language_id'] %}{% if (column_module['newsletter']['subscribe_text'][language_id] is defined) %}{{ column_module['newsletter']['subscribe_text'][language_id] }}{% endif %}" {% if (column_module['type'] != 'newsletter') %} {{ 'disabled="disabled"' }}{% endif %}>
                                    </div>
                          
                                    <div class="input clearfix">
                                      <p>Unsubscribe button text:</p>
                                      <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][newsletter][unsubscribe_text][{{ language['language_id'] }}]" value="{% set language_id = language['language_id'] %}{% if (column_module['newsletter']['unsubscribe_text'][language_id] is defined) %}{{ column_module['newsletter']['unsubscribe_text'][language_id] }}{% endif %}" {% if (column_module['type'] != 'newsletter') %} {{ 'disabled="disabled"' }}{% endif %}>
                                    </div>
                                  </div>
                          {% endfor %} 
                                </div>
                          
                                <div class="latest_blogs"{% if (column_module['type'] != 'latest_blogs') %} {{ ' style="display: none"' }}{% endif %}>
                          
                                  <div class="input clearfix" style="padding-top:30px">
                                    <p>Module Template:</p>
                                                        <a href="#documentation_link" class="hint-tooltip" data-toggle="tooltip" title="Go to the documentation to se how it works" target="_blank"></a>
                                    <div class="module-layouts">
                          {% for template in templates %} 
               {% if (latest_blogs_templates[template] is defined) %}
               {% set i = 0 %}
               {{ '<div class="module-layout-title">' ~ template ~ '</div>' }}
               {# {% if (column_module['latest_blogs']['module_layout'] is not defined) %} {% set column_module['latest_blogs']['module_layout'] = constant('false') %}{% endif %} #}
               {% for file_template in latest_blogs_templates[template] %} 
                                                                  <div class="module-layout clearfix">
                                                                       <input type="radio" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][latest_blogs][module_layout]" value="{{ file_template }}" {% if (column_module['latest_blogs']['module_layout']|replace({'.tpl': '.twig'}) == file_template) %} {{ 'checked="checked"' }}{% endif %} class="input-module-layout" {% if (column_module['type'] != 'latest_blogs') %} {{ 'disabled="disabled"' }}{% endif %}>
                                                                       <p>{{ file_template }}</p>
                                                                  </div>
                                    {% set i = i + 1 %} {% endfor %}
               {% endif %}
               {% endfor %} 
                                    </div>
                                  </div>
                          
                                  <div class="input clearfix">
                                    <p>Module Title:</p>
                                    <div class="list-language">
                          {% for language in languages %} 
                                      <div class="language"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" /><input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][latest_blogs][title][{{ language['language_id'] }}]" value="{% set language_id = language['language_id'] %}{% if (column_module['latest_blogs']['title'][language_id] is defined) %}{{ column_module['latest_blogs']['title'][language_id] }}{% endif %}" {% if (column_module['type'] != 'latest_blogs') %} {{ 'disabled="disabled"' }}{% endif %}></div>
                          {% endfor %} 
                                    </div>
                                  </div>
                          
                                  <div class="input clearfix">
                                    <p>Image dimension (W x H) and Resize Type:</p>
                                    <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][latest_blogs][width]" value="{% if (column_module['latest_blogs']['width'] is defined) %}{{ column_module['latest_blogs']['width'] }}{% endif %}" style="width:60px;margin-right: 5px" {% if (column_module['type'] != 'latest_blogs') %} {{ 'disabled="disabled"' }}{% endif %}>
                                    <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][latest_blogs][height]" value="{% if (column_module['latest_blogs']['height'] is defined) %}{{ column_module['latest_blogs']['height'] }}{% endif %}" style="width: 60px" {% if (column_module['type'] != 'latest_blogs') %} {{ 'disabled="disabled"' }}{% endif %}>
                                  </div>
                          
                                  <div class="input clearfix">
                                    <p>Limit blogs:</p>
                                    <input type="text" name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][latest_blogs][limit]" value="{% if (column_module['latest_blogs']['limit'] is defined) %}{{ column_module['latest_blogs']['limit'] }}{% endif %}" style="width: 60px" {% if (column_module['type'] != 'latest_blogs') %} {{ 'disabled="disabled"' }}{% endif %}>
                                  </div>
                                </div>
                                
                                <div class="load_module"{% if (column_module['type'] != 'load_module') %} {{ ' style="display: none"' }}{% endif %}>
                                     <div class="input clearfix">
                                          <p>Load module:</p>
                                          <select name="advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][load_module][module]" style="width: 400px" {% if (column_module['type'] != 'load_module') %} {{ 'disabled="disabled"' }}{% endif %}>
                                               {# {% if (column_module['load_module']['module'] is not defined) %} {% set column_module['load_module']['module'] = constant('false') %}{% endif %} #}
                                               {% for module in load_modules %} 
                                                    <optgroup label="{{ module['name'] }}">
                                                    {% for module in module['module'] %} 
                                                         <option value="{{ module['code'] }}"{% if (column_module['load_module']['module'] is defined) %} {% if (module['code'] == column_module['load_module']['module']) %} {{ ' selected="selected"' }} {% endif %} {% endif %}>{{ module['name'] }}</option>
                                                    {% endfor %} 
                                                    </optgroup>
                                               {% endfor %} 
                                          </select>
                                     </div>
                                </div>
                          
                              </div>
                          </div>
                          
                          <script type="text/javascript">
                               $('#language-html-{{ module_row }}-{{ columns_count }}-{{ s }} a').tabs(); 
                               $('#language-box-{{ module_row }}-{{ columns_count }}-{{ s }} a').tabs();  
                               $('#language-newsletter-{{ module_row }}-{{ columns_count }}-{{ s }} a').tabs();
                                                                                 
                                                  $('input[name=\'advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products][category]\']').autocomplete({
                                                    delay: 500,
                                                    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) {
                                                      $('#category-{{ module_row }}-{{ columns_count }}-{{ s }}-' + item['value']).remove();
                                                      
                                                      $('.filter_{{ module_row }}_{{ columns_count }}_{{ s }}_categories .scrollbox').append('<div id="category-{{ module_row }}-{{ columns_count }}-{{ s }}-' + item['value'] + '">' + item['label'] + '<img src="view/image/module_template/delete-slider.png" alt="{{ module_row }}" title="{{ columns_count }}" id="{{ s }}" class="' + item['value'] + '" /><input type="hidden" value="' + item['value'] + '" /></div>');
                                                  
                                                      $('.filter_{{ module_row }}_{{ columns_count }}_{{ s }}_categories .scrollbox div:odd').attr('class', 'odd');
                                                      $('.filter_{{ module_row }}_{{ columns_count }}_{{ s }}_categories .scrollbox div:even').attr('class', 'even');
                                                      
                                                      data = $.map($('.filter_{{ module_row }}_{{ columns_count }}_{{ s }}_categories .scrollbox input'), function(element){
                                                        return $(element).attr('value');
                                                      });
                                                              
                                                      $('input[name=\'advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products][categories]\']').attr('value', data.join());
                                                            
                                                      return false;
                                                    },
                                                    focus: function(event, ui) {
                                                          return false;
                                                      }
                                                  });
                                                    
                                                  $('input[name=\'advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products][product]\']').autocomplete({
                                                    delay: 500,
                                                    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-{{ module_row }}-{{ columns_count }}-{{ s }}-' + item['value']).remove();
                                                      
                                                      $('.filter_{{ module_row }}_{{ columns_count }}_{{ s }}_products .scrollbox').append('<div id="product-{{ module_row }}-{{ columns_count }}-{{ s }}-' + item['value'] + '">' + item['label'] + '<img src="view/image/module_template/delete-slider.png" alt="{{ module_row }}" title="{{ columns_count }}" id="{{ s }}" class="' + item['value'] + '" /><input type="hidden" value="' + item['value'] + '" /></div>');
                                                  
                                                      $('.filter_{{ module_row }}_{{ columns_count }}_{{ s }}_products .scrollbox div:odd').attr('class', 'odd');
                                                      $('.filter_{{ module_row }}_{{ columns_count }}_{{ s }}_products .scrollbox div:even').attr('class', 'even');
                                                      
                                                      data = $.map($('.filter_{{ module_row }}_{{ columns_count }}_{{ s }}_products .scrollbox input'), function(element){
                                                        return $(element).attr('value');
                                                      });
                                                              
                                                      $('input[name=\'advanced_grid_module[{{ module_row }}][column][{{ columns_count }}][module][{{ s }}][products][products]\']').attr('value', data.join());
                                                            
                                                      return false;
                                                    },
                                                    focus: function(event, ui) {
                                                          return false;
                                                      }
                                                  });
                          </script>
                          {% set s = s + 1 %} {% endfor %} {% endif %} 
                          
                    <div id="module_{{ module_row }}_column_{{ columns_count }}_modules_add"></div>
                    
                    <script type="text/javascript">
                         $('#module_{{ module_row }}_column_{{ columns_count }}_modules a').tabs(); 
                    </script>
                
                </div>
                {% set columns_count = columns_count + 1 %} {% endfor %} {% endif %} 
          
               </div>
               
               <script type="text/javascript">
                    $('#tab-module-{{ module_row }}-tabs a').tabs();
               </script>
            {% set module_row = module_row + 1 %} 
            {% endfor %} 
          </div>
          
          <!-- Buttons -->
          <div class="buttons"><input type="submit" name="button-save" class="button-save" value=""></div>
        </div>
      </div>
    </div>
  </form>
</div>
<script type="text/javascript"><!--
$('.main-tabs a').tabs();
//--></script> 

<script type="text/javascript">
var links = {{ links }};
function addLink(module_row, column, modules) {
  html = '<tbody id="link-' + links + '">';
  html += ' <tr>';
  html += '   <td class="first"><div class="list-language">';
  {% for language in languages %} 
  html += '     <div class="language">';
  html += '       <img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" />';
  html += '       <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][links][array][' + links + '][name][{{ language['language_id'] }}]">';
  html += '     </div>';
  {% endfor %} 
  html += '   </div></td>';
  html += '   <td><div class="list-language">';
  {% for language in languages %} 
  html += '     <div class="language">';
  html += '       <img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" />';
  html += '       <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][links][array][' + links + '][url][{{ language['language_id'] }}]">';
  html += '     </div>';
  {% endfor %} 
  html += '   </div></td>';
  html += '   <td><input type="text" class="sort" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][links][array][' + links + '][sort]"></td>';
  html += '   <td><a onclick="$(\'#link-' + links + '\').remove();" class="remove-link"><img src="view/image/module_template/delete-slider.png" alt=""/></a></td>';
  html += ' </tr>';
  html += '</tbody>';
  
  $('#links-' + module_row + '-' + column + '-' + modules + ' tfoot').before(html);
  links++;
}

var products_tabs = {{ products_tabs }};
function addProductTab(module_row, column, modules) {
  html = '<tbody id="product-tab-' + products_tabs + '">';
  html += ' <tr>';
  html += '   <td class="first"><div class="list-language">';
  {% for language in languages %} 
  html += '     <div class="language">';
  html += '       <img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" />';
  html += '       <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products_tabs][products][' + products_tabs + '][title][{{ language['language_id'] }}]">';
  html += '     </div>';
  {% endfor %} 
  html += '   </div></td>';
  html += '   <td id="module-' + module_row + '-' + column + '-module-' + modules + '-' + products_tabs + '">';
     
     html += '        <div class="input clearfix">';
     html += '          <p>Get products from:</p>';
     html += '          <div style="float:left;width:425px">';
     html += '            <select name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products_tabs][products][' + products_tabs + '][get_products_from]" class="get-product" id="' + module_row + '-' + column + '-module-' + modules + '-' + products_tabs + '">';
     html += '              <option value="latest">Latest Products</option>';
     html += '              <option value="special">Special Products</option>';
     html += '              <option value="bestsellers">Bestsellers Products</option>';
     html += '              <option value="products">Choose a products</option>';
     html += '              <option value="category">Choose a category</option>';
     html += '              <option value="random">Random products</option>';
     html += '              <option value="people_also_bought">People also bought</option>';
     html += '              <option value="related">Related products</option>';
     html += '              <option value="most_viewed">Most viewed</option>';
     html += '            </select>';
     
     html += '            <div class="filter_' + module_row + '_' + column + '_' + modules + '_' + products_tabs + '_products panel-products-autocomplete" style="display: none">';
     html += '              <div class="products-autocomplete clearfix">';
     html += '                <p>Products:<br><span style="font-size:11px;color:#808080">(Autocomplete)</span></p>';
     html += '                  <div><input type="text" alt="' + module_row + '" title="' + column + '" id="' + modules + '-' + products_tabs + '" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products_tabs][products][' + products_tabs + '][product]" value="" /></div>';
     html += '              </div>';
     html += '              <div class="scrollbox products2"></div>';
     html += '              <input type="hidden" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products_tabs][products][' + products_tabs + '][products]" value="" />';
     html += '            </div>';
     
     html += '            <div class="filter_' + module_row + '_' + column + '_' + modules + '_' + products_tabs + '_categories panel-categories-autocomplete" style="display: none">';
     html += '              <div class="products-autocomplete clearfix">';
     html += '                <p>Categories:<br><span style="font-size:11px;color:#808080">(Autocomplete)</span></p>';
     html += '                <div><input type="text" alt="' + module_row + '" title="' + column + '" id="' + modules + '-' + products_tabs + '" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products_tabs][products][' + products_tabs + '][category]" value="" /></div>';
     html += '              </div>';
     html += '              <div class="scrollbox categories2"></div>';
     html += '              <input type="hidden" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products_tabs][products][' + products_tabs + '][categories]" value="" />';
     html += '            </div>';
     html += '          </div>';
     html += '        </div>';
     
  html += '     </td>';
  html += '   <td><a onclick="$(\'#product-tab-' + products_tabs + '\').remove();" class="remove-link"><img src="view/image/module_template/delete-slider.png" alt=""/></a></td>';
  html += ' </tr>';
  html += '</tbody>';
  
  $('#products-tabs-' + module_row + '-' + column + '-' + modules + ' tfoot').before(html);
  
  var modules3 = products_tabs;
  
  $('input[name=\'advanced_grid_module[' + module_row + '][column][' + column + '][module][' + modules + '][products_tabs][products][' + modules3 + '][category]\']').autocomplete({
    delay: 500,
    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) {
      $('#category-' + module_row + '-' + column + '-' + modules + '-' + modules3 + '-' + item['value']).remove();
      
      $('.filter_' + module_row + '_' + column + '_' + modules + '_' + modules3 + '_categories .scrollbox').append('<div id="category-' + module_row + '-' + column + '-' + modules + '-' + modules3 + '-' + item['value'] + '">' + item['label'] + '<img src="view/image/module_template/delete-slider.png" alt="' + module_row + '" title="' + column + '" id="' + modules + '" value="' + modules3 + '" class="' + item['value'] + '" /><input type="hidden" value="' + item['value'] + '" /></div>');
  
      $('.filter_' + module_row + '_' + column + '_' + modules + '_' + modules3 + '_categories .scrollbox div:odd').attr('class', 'odd');
      $('.filter_' + module_row + '_' + column + '_' + modules + '_' + modules3 + '_categories .scrollbox div:even').attr('class', 'even');
      
      data = $.map($('.filter_' + module_row + '_' + column + '_' + modules + '_' + modules3 + '_categories .scrollbox input'), function(element){
        return $(element).attr('value');
      });
              
      $('input[name=\'advanced_grid_module[' + module_row + '][column][' + column + '][module][' + modules + '][products_tabs][products][' + modules3 + '][categories]\']').attr('value', data.join());
            
      return false;
    },
    focus: function(event, ui) {
          return false;
      }
  });
    
  $('input[name=\'advanced_grid_module[' + module_row + '][column][' + column + '][module][' + modules + '][products_tabs][products][' + modules3 + '][product]\']').autocomplete({
    delay: 500,
    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-' + module_row + '-' + column + '-' + modules + '-' + modules3 + '-' + item['value']).remove();
      
      $('.filter_' + module_row + '_' + column + '_' + modules + '_' + modules3 + '_products .scrollbox').append('<div id="product-' + module_row + '-' + column + '-' + modules + '-' + modules3 + '-' + item['value'] + '">' + item['label'] + '<img src="view/image/module_template/delete-slider.png" alt="' + module_row + '" title="' + column + '" value="' + modules3 + '" id="' + modules + '" class="' + item['value'] + '" /><input type="hidden" value="' + item['value'] + '" /></div>');
  
      $('.filter_' + module_row + '_' + column + '_' + modules + '_' + modules3 + '_products .scrollbox div:odd').attr('class', 'odd');
      $('.filter_' + module_row + '_' + column + '_' + modules + '_' + modules3 + '_products .scrollbox div:even').attr('class', 'even');
      
      data = $.map($('.filter_' + module_row + '_' + column + '_' + modules + '_' + modules3 + '_products .scrollbox input'), function(element){
        return $(element).attr('value');
      });
              
      $('input[name=\'advanced_grid_module[' + module_row + '][column][' + column + '][module][' + modules + '][products_tabs][products][' + modules3 + '][products]\']').attr('value', data.join());
            
      return false;
    },
    focus: function(event, ui) {
          return false;
      }
  });
  
  products_tabs++;
}
</script>

<script type="text/javascript">
var modules = {{ modules_count }};
function addModuleToColumn(module_row, column) {
  html = '<div id="module-' + module_row + '-' + column + '-module-' + modules + '" style="padding-top: 20px">';
  html += ' <div class="status status-off" title="0" rel="module_' + module_row + '_column_' + column + '_module_' + modules + '_status"></div><input name="advanced_grid_module[' + module_row + '][column][' + column + '][module][' + modules + '][status]" value="0" id="module_' + module_row + '_column_' + column + '_module_' + modules + '_status" type="hidden" />';
  
  html += '   <div class="input clearfix">';
  html += '     <p>Sort:</p>';
  html += '     <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][sort]" value="">';
  html += '   </div>';
  html += '   <div class="input clearfix">';
  html += '     <p>Type column:</p>';
  html += '     <select name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][type]" class="type-column" id="' + module_row + '-' + column + '-module-' + modules + '">';
  html += '       <option value="html">HTML</option>';
  html += '       <option value="box">Box</option>';
  html += '       <option value="links">Links</option>';
  html += '       <option value="products">Products</option>';
  html += '       <option value="products_tabs">Products tabs</option>';
  html += '       <option value="newsletter">Newsletter</option>';
  html += '       <option value="latest_blogs">Latest blogs</option>';
  html += '       <option value="load_module">Load module</option>';
  html += '     </select>';
  html += '   </div>';
  
  html += '   <div class="type-column">';
  
  html += '     <div class="html">';
  html += '         <div id="language-html-' + module_row + '-' + column + '-' + modules + '" class="htabs">';
  {% for language in languages %} 
  html += '           <a href="#tab-language-html-'+ module_row + '-' + column +'-' + modules + '-{{ language['language_id'] }}"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" title="{{ language['name'] }}" /> {{ language['name'] }}</a>';
  {% endfor %} 
  html += '         </div>';
  
  {% for language in languages %} 
  html += '       <div id="tab-language-html-' + module_row + '-' + column + '-' + modules + '-{{ language['language_id'] }}">';
  html += '         <div class="input clearfix">';
  html += '           <p>HTML:</p>';
  html += '           <textarea name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][html][{{ language['language_id'] }}]"></textarea>';
  html += '         </div>';
  html += '       </div>';
  {% endfor %} 
  html += '     </div>';
  
  html += '     <div class="box" style="display: none">';
  html += '         <div id="language-box-' + module_row + '-' + column + '-' + modules + '" class="htabs">';
  {% for language in languages %} 
  html += '           <a href="#tab-language-box-'+ module_row + '-' + column +'-' + modules + '-{{ language['language_id'] }}"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" title="{{ language['name'] }}" /> {{ language['name'] }}</a>';
  {% endfor %} 
  html += '         </div>';
  
  {% for language in languages %} 
  html += '       <div id="tab-language-box-' + module_row + '-' + column + '-' + modules + '-{{ language['language_id'] }}">';
  html += '         <div class="input clearfix">';
  html += '           <p>Module Title:</p>';
  html += '           <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][module][title][{{ language['language_id'] }}]" value="">';
  html += '         </div>';
  
  html += '         <div class="input clearfix">';
  html += '           <p>Module Text:</p>';
  html += '           <textarea name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][module][text][{{ language['language_id'] }}]"></textarea>';
  html += '         </div>';
  html += '       </div>';
  {% endfor %} 
  html += '     </div>';
  
  html += '     <div class="links" style="display: none">';
  
  html += '       <div class="input clearfix" style="padding-top:30px">';
  html += '         <p>Module Template - <span class="simple">Simple</span><span class="advanced">Advanced</span>:</p>';
  html += '                    <div class="advanced"><div class="hint"><b>Advanced templates was created only for selected skins to provide your skins with better and more varied content. They can be used with other skins but with some css changes.</b></div><p>&nbsp;</p></div>';
  html += '         <a href="#documentation_link" class="hint-tooltip" data-toggle="tooltip" title="Go to the documentation to se how it works" target="_blank"></a>';
  html += '         <div class="module-layouts">';
  {% for template in templates %} 
   {% if (links_templates[template] is defined) %}
   {% set i = 0 %}
   {{ 'html += \'<div class="module-layout-title">' ~ template ~ '</div>\';' }}
   {% for file_template in links_templates[template] %} 
                 html += '                         <div class="module-layout clearfix {% if (file_template != 'default.tpl') %} {{ 'advanced' }} {% endif %}">';
                 html += '                              <input type="radio" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][links][module_layout]" value="{{ file_template }}" {% if (i == 0) %} {{ 'checked="checked"' }}{% endif %} class="input-module-layout">';
                 html += '                              <p>{{ file_template }}</p>';
                 html += '                         </div>';
            {% set i = i + 1 %} {% endfor %}
   {% endif %}
  {% endfor %} 
  html += '         </div>';
  html += '                    <div class="show-advanced"><div class="simple show-advanced-templates">show advanced templates</div><div class="advanced hide-advanced-templates">hide advanced templates</div></div>';
  html += '       </div>';
  
  html += '       <div class="input clearfix">';
  html += '         <p>Module Title:</p>';
  html += '         <div class="list-language">';
  {% for language in languages %} 
  html += '           <div class="language"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" /><input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][links][title][{{ language['language_id'] }}]" value=""></div>';
  {% endfor %} 
  html += '         </div>';
  html += '       </div>';
  
  html += '       <div class="input clearfix" style="border:none">';
  html += '         <p>Max links in one column:</p>';
  html += '         <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][links][limit]" value="5" style="width: 60px">';
  html += '       </div>';
  
  html += '       <table id="links-' + module_row + '-' + column + '-' + modules + '">';
  html += '         <thead>';
  html += '           <tr>';
  html += '             <td class="first">Name</td>';
  html += '             <td>Link</td>';
  html += '             <td>Sort</td>';
  html += '             <td>Delete</td>';
  html += '           </tr>';
  html += '         </thead>';
  html += '         <tfoot></tfoot>';
  html += '       </table>';
  html += '       <a onclick="addLink(' + module_row + ', ' + column + ', ' + modules + ');" class="add-link"><span>Add<br> new</span></a>';
  html += '     </div>';
  
  html += '     <div class="products" style="display: none">';
  
  html += '       <div class="input clearfix" style="padding-top:30px">';
  html += '         <p>Module Template - <span class="simple">Simple</span><span class="advanced">Advanced</span>:</p>';
  html += '                    <div class="advanced"><div class="hint"><b>Advanced templates was created only for selected skins to provide your skins with better and more varied content. They can be used with other skins but with some css changes.</b></div><p>&nbsp;</p></div>';
  html += '         <a href="#documentation_link" class="hint-tooltip" data-toggle="tooltip" title="Go to the documentation to se how it works" target="_blank"></a>';
  html += '         <div class="module-layouts">';
  {% for template in templates %} 
   {% if (products_templates[template] is defined) %}
   {% set i = 0 %}
   {{ 'html += \'<div class="module-layout-title">' ~ template ~ '</div>\';' }}
   {% for file_template in products_templates[template] %} 
                 html += '                         <div class="module-layout clearfix {% if (file_template != 'default.tpl' and file_template != 'products_grid.tpl') %} {{ 'advanced' }} {% endif %}">';
                 html += '                              <input type="radio" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products][module_layout]" value="{{ file_template }}" {% if (i == 0) %} {{ 'checked="checked"' }}{% endif %} class="input-module-layout">';
                 html += '                              <p>{{ file_template }}</p>';
                 html += '                         </div>';
            {% set i = i + 1 %} {% endfor %}
   {% endif %}
  {% endfor %} 
  html += '         </div>';
  html += '                    <div class="show-advanced"><div class="simple show-advanced-templates">show advanced templates</div><div class="advanced hide-advanced-templates">hide advanced templates</div></div>';
  html += '       </div>';
  
  html += '       <div class="input clearfix">';
  html += '         <p>Module Title:</p>';
  html += '         <div class="list-language">';
  {% for language in languages %} 
  html += '           <div class="language"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" /><input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products][title][{{ language['language_id'] }}]" value=""></div>';
  {% endfor %} 
  html += '         </div>';
  html += '       </div>';
  
  html += '       <div class="input clearfix">';
  html += '         <p>Get products from:</p>';
  html += '         <div style="float:left;width:425px">';
  html += '           <select name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products][get_products_from]" class="get-product" id="' + module_row + '-' + column + '-module-' + modules + '">';
  html += '             <option value="latest">Latest Products</option>';
  html += '             <option value="special">Special Products</option>';
  html += '             <option value="bestsellers">Bestsellers Products</option>';
  html += '             <option value="products">Choose a products</option>';
  html += '             <option value="category">Choose a category</option>';
  html += '             <option value="random">Random products</option>';
  html += '             <option value="people_also_bought">People also bought</option>';
  html += '             <option value="related">Related products</option>';
  html += '             <option value="most_viewed">Most viewed</option>';
  html += '           </select>';
  
  html += '           <div class="filter_' + module_row + '_' + column + '_' + modules + '_products panel-products-autocomplete" style="display: none">';
  html += '             <div class="products-autocomplete clearfix">';
  html += '               <p>Products:<br><span style="font-size:11px;color:#808080">(Autocomplete)</span></p>';
  html += '                 <div><input type="text" alt="' + module_row + '" title="' + column + '" id="' + modules + '" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products][product]" value="" /></div>';
  html += '             </div>';
  html += '             <div class="scrollbox products"></div>';
  html += '             <input type="hidden" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products][products]" value="" />';
  html += '           </div>';
  
  html += '           <div class="filter_' + module_row + '_' + column + '_' + modules + '_categories panel-categories-autocomplete" style="display: none">';
  html += '             <div class="products-autocomplete clearfix">';
  html += '               <p>Categories:<br><span style="font-size:11px;color:#808080">(Autocomplete)</span></p>';
  html += '               <div><input type="text" alt="' + module_row + '" title="' + column + '" id="' + modules + '" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products][category]" value="" /></div>';
  html += '             </div>';
  html += '             <div class="scrollbox categories"></div>';
  html += '             <input type="hidden" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products][categories]" value="" />';
  html += '           </div>';
  html += '         </div>';
  html += '       </div>';
  
  html += '       <div class="input clearfix">';
  html += '         <p>Image dimension (W x H) and Resize Type:</p>';
  html += '         <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products][width]" value="80" style="width:60px;margin-right: 5px">';
  html += '         <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products][height]" value="80" style="width: 60px">';
  html += '       </div>';
  
  html += '       <div class="input clearfix">';
  html += '         <p>Limit products:</p>';
  html += '         <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products][limit]" value="3" style="width: 60px">';
  html += '       </div>';
  html += '     </div>';
  
  html += '     <div class="products_tabs" style="display: none">';
  
  html += '       <div class="input clearfix" style="padding-top:30px">';
  html += '         <p>Module Template - <span class="simple">Simple</span><span class="advanced">Advanced</span>:</p>';
  html += '                    <div class="advanced"><div class="hint"><b>Advanced templates was created only for selected skins to provide your skins with better and more varied content. They can be used with other skins but with some css changes.</b></div><p>&nbsp;</p></div>';
  html += '         <a href="#documentation_link" class="hint-tooltip" data-toggle="tooltip" title="Go to the documentation to se how it works" target="_blank"></a>';
  html += '         <div class="module-layouts">';
  {% for template in templates %} 
   {% if (products_tabs_templates[template] is defined) %}
   {% set i = 0 %}
   {{ 'html += \'<div class="module-layout-title">' ~ template ~ '</div>\';' }}
   {% for file_template in products_tabs_templates[template] %} 
                 html += '                         <div class="module-layout clearfix {% if (file_template != 'products_grid_with_carousel.tpl') %} {{ 'advanced' }} {% endif %}">';
                 html += '                              <input type="radio" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products_tabs][module_layout]" value="{{ file_template }}" {% if (i == 0) %} {{ 'checked="checked"' }}{% endif %} class="input-module-layout">';
                 html += '                              <p>{{ file_template }}</p>';
                 html += '                         </div>';
            {% set i = i + 1 %} {% endfor %}
   {% endif %}
  {% endfor %} 
  html += '         </div>';
  html += '                    <div class="show-advanced"><div class="simple show-advanced-templates">show advanced templates</div><div class="advanced hide-advanced-templates">hide advanced templates</div></div>';
  html += '       </div>';
  
  html += '       <div class="input clearfix">';
  html += '         <p>Module Title:</p>';
  html += '         <div class="list-language">';
  {% for language in languages %} 
  html += '           <div class="language"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" /><input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products_tabs][title][{{ language['language_id'] }}]" value=""></div>';
  {% endfor %} 
  html += '         </div>';
  html += '       </div>';
  
  html += '       <div class="input clearfix">';
  html += '         <p>Module Description:</p>';
  html += '         <div class="list-language">';
  {% for language in languages %} 
  html += '           <div class="language"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" /><input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products_tabs][description][{{ language['language_id'] }}]" value=""></div>';
  {% endfor %} 
  html += '         </div>';
  html += '       </div>';
  
  html += '       <div class="input clearfix">';
  html += '         <p>Image dimension (W x H) and Resize Type:</p>';
  html += '         <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products_tabs][width]" value="80" style="width:60px;margin-right: 5px">';
  html += '         <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products_tabs][height]" value="80" style="width: 60px">';
  html += '       </div>';
  
  html += '       <div class="input clearfix">';
  html += '         <p>Limit products:</p>';
  html += '         <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][products_tabs][limit]" value="3" style="width: 60px">';
  html += '       </div>';
  
  html += '       <table id="products-tabs-' + module_row + '-' + column + '-' + modules + '">';
  html += '         <thead>';
  html += '           <tr>';
  html += '             <td class="first">Title</td>';
  html += '             <td>Get product from</td>';
  html += '             <td>Delete</td>';
  html += '           </tr>';
  html += '         </thead>';
  html += '         <tfoot></tfoot>';
  html += '       </table>';
  html += '       <a onclick="addProductTab(' + module_row + ', ' + column + ', ' + modules + ');" class="add-link"><span>Add<br> new</span></a>';
  
  html += '     </div>';
  
  html += '     <div class="newsletter" style="display: none">';
  html += '       <div class="input clearfix" style="padding-top:30px">';
  html += '         <p>Module Template - <span class="simple">Simple</span><span class="advanced">Advanced</span>:</p>';
  html += '                    <div class="advanced"><div class="hint"><b>Advanced templates was created only for selected skins to provide your skins with better and more varied content. They can be used with other skins but with some css changes.</b></div><p>&nbsp;</p></div>';
  html += '         <a href="#documentation_link" class="hint-tooltip" data-toggle="tooltip" title="Go to the documentation to se how it works" target="_blank"></a>';
  html += '         <div class="module-layouts">';
  {% for template in templates %} 
   {% if (newsletter_templates[template] is defined) %}
   {% set i = 0 %}
   {{ 'html += \'<div class="module-layout-title">' ~ template ~ '</div>\';' }}
   {% for file_template in newsletter_templates[template] %} 
                 html += '                         <div class="module-layout clearfix {% if (file_template != 'default.tpl') %} {{ 'advanced' }} {% endif %}">';
                 html += '                              <input type="radio" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][newsletter][module_layout]" value="{{ file_template }}" {% if (i == 0) %} {{ 'checked="checked"' }}{% endif %} class="input-module-layout">';
                 html += '                              <p>{{ file_template }}</p>';
                 html += '                         </div>';
            {% set i = i + 1 %} {% endfor %}
   {% endif %}
  {% endfor %} 
  html += '         </div>';
  html += '                    <div class="show-advanced"><div class="simple show-advanced-templates">show advanced templates</div><div class="advanced hide-advanced-templates">hide advanced templates</div></div>';
  html += '       </div>';
  
  html += '       <div id="language-newsletter-' + module_row + '-' + column + '-' + modules + '" class="htabs">';
  {% for language in languages %} 
  html += '           <a href="#tab-language-newsletter-'+ module_row + '-' + column +'-' + modules + '-{{ language['language_id'] }}"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" title="{{ language['name'] }}" /> {{ language['name'] }}</a>';
  {% endfor %} 
  html += '       </div>';
  
  {% for language in languages %} 
  html += '       <div id="tab-language-newsletter-' + module_row + '-' + column + '-' + modules + '-{{ language['language_id'] }}">';
  html += '         <div class="input clearfix">';
  html += '           <p>Module Title:</p>';
  html += '           <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][newsletter][title][{{ language['language_id'] }}]" value="">';
  html += '         </div>';
  
  html += '         <div class="input clearfix">';
  html += '           <p>Module Text:</p>';
  html += '           <textarea name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][newsletter][text][{{ language['language_id'] }}]" style="height: 100px"></textarea>';
  html += '         </div>';
  
  html += '         <div class="input clearfix">';
  html += '           <p>Input Placeholder:</p>';
  html += '           <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][newsletter][input_placeholder][{{ language['language_id'] }}]" value="">';
  html += '         </div>';
  
  html += '         <div class="input clearfix">';
  html += '           <p>Subscribe button text:</p>';
  html += '           <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][newsletter][subscribe_text][{{ language['language_id'] }}]" value="">';
  html += '         </div>';
  
  html += '         <div class="input clearfix">';
  html += '           <p>Unsubscribe button text:</p>';
  html += '           <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][newsletter][unsubscribe_text][{{ language['language_id'] }}]" value="">';
  html += '         </div>';
  html += '       </div>';
  {% endfor %} 
  html += '     </div>';
  
  html += '     <div class="latest_blogs" style="display: none">';

  html += '       <div class="input clearfix" style="padding-top:30px">';
  html += '         <p>Module Template:</p>';
  html += '         <a href="#documentation_link" class="hint-tooltip" data-toggle="tooltip" title="Go to the documentation to se how it works" target="_blank"></a>';
  html += '         <div class="module-layouts">';
  {% for template in templates %} 
   {% if (latest_blogs_templates[template] is defined) %}
   {% set i = 0 %}
   {{ 'html += \'<div class="module-layout-title">' ~ template ~ '</div>\';' }}
   {% for file_template in latest_blogs_templates[template] %} 
                 html += '                         <div class="module-layout clearfix">';
                 html += '                              <input type="radio" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][latest_blogs][module_layout]" value="{{ file_template }}" {% if (i == 0) %} {{ 'checked="checked"' }}{% endif %} class="input-module-layout">';
                 html += '                              <p>{{ file_template }}</p>';
                 html += '                         </div>';
            {% set i = i + 1 %} {% endfor %}
   {% endif %}
  {% endfor %} 
  html += '         </div>';
  html += '       </div>';
  
  html += '       <div class="input clearfix">';
  html += '         <p>Module Title:</p>';
  html += '         <div class="list-language">';
  {% for language in languages %} 
  html += '           <div class="language"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" alt="{{ language['name'] }}" width="16px" height="11px" /><input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][latest_blogs][title][{{ language['language_id'] }}]" value=""></div>';
  {% endfor %} 
  html += '         </div>';
  html += '       </div>';
  
  html += '       <div class="input clearfix">';
  html += '         <p>Image dimension (W x H) and Resize Type:</p>';
  html += '         <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][latest_blogs][width]" value="80" style="width:60px;margin-right: 5px">';
  html += '         <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][latest_blogs][height]" value="80" style="width: 60px">';
  html += '       </div>';
  
  html += '       <div class="input clearfix">';
  html += '         <p>Limit blogs:</p>';
  html += '         <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][latest_blogs][limit]" value="3" style="width: 60px">';
  html += '       </div>';
  html += '     </div>';
  
  html += '     <div class="load_module" style="display: none">';
  html += '             <div class="input clearfix">';
  html += '               <p>Load module:</p>';
  html += '               <select name="advanced_grid_module['+ module_row +'][column][' + column + '][module][' + modules + '][load_module][module]" style="width: 400px">';
  
  {% for module in load_modules %} 
  html += '                         <optgroup label="{{ module['name'] }}">';
       {% for module in module['module'] %} 
  html += '                              <option value="{{ module['code'] }}">{{ module['name'] }}</option>';
       {% endfor %} 
  html += '                         </optgroup>';
  {% endfor %} 

  html += '               </select>';
  html += '             </div>';
  html += '     </div>';
  
  html += '   </div>';
  html += '</div>';
  
  $('#module_' + module_row + '_column_' + column + '_modules > img').before('<a href="#module-' + module_row + '-' + column + '-module-' + modules + '" id="element-' + modules + '">' + modules + ' &nbsp;<img src="view/image/module_template/delete-slider.png" alt="" onclick="$(\'#element-' + modules + '\').remove(); $(\'#module-' + module_row + '-' + column + '-module-' + modules + '\').remove(); return false;" /></a>');
  
  $('#module_' + module_row + '_column_' + column + '_modules_add').before(html);
  $('#module_' + module_row + '_column_' + column + '_modules a').tabs(); 
  $('#language-html-' + module_row + '-' + column + '-' + modules + ' a').tabs(); 
  $('#language-box-' + module_row + '-' + column + '-' + modules + ' a').tabs();  
  $('#language-newsletter-' + module_row + '-' + column + '-' + modules + ' a').tabs(); 
  $('#element-' + modules).trigger('click');
  
  var modules2 = modules;
  
  $('input[name=\'advanced_grid_module[' + module_row + '][column][' + column + '][module][' + modules2 + '][products][category]\']').autocomplete({
    delay: 500,
    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) {
      $('#category-' + module_row + '-' + column + '-' + modules2 + '-' + item['value']).remove();
      
      $('.filter_' + module_row + '_' + column + '_' + modules2 + '_categories .scrollbox').append('<div id="category-' + module_row + '-' + column + '-' + modules2 + '-' + item['value'] + '">' + item['label'] + '<img src="view/image/module_template/delete-slider.png" alt="' + module_row + '" title="' + column + '" id="' + modules2 + '" class="' + item['value'] + '" /><input type="hidden" value="' + item['value'] + '" /></div>');
  
      $('.filter_' + module_row + '_' + column + '_' + modules2 + '_categories .scrollbox div:odd').attr('class', 'odd');
      $('.filter_' + module_row + '_' + column + '_' + modules2 + '_categories .scrollbox div:even').attr('class', 'even');
      
      data = $.map($('.filter_' + module_row + '_' + column + '_' + modules2 + '_categories .scrollbox input'), function(element){
        return $(element).attr('value');
      });
              
      $('input[name=\'advanced_grid_module[' + module_row + '][column][' + column + '][module][' + modules2 + '][products][categories]\']').attr('value', data.join());
            
      return false;
    },
    focus: function(event, ui) {
          return false;
      }
  });
    
  $('input[name=\'advanced_grid_module[' + module_row + '][column][' + column + '][module][' + modules2 + '][products][product]\']').autocomplete({
    delay: 500,
    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-' + module_row + '-' + column + '-' + modules2 + '-' + item['value']).remove();
      
      $('.filter_' + module_row + '_' + column + '_' + modules2 + '_products .scrollbox').append('<div id="product-' + module_row + '-' + column + '-' + modules2 + '-' + item['value'] + '">' + item['label'] + '<img src="view/image/module_template/delete-slider.png" alt="' + module_row + '" title="' + column + '" id="' + modules2 + '" class="' + item['value'] + '" /><input type="hidden" value="' + item['value'] + '" /></div>');
  
      $('.filter_' + module_row + '_' + column + '_' + modules2 + '_products .scrollbox div:odd').attr('class', 'odd');
      $('.filter_' + module_row + '_' + column + '_' + modules2 + '_products .scrollbox div:even').attr('class', 'even');
      
      data = $.map($('.filter_' + module_row + '_' + column + '_' + modules2 + '_products .scrollbox input'), function(element){
        return $(element).attr('value');
      });
              
      $('input[name=\'advanced_grid_module[' + module_row + '][column][' + column + '][module][' + modules2 + '][products][products]\']').attr('value', data.join());
            
      return false;
    },
    focus: function(event, ui) {
          return false;
      }
  });
  
  modules++;
    $('[data-toggle="tooltip"]').tooltip(); 
}
</script>

<script type="text/javascript">
var column = {{ columns_count }};
function addcolumn(module_row) {
  html = '<div id="tab-module-' + module_row + '-column-' + column + '" class="tab-content3">';
  html += '   <div class="status status-off" title="0" rel="module_' + module_row + '_column_' + column + '_status"></div><input name="advanced_grid_module[' + module_row + '][column][' + column + '][status]" value="0" id="module_' + module_row + '_column_' + column + '_status" type="hidden" />';
  
  html += '   <div class="input clearfix">';
  html += '     <p>Column width:</p>';
  html += '     <select name="advanced_grid_module['+ module_row +'][column][' + column + '][width]" class="change-column-width" id="module-' + module_row + '-column-' + column + '">';
  html += '       <option value="1">1/12</option>';
  html += '       <option value="2">2/12</option>';
  html += '       <option value="3">3/12</option>';
  html += '       <option value="4">4/12</option>';
  html += '       <option value="5">5/12</option>';
  html += '       <option value="6">6/12</option>';
  html += '       <option value="7">7/12</option>';
  html += '       <option value="8">8/12</option>';
  html += '       <option value="9">9/12</option>';
  html += '       <option value="10">10/12</option>';
  html += '       <option value="11">11/12</option>';
  html += '       <option value="12">12/12</option>';
  html += '       <option value="advanced">Advanced</option>';
  html += '     </select>';
  html += '   </div>';
  
  html += '   <div class="input clearfix simple-width">';
  html += '     <p>Disable on mobile:</p>';
  html += '     <select name="advanced_grid_module['+ module_row +'][column][' + column + '][disable_on_mobile]">';
  html += '       <option value="0">No</option>';
  html += '       <option value="1">Yes</option>';
  html += '     </select>';
  html += '   </div>';
  
  html += '   <div class="input clearfix advanced-width" style="display: none">';
  html += '     <p>Column width on extra small devices (<768px):</p>';
  html += '     <select name="advanced_grid_module['+ module_row +'][column][' + column + '][width_xs]">';
  html += '       <option value="1">1/12</option>';
  html += '       <option value="2">2/12</option>';
  html += '       <option value="3">3/12</option>';
  html += '       <option value="4">4/12</option>';
  html += '       <option value="5">5/12</option>';
  html += '       <option value="6">6/12</option>';
  html += '       <option value="7">7/12</option>';
  html += '       <option value="8">8/12</option>';
  html += '       <option value="9">9/12</option>';
  html += '       <option value="10">10/12</option>';
  html += '       <option value="11">11/12</option>';
  html += '       <option value="12">12/12</option>';
  html += '       <option value="hidden">hidden</option>';
  html += '     </select>';
  html += '   </div>';
  
  html += '   <div class="input clearfix advanced-width" style="display: none">';
  html += '     <p>Column width on small devices (≥768px):</p>';
  html += '     <select name="advanced_grid_module['+ module_row +'][column][' + column + '][width_sm]">';
  html += '       <option value="1">1/12</option>';
  html += '       <option value="2">2/12</option>';
  html += '       <option value="3">3/12</option>';
  html += '       <option value="4">4/12</option>';
  html += '       <option value="5">5/12</option>';
  html += '       <option value="6">6/12</option>';
  html += '       <option value="7">7/12</option>';
  html += '       <option value="8">8/12</option>';
  html += '       <option value="9">9/12</option>';
  html += '       <option value="10">10/12</option>';
  html += '       <option value="11">11/12</option>';
  html += '       <option value="12">12/12</option>';
  html += '       <option value="hidden">hidden</option>';
  html += '     </select>';
  html += '   </div>';
  
  html += '   <div class="input clearfix advanced-width" style="display: none">';
  html += '     <p>Column width on medium devices (≥992px):</p>';
  html += '     <select name="advanced_grid_module['+ module_row +'][column][' + column + '][width_md]">';
  html += '       <option value="1">1/12</option>';
  html += '       <option value="2">2/12</option>';
  html += '       <option value="3">3/12</option>';
  html += '       <option value="4">4/12</option>';
  html += '       <option value="5">5/12</option>';
  html += '       <option value="6">6/12</option>';
  html += '       <option value="7">7/12</option>';
  html += '       <option value="8">8/12</option>';
  html += '       <option value="9">9/12</option>';
  html += '       <option value="10">10/12</option>';
  html += '       <option value="11">11/12</option>';
  html += '       <option value="12">12/12</option>';
  html += '       <option value="hidden">hidden</option>';
  html += '     </select>';
  html += '   </div>';
  
  html += '   <div class="input clearfix advanced-width" style="display: none">';
  html += '     <p>Column width on large devices (≥1200px):</p>';
  html += '     <select name="advanced_grid_module['+ module_row +'][column][' + column + '][width_lg]">';
  html += '       <option value="1">1/12</option>';
  html += '       <option value="2">2/12</option>';
  html += '       <option value="3">3/12</option>';
  html += '       <option value="4">4/12</option>';
  html += '       <option value="5">5/12</option>';
  html += '       <option value="6">6/12</option>';
  html += '       <option value="7">7/12</option>';
  html += '       <option value="8">8/12</option>';
  html += '       <option value="9">9/12</option>';
  html += '       <option value="10">10/12</option>';
  html += '       <option value="11">11/12</option>';
  html += '       <option value="12">12/12</option>';
  html += '       <option value="hidden">hidden</option>';
  html += '     </select>';
  html += '   </div>';
  
  html += '   <div class="input clearfix">';
  html += '     <p>Sort:</p>';
  html += '     <input type="text" name="advanced_grid_module['+ module_row +'][column][' + column + '][sort]" value="">';
  html += '   </div>';
  
  
  html += '   <div id="module_' + module_row + '_column_' + column + '_modules" class="tabs_add_element clearfix">';
  html += '     <div class="column_add_head">Add modules<br> to the column</div><img src="view/image/module_template/add.png" alt="" onclick="addModuleToColumn(' + module_row + ', ' + column + ');">';
  html += '   </div>';
  
  html += '   <div id="module_' + module_row + '_column_' + column + '_modules_add"></div>';
  
  html += '</div>';
  
  $('#tab-module-' + module_row + '').append(html);
  
  $('#tab-module-' + module_row + '-tabs .column-add').before('<a href="#tab-module-' + module_row + '-column-' + column + '" id="column-' + column + '">Column &nbsp;<img src="view/image/module_template/delete-slider.png" alt="" onclick="$(\'#column-' + column + '\').remove(); $(\'#tab-module-' + module_row + '-column-' + column + '\').remove(); return false;" /></a>');
  
  $('#tab-module-' + module_row + '-tabs a').tabs();
  
  $('#column-' + column).trigger('click');
  column++;
    $('[data-toggle="tooltip"]').tooltip(); 
}
</script>

<script type="text/javascript"><!--
var module_row = {{ module_row }};

function addModule() {  
  html  = '<div id="tab-module-' + module_row + '" class="tab-content">';

  html += ' <div id="tab-module-' + module_row + '-tabs" class="module-tabs">';
  html += '   <a href="#tab-module-' + module_row + '-settings">Module<br>Settings</a>';
  html += '   <span class="column-add" onclick="addcolumn(' + module_row + ');"><img src="view/image/module_template/add.png" alt=""  />Add<br> Column</span>';
  html += ' </div>';
  
  html += ' <div id="tab-module-' + module_row + '-settings" class="tab-content3">';
  html += '     <h4>Design settings</h4>';
  html += '     <table class="form">';
  html += '       <tr>';
  html += '           <td>Add custom class:</td>';
  html += '           <td><input type="text" name="advanced_grid_module[' + module_row + '][custom_class]" value="" /></td>';
  html += '       </tr>';
  html += '       <tr>';
  html += '           <td>Margins (px):<br><small style="color:#a3a3a3;font-size: 10px">(Top - right - bottom - left)</small></td>';
  html += '           <td><input type="text" name="advanced_grid_module[' + module_row + '][margin_top]" style="display: inline-block;margin-right:10px;" size="2" value="0" /> - <input type="text" name="advanced_grid_module[' + module_row + '][margin_right]" size="2" style="display: inline-block;margin-right:10px;margin-left: 10px" value="0" /> - <input type="text" name="advanced_grid_module[' + module_row + '][margin_bottom]" size="2" style="display: inline-block;margin-right:10px;margin-left: 10px" value="0" /> - <input type="text" name="advanced_grid_module[' + module_row + '][margin_left]" style="display: inline-block;margin-right:10px;margin-left: 10px" size="2" value="0" /></td>';
  html += '       </tr>';
  html += '       <tr>';
  html += '           <td>Paddings (px):<br><small style="color:#a3a3a3;font-size: 10px">(Top - right - bottom - left)</small></td>';
  html += '           <td><input type="text" name="advanced_grid_module[' + module_row + '][padding_top]" style="display: inline-block;margin-right:10px;" size="2" value="0" /> - <input type="text" name="advanced_grid_module[' + module_row + '][padding_right]" size="2" style="display: inline-block;margin-right:10px;margin-left: 10px" value="0" /> - <input type="text" name="advanced_grid_module[' + module_row + '][padding_bottom]" size="2" style="display: inline-block;margin-right:10px;margin-left: 10px" value="0" /> - <input type="text" name="advanced_grid_module[' + module_row + '][padding_left]" style="display: inline-block;margin-right:10px;margin-left: 10px" size="2" value="0" /></td>';
  html += '       </tr>';
  html += '       <tr>';
  html += '           <td>Force full width:</td>';
  html += '           <td><select name="advanced_grid_module[' + module_row + '][force_full_width]">';
  html += '           <option value="0">No</option>';
  html += '           <option value="1">Yes</option>';
  html += '           </select></td>';
  html += '       </tr>';
  html += '       <tr>';
  html += '           <td>Background color:</td>';
  html += '           <td class="color_input"><input type="text" name="advanced_grid_module[' + module_row + '][background_color]" class="colorpicker-input" value="" /> <span class="color_selected"></span></td>';
  html += '       </tr>';
  html += '       <tr>';
  html += '           <td>Background image type:</td>';
  html += '           <td><select name="advanced_grid_module[' + module_row + '][background_image_type]">';
  html += '           <option value="0">None</option>';
  html += '           <option value="1">Standard</option>';
  html += '           <option value="2">Parallax</option>';
  html += '           </select></td>';
  html += '       </tr>';
  html += '        <tr>';
  html += '          <td>Background image:</td>';
  html += '          <td>';
  html += '            <a href="" id="thumb-'+ module_row +'" class="img-thumbnail img-edit" data-toggle="image"><img src="{{ placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>';
  html += '            <input type="hidden" name="advanced_grid_module['+ module_row +'][background_image]" value="" id="input-'+ module_row +'" />';
  html += '          </td>';
  html += '     </tr>';
  html += '       <tr>';
  html += '           <td>Position:</td>';
  html += '           <td><select name="advanced_grid_module[' + module_row + '][background_image_position]">';
  html += '           <option value="top left">Top left</option>';
  html += '           <option value="top center">Top center</option>';
  html += '           <option value="top right">Top right</option>';
  html += '           <option value="bottom left">Bottom left</option>';
  html += '           <option value="bottom center">Bottom center</option>';
  html += '           <option value="bottom right">Bottom right</option>';
  html += '           <option value="50% 0">50% 0</option>';
  html += '           </select></td>';
  html += '       </tr>';
  html += '       <tr>';
  html += '           <td>Repeat:</td>';
  html += '           <td><select name="advanced_grid_module[' + module_row + '][background_image_repeat]">';
  html += '           <option value="no-repeat">no-repeat</option>';
  html += '           <option value="repeat-x">repeat-x</option>';
  html += '           <option value="repeat-y">repeat-y</option>';
  html += '           <option value="repeat">repeat</option>';
  html += '           </select></td>';
  html += '       </tr>';
  html += '       <tr>';
  html += '           <td>Attachment:</td>';
  html += '           <td><select name="advanced_grid_module[' + module_row + '][background_image_attachment]">';
  html += '           <option value="scroll">scroll</option>';
  html += '           <option value="fixed">fixed</option>';
  html += '           </select></td>';
  html += '       </tr>';
  html += '     </table>'; 
  
  html += '     <h4 style="padding-top: 30px">Layout settings</h4>';
  html += '     <table class="form">';
  html += '       <tr>';
  html += '           <td>Layout:</td>';
  html += '           <td><select name="advanced_grid_module[' + module_row + '][layout_id]">';
  html += '               <option value="99999">All pages</option>';
  
            {% for store in stores %} 
  html += '               <option value="99999{{ store['store_id'] }}">All pages - Store {{ store['name'] }}</option>';
            {% endfor %} 
            
      {% for layout in layouts %} 
  html += '               <option value="{{ layout['layout_id'] }}">{{ layout['name']|e('html') }}</option>';
      {% endfor %} 
  html += '           </select></td>';
  html += '        </tr>';
  html += '       <tr>';
  html += '           <td>Position:</td>';
  html += '           <td><select name="advanced_grid_module[' + module_row + '][position]">';
  html += '                 <option value="header_notice">Header notice</option>';
  html += '                 <option value="slideshow">Slideshow</option>';
  html += '                 <option value="preface_left">Preface left</option>';
  html += '                 <option value="preface_right">Preface right</option>';
  html += '                 <option value="preface_fullwidth">Preface fullwidth</option>';
  html += '                 <option value="column_left">Column left</option>';
  html += '                 <option value="content_big_column">Content big column</option>';
  html += '                 <option value="content_top">Content top</option>';
  html += '                 <option value="product_custom_block">Product Custom Block</option>';
  html += '                 <option value="column_right">Column right</option>';
  html += '                 <option value="content_bottom">Content bottom</option>';
  html += '                 <option value="customfooter_top">CustomFooter Top</option>';
  html += '                 <option value="customfooter">CustomFooter</option>';
  html += '                 <option value="customfooter_bottom">CustomFooter Bottom</option>';
  html += '                 <option value="footer_top">Footer top</option>';
  html += '                 <option value="footer">Footer</option>';
  html += '                 <option value="footer_bottom">Footer bottom</option>';
  html += '                 <option value="bottom">Bottom</option>';
  html += '           </select></td>';
  html += '       </tr>';
  html += '       <tr>';
  html += '           <td>Status:</td>';
  html += '           <td><select name="advanced_grid_module[' + module_row + '][status]">';
  html += '           <option value="1">Enabled</option>';
  html += '           <option value="0">Disabled</option>';
  html += '           </select></td>';
  html += '       </tr>';
  html += '       <tr>';
  html += '           <td>Sort Order:</td>';
  html += '           <td><input type="text" name="advanced_grid_module[' + module_row + '][sort_order]" value="" size="3" /></td>';
  html += '       </tr>';
  html += '       <tr>';
  html += '           <td>Disable on mobile:</td>';
  html += '           <td><select name="advanced_grid_module[' + module_row + '][disable_on_mobile]">';
  html += '           <option value="0">No</option>';
  html += '           <option value="1">Yes</option>';
  html += '           </select></td>';
  html += '       </tr>';
  html += '     </table>'; 
  html += ' </div>';

  html += '</div>';
  
  $('.tabs').append(html);
  
  $('.colorpicker-input').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;
    }
  });
  
  $('#tab-module-' + module_row + '-tabs a').tabs();
  
  $('#module-add').before('<a href="#tab-module-' + module_row + '" id="module-' + module_row + '">Module ' + module_row + ' &nbsp;<img src="view/image/module_template/delete-slider.png" alt="" onclick="$(\'#module-' + module_row + '\').remove(); $(\'#tab-module-' + module_row + '\').remove(); $(\'.main-tabs a:first\').trigger(\'click\'); return false;" /></a>');
  
  $('.main-tabs a').tabs();
  
  $('#module-' + module_row).trigger('click');
  
  module_row++;
    $('[data-toggle="tooltip"]').tooltip(); 
}
//--></script> 
<script type="text/javascript">
jQuery(document).ready(function($) {

     $('body').on('click', '.show-advanced-templates', function () {
          $(this).closest('.input').addClass('showing-advanced-templates');
     });
     
     $('body').on('click', '.hide-advanced-templates', function () {
          $(this).closest('.input').removeClass('showing-advanced-templates');
     });
     
     $('body').on('click', '.scrollbox.products img', function () {
          $(this).parent().remove();
      $('.filter_' + $(this).attr("alt") + '_' + $(this).attr("title") + '_' + $(this).attr("id") + '_products .scrollbox div:odd').attr('class', 'odd');
      $('.filter_' + $(this).attr("alt") + '_' + $(this).attr("title") + '_' + $(this).attr("id") + '_products .scrollbox div:even').attr('class', 'even');
     
      data = $.map($('.filter_' + $(this).attr("alt") + '_' + $(this).attr("title") + '_' + $(this).attr("id") + '_products .scrollbox input'), function(element){
        return $(element).attr('value');
      });
              
      $('input[name=\'advanced_grid_module[' + $(this).attr("alt") + '][column][' + $(this).attr("title") + '][module][' + $(this).attr("id") + '][products][products]\']').attr('value', data.join());
     });
     
     $('body').on('click', '.scrollbox.categories img', function () {
          $(this).parent().remove();
      $('.filter_' + $(this).attr("alt") + '_' + $(this).attr("title") + '_' + $(this).attr("id") + '_categories .scrollbox div:odd').attr('class', 'odd');
      $('.filter_' + $(this).attr("alt") + '_' + $(this).attr("title") + '_' + $(this).attr("id") + '_categories .scrollbox div:even').attr('class', 'even');
     
      data = $.map($('.filter_' + $(this).attr("alt") + '_' + $(this).attr("title") + '_' + $(this).attr("id") + '_categories .scrollbox input'), function(element){
        return $(element).attr('value');
      });
              
      $('input[name=\'advanced_grid_module[' + $(this).attr("alt") + '][column][' + $(this).attr("title") + '][module][' + $(this).attr("id") + '][products][categories]\']').attr('value', data.join());
     });
     
     $('body').on('click', '.scrollbox.products2 img', function () {
          $(this).parent().remove();
      $('.filter_' + $(this).attr("alt") + '_' + $(this).attr("title") + '_' + $(this).attr("id") + '_' + $(this).attr("value") + '_products .scrollbox div:odd').attr('class', 'odd');
      $('.filter_' + $(this).attr("alt") + '_' + $(this).attr("title") + '_' + $(this).attr("id") + '_' + $(this).attr("value") + '_products .scrollbox div:even').attr('class', 'even');
     
      data = $.map($('.filter_' + $(this).attr("alt") + '_' + $(this).attr("title") + '_' + $(this).attr("id") + '_' + $(this).attr("value") + '_products .scrollbox input'), function(element){
        return $(element).attr('value');
      });
              
      $('input[name=\'advanced_grid_module[' + $(this).attr("alt") + '][column][' + $(this).attr("title") + '][module][' + $(this).attr("id") + '][products_tabs][products][' + $(this).attr("value") + '][products]\']').attr('value', data.join());
     });
     
     $('body').on('click', '.scrollbox.categories2 img', function () {
          $(this).parent().remove();
      $('.filter_' + $(this).attr("alt") + '_' + $(this).attr("title") + '_' + $(this).attr("id") + '_' + $(this).attr("value") + '_categories .scrollbox div:odd').attr('class', 'odd');
      $('.filter_' + $(this).attr("alt") + '_' + $(this).attr("title") + '_' + $(this).attr("id") + '_' + $(this).attr("value") + '_categories .scrollbox div:even').attr('class', 'even');
     
      data = $.map($('.filter_' + $(this).attr("alt") + '_' + $(this).attr("title") + '_' + $(this).attr("id") + '_' + $(this).attr("value") + '_categories .scrollbox input'), function(element){
        return $(element).attr('value');
      });
              
      $('input[name=\'advanced_grid_module[' + $(this).attr("alt") + '][column][' + $(this).attr("title") + '][module][' + $(this).attr("id") + '][products_tabs][products][' + $(this).attr("value") + '][categories]\']').attr('value', data.join());
     });
  
  $('#advanced_grid').on('change', '.type-column', function () {
    var id_module = $(this).attr("id");
    $("#" + id_module +".type-column option:selected").each(function() {
      $("#module-" + id_module + " .type-column > div").css("display", "none");
      $("#module-" + id_module + " .type-column > div input, #module-" + id_module + " .type-column > div textarea, #module-" + id_module + " .type-column > div select").attr("disabled", "disabled");
      $("#module-" + id_module + " .type-column > div." + $(this).val()).css("display", "block");
      $("#module-" + id_module + " .type-column > div." + $(this).val() + " input, #module-" + id_module + " .type-column > div." + $(this).val() + " textarea, #module-" + id_module + " .type-column > div." + $(this).val() + " select").removeAttr("disabled");
    });
    
  });
  
  $('#advanced_grid').on('change', '.change-column-width', function () {
    var id_module = $(this).attr("id");
    $("#" +  id_module + " option:selected").each(function() {
      if($(this).val() == 'advanced') {
           $("#tab-" + id_module + " .advanced-width").show();
           $("#tab-" + id_module + " .simple-width").hide();
      } else {
           $("#tab-" + id_module + " .advanced-width").hide();
           $("#tab-" + id_module + " .simple-width").show();
      }
    });
    
  });
  
  $('#advanced_grid').on('change', '.get-product', function () {
    var id_module = $(this).attr("id");
    $("#module-" + id_module + " .panel-products-autocomplete").hide();
    $("#module-" + id_module + " .panel-categories-autocomplete").hide();
    $("#" + id_module +".get-product option:selected").each(function() {
      if($(this).val() == 'products') {
        $("#module-" + id_module + " .panel-products-autocomplete").show();
      } else if($(this).val() == 'category') {
        $("#module-" + id_module + " .panel-categories-autocomplete").show();
      }
    });
    
  });
  
  $('#advanced_grid').on('click', '.status', function () {
    
    var styl = $(this).attr("rel");
    var co = $(this).attr("title");
    
    if(co == 1) {
    
      $(this).removeClass('status-on');
      $(this).addClass('status-off');
      $(this).attr("title", "0");

      $("#"+styl+"").val(0);
    
    }
    
    if(co == 0) {
    
      $(this).addClass('status-on');
      $(this).removeClass('status-off');
      $(this).attr("title", "1");

      $("#"+styl+"").val(1);
    
    }
    
  });

}); 
</script>
{{ footer }}