{{ header }}{{ column_left }} 
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    {% if error_warning %}
	<script>
		usNotify('warning', '{{ error_warning }}');
	</script>
	{% endif %}
	{% if success %}
    <script>
		usNotify('success', '{{ success }}');
	</script>
    {% endif %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_edit }}</h3>
      </div>
      <div class="panel-body">
        <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form" class="form-horizontal">
            <ul class="nav nav-tabs">
				<li class="active"><a href="#tab-general" data-toggle="tab">{{ tab_general }}</a></li>
				<li><a href="#tab-image" data-toggle="tab">{{ tab_image }}</a></li>
				<li><a href="#tab-layout" data-toggle="tab">{{ tab_layout }}</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-general">
                    <div class="form-group">
                      <label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
                      <div class="col-sm-10">
                      	<div class="toggle-group">
						    <input type="checkbox" name="oct_404_page_status" {% if oct_404_page_status %}checked="checked"{% endif %} id="oct_404_page_status" tabindex="1">
						    <label for="oct_404_page_status"></label>
						    <div class="onoffswitch pull-left" aria-hidden="true">
						        <div class="onoffswitch-label">
						            <div class="onoffswitch-inner"></div>
						            <div class="onoffswitch-switch"></div>
						        </div>
						    </div>
						</div>
                      </div>
                    </div>
                    <div id="all_settings" {% if (oct_404_page_status is not defined or (oct_404_page_status is defined and not oct_404_page_status)) %}style="display:none"{% endif %}>
	                    <ul class="nav nav-tabs" id="language">
	                      {% for language in languages %} 
	                      <li><a href="#language{{ language.language_id }}" data-toggle="tab"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /> {{ language.name }}</a></li>
	                      {% endfor %} 
	                    </ul>
	                    <div class="tab-content">
	                        {% for language in languages %} 
	                            <div class="tab-pane" id="language{{ language.language_id }}">
	                                <div class="form-group">
	                                  <label class="col-sm-2 control-label" for="input-title{{ language.language_id }}">{{ entry_name }}</label>
	                                  <div class="col-sm-10">
	                                    <input type="text" name="oct_404_page_data[module_text][{{ language.language_id }}][title]" value="{{ oct_404_page_data.module_text[language.language_id] is defined ? oct_404_page_data.module_text[language.language_id].title : '' }}" placeholder="{{ entry_name }}" id="input-name{{ language.language_id }}" class="form-control" />
	                                  </div>
	                                </div>
	                                <div class="form-group">
	                                  <label class="col-sm-2 control-label" for="input-text{{ language.language_id }}">{{ entry_text }}</label>
	                                  <div class="col-sm-10">
	                                      <textarea name="oct_404_page_data[module_text][{{ language.language_id }}][text]" data-toggle="summernote" data-lang="{{ summernote }}" class="form-control" placeholder="{{ entry_text }}" id="input-text{{ language.language_id }}">{{ oct_404_page_data.module_text[language.language_id] is defined ? oct_404_page_data.module_text[language.language_id].text : '' }}</textarea>
	                                  </div>
	                                </div>
	                            </div>
	                        {% endfor %}
	                    </div>
                    </div>
                </div>
                <div class="tab-pane" id="tab-image">
                    <div class="form-group">
                      <label class="col-sm-2 control-label" for="input-image">{{ entry_image }}</label>
                      <div class="col-sm-10">
                          <a href="" id="thumb-image" data-toggle="image" class="img-thumbnail"><img src="{{ thumb }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="oct_404_page_data[image]" value="{{ oct_404_page_data.image }}" id="input-image" />
                      </div>
                    </div>
                </div>
                <div class="tab-pane" id="tab-layout">
                    <fieldset style="display:none;">
                    	<input type="hidden" value="{{ layout_id }}" name="layout_id" />
			            <legend>{{ text_route }}</legend>
			            <div class="form-group required">
			              <label class="col-sm-2 control-label" for="input-name">{{ entry_name }}</label>
			              <div class="col-sm-10">
			                <input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control" />
			              </div>
			            </div>
			            <table id="route" class="table table-striped table-bordered table-hover">
			              <thead>
			                <tr>
			                  <td class="text-left">{{ entry_store }}</td>
			                  <td class="text-left">{{ entry_route }}</td>
			                  <td></td>
			                </tr>
			              </thead>
			              <tbody>
			                {% set route_row = 0 %}
			                {% for layout_route in layout_routes %}
			                <tr id="route-row{{ route_row }}">
			                  <td class="text-left"><select name="layout_route[{{ route_row }}][store_id]" class="form-control">
			                      <option value="0">{{ text_default }}</option>
			                      {% for store in stores %}
			                      {% if store.store_id == layout_route.store_id %}
			                      <option value="{{ store.store_id }}" selected="selected">{{ store.name }}</option>
			                      {% else %}
			                      <option value="{{ store.store_id }}">{{ store.name }}</option>
			                      {% endif %}
			                      {% endfor %}
			                    </select></td>
			                  <td class="text-left"><input type="text" name="layout_route[{{ route_row }}][route]" value="{{ layout_route.route }}" placeholder="{{ entry_route }}" class="form-control" /></td>
			                  <td class="text-left"><button type="button" onclick="$('#route-row{{ route_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
			                </tr>
			                {% set route_row = route_row + 1 %}
			                {% endfor %}
			              </tbody>
			              <tfoot>
			                <tr>
			                  <td colspan="2"></td>
			                  <td class="text-left"><button type="button" onclick="addRoute();" data-toggle="tooltip" title="{{ button_route_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
			                </tr>
			              </tfoot>
			            </table>
			          </fieldset>
			          <fieldset>
			            <legend>{{ text_module }}</legend>
			            {% set module_row = 0 %}
			            <div class="row">
			              <div class="col-lg-12 col-md-12 col-sm-12">
			                <table id="module-content-top" class="table table-striped table-bordered table-hover">
			                  <thead>
			                    <tr>
			                      <td class="text-center">{{ text_content_top }}</td>
			                    </tr>
			                  </thead>
			                  <tbody>
			                    {% for layout_module in layout_modules %}
			                    {% if layout_module.position == 'content_top' %}
			                    <tr id="module-row{{ module_row }}">
			                      <td class="text-left"><div class="input-group">
			                          <select name="layout_module[{{ module_row }}][code]" class="form-control input-sm">
			                            {% for extension in extensions %}
			                            <optgroup label="{{ extension.name }}">
			                            {% if not extension.module %}
			                            {% if extension.code == layout_module.code %}
			                            <option value="{{ extension.code }}" selected="selected">{{ extension.name }}</option>
			                            {% else %}
			                            <option value="{{ extension.code }}">{{ extension.name }}</option>
			                            {% endif %}
			                            {% else %}
			                            {% for module in extension.module %}
			                            {% if module.code == layout_module.code %}
			                            <option value="{{ module.code }}" selected="selected">{{ module.name }}</option>
			                            {% else %}
			                            <option value="{{ module.code }}">{{ module.name }}</option>
			                            {% endif %}
			                            {% endfor %}
			                            {% endif %}
			                            </optgroup>
			                            {% endfor %}
			                          </select>
			                          <input type="hidden" name="layout_module[{{ module_row }}][position]" value="{{ layout_module.position }}" />
			                          <input type="hidden" name="layout_module[{{ module_row }}][sort_order]" value="{{ layout_module.sort_order }}" />
			                          <div class="input-group-btn"> <a href="{{ layout_module.edit }}" type="button" data-toggle="tooltip" title="{{ button_edit }}" target="_blank" class="btn btn-primary btn-sm"><i class="fa fa-pencil"></i></a>
			                            <button type="button" onclick="$('#module-row{{ module_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger btn-sm"><i class="fa fa fa-minus-circle"></i></button>
			                          </div>
			                        </div></td>
			                    </tr>
			                    {% set module_row = module_row + 1 %}
			                    {% endif %}
			                    {% endfor %}
			                  </tbody>
			                  <tfoot>
			                    <tr>
			                      <td class="text-left"><div class="input-group">
			                          <select class="form-control input-sm">
			                            <option value=""></option>
			                            {% for extension in extensions %}
			                            <optgroup label="{{ extension.name }}">
			                            {% if not extension.module %}
			                            <option value="{{ extension.code }}">{{ extension.name }}</option>
			                            {% else %}
			                            {% for module in extension.module %}
			                            <option value="{{ module.code }}">{{ module.name }}</option>
			                            {% endfor %}
			                            {% endif %}
			                            </optgroup>
			                            {% endfor %}
			                          </select>
			                          <div class="input-group-btn">
			                            <button type="button" onclick="addModule('content-top');" data-toggle="tooltip" title="{{ button_module_add }}" class="btn btn-primary btn-sm"><i class="fa fa-plus-circle"></i></button>
			                          </div>
			                        </div></td>
			                    </tr>
			                  </tfoot>
			                </table>
			                <table id="module-content-bottom" class="table table-striped table-bordered table-hover">
			                  <thead>
			                    <tr>
			                      <td class="text-center">{{ text_content_bottom }}</td>
			                    </tr>
			                  </thead>
			                  <tbody>
			                    {% for layout_module in layout_modules %}
			                    {% if layout_module.position == 'content_bottom' %}
			                    <tr id="module-row{{ module_row }}">
			                      <td class="text-left"><div class="input-group">
			                          <select name="layout_module[{{ module_row }}][code]" class="form-control input-sm">
			                            {% for extension in extensions %}
			                            <optgroup label="{{ extension.name }}">
			                            {% if not extension.module %}
			                            {% if extension.code == layout_module.code %}
			                            <option value="{{ extension.code }}" selected="selected">{{ extension.name }}</option>
			                            {% else %}
			                            <option value="{{ extension.code }}">{{ extension.name }}</option>
			                            {% endif %}
			                            {% else %}
			                            {% for module in extension.module %}
			                            {% if module.code == layout_module.code %}
			                            <option value="{{ module.code }}" selected="selected">{{ module.name }}</option>
			                            {% else %}
			                            <option value="{{ module.code }}">{{ module.name }}</option>
			                            {% endif %}
			                            {% endfor %}
			                            {% endif %}
			                            </optgroup>
			                            {% endfor %}
			                          </select>
			                          <input type="hidden" name="layout_module[{{ module_row }}][position]" value="{{ layout_module.position }}" />
			                          <input type="hidden" name="layout_module[{{ module_row }}][sort_order]" value="{{ layout_module.sort_order }}" />
			                          <div class="input-group-btn"><a href="{{ layout_module.edit }}" type="button" data-toggle="tooltip" title="{{ button_edit }}" target="_blank" class="btn btn-primary btn-sm"><i class="fa fa-pencil"></i></a>
			                            <button type="button" onclick="$('#module-row{{ module_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger btn-sm"><i class="fa fa fa-minus-circle"></i></button>
			                          </div>
			                        </div></td>
			                    </tr>
			                    {% set module_row = module_row + 1 %}
			                    {% endif %}
			                    {% endfor %}
			                  </tbody>
			                  <tfoot>
			                    <tr>
			                      <td class="text-left"><div class="input-group">
			                          <select class="form-control input-sm">
			                            <option value=""></option>
			                            {% for extension in extensions %}
			                            <optgroup label="{{ extension.name }}">
			                            {% if not extension.module %}
			                            <option value="{{ extension.code }}">{{ extension.name }}</option>
			                            {% else %}
			                            {% for module in extension.module %}
			                            <option value="{{ module.code }}">{{ module.name }}</option>
			                            {% endfor %}
			                            {% endif %}
			                            </optgroup>
			                            {% endfor %}
			                          </select>
			                          <div class="input-group-btn">
			                            <button type="button" onclick="addModule('content-bottom');" data-toggle="tooltip" title="{{ button_module_add }}" class="btn btn-primary btn-sm"><i class="fa fa-plus-circle"></i></button>
			                          </div>
			                        </div></td>
			                    </tr>
			                  </tfoot>
			                </table>
			              </div>
			            </div>
			          </fieldset>
                </div>
            </div>
        </form>
      </div>
    </div>
  </div>
<script>
let route_row = {{ route_row }};

function addRoute() {
	const html = `
	<tr id="route-row${ route_row }">
		<td class="text-left">
			<select name="layout_route[${ route_row }][store_id]" class="form-control">
				<option value="0">{{ text_default }}</option>
				{% for store in stores %}
				<option value="{{ store.store_id }}">{{ store.name|escape('js') }}</option>
				{% endfor %}
			</select>
		</td>
		<td class="text-left"><input type="text" name="layout_route[${ route_row }][route]" value="" placeholder="{{ entry_route }}" class="form-control" /></td>
		<td class="text-left"><button type="button" onclick="$('#route-row${ route_row }').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
	</tr>
	`;
	
	$('#route tbody').append(html);
	
	route_row++;
}

let module_row = {{ module_row }};

function addModule(type) {
	const position = type.replace('-', '_');
	
	const html = `
	<tr id="module-row${ module_row }">
		<td class="text-left">
			<div class="input-group">
				<select name="layout_module[${ module_row }][code]" class="form-control input-sm">
					{% for extension in extensions %}
					<optgroup label="{{ extension.name|escape('js') }}">
						{% if not extension.module %}
						<option value="{{ extension.code }}">{{ extension.name|escape('js') }}</option>
						{% else %}
						{% for module in extension.module %}
						<option value="{{ module.code }}">{{ module.name|escape('js') }}</option>
						{% endfor %}
						{% endif %}
					</optgroup>
					{% endfor %}
				</select>
				<input type="hidden" name="layout_module[${ module_row }][position]" value="${ position }" />
				<input type="hidden" name="layout_module[${ module_row }][sort_order]" value="" />
				<div class="input-group-btn"><a href="" target="_blank" type="button" data-toggle="tooltip" title="{{ button_edit }}" class="btn btn-primary btn-sm"><i class="fa fa-pencil"></i></a><button type="button" onclick="$('#module-row${ module_row }').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger btn-sm"><i class="fa fa fa-minus-circle"></i></button></div>
			</div>
		</td>
	</tr>
	`;
	
	$('#module-' + type + ' tbody').append(html);
	
	$('#module-' + type + ' tbody select[name=\'layout_module[' + module_row + '][code]\']').val($('#module-' + type + ' tfoot select').val());
	
	$('#module-' + type + ' select[name*=\'code\']').trigger('change');
		
	$('#module-' + type + ' tbody input[name*=\'sort_order\']').each(function(i, element) {
		$(element).val(i);
	});
	
	module_row++;
}

$('#module-column-left, #module-column-right, #module-content-top, #module-content-bottom').delegate('select[name*=\'code\']', 'change', function() {
	var part = this.value.split('.');
	
	if (!part[1]) {
		$(this).parent().find('a').attr('href', 'index.php?route=extension/module/' + part[0] + '&user_token={{ user_token }}');
	} else {
		$(this).parent().find('a').attr('href', 'index.php?route=extension/module/' + part[0] + '&user_token={{ user_token }}&module_id=' + part[1]);
	}
});

$('#module-column-left, #module-column-right, #module-content-top, #module-content-bottom').trigger('change');
</script> 
<script>
	$('#oct_404_page_status').change(function() {
        var $input = $(this);

        if ($input.is(":checked")) {
            $("#all_settings").slideDown('slow');
        } else {
            $("#all_settings").slideUp('slow');
        }
    });
    
	$('#language a:first').tab('show');
</script>
</div>
{{ footer }}