{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-module" 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 %}
    <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    {% 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-module" 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-column" data-toggle="tab">{{ tab_data }}</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="tab-general">
              <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" />
                  {% if error_name %}
                  <div class="text-danger">{{ error_name }}</div>
                  {% endif %}
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
                <div class="col-sm-10">
                  <select name="status" id="input-status" class="form-control">
                    {% if status %}
                    <option value="1" selected="selected">{{ text_enabled }}</option>
                    <option value="0">{{ text_disabled }}</option>
                    {% else %}
                    <option value="1">{{ text_enabled }}</option>
                    <option value="0" selected="selected">{{ text_disabled }}</option>
                    {% endif %}
                  </select>
                </div>
              </div>
            </div>
            <div class="tab-pane" id="tab-column">
              <div class="row">
                <div class="col-sm-2">
                  <ul class="nav nav-pills nav-stacked" id="column">
                    {% set column_row = 0 %}
                    {% for column in columns %}
                    <li><a href="#tab-column{{ column_row }}" data-toggle="tab"><i class="fa fa-minus-circle" onclick="$('a[href=\'#tab-column{{ column_row }}\']').parent().remove(); $('#tab-column{{ column_row }}').remove(); $('#column a:first').tab('show');"></i> {{ column.size }}</a></li>
                    {% set column_row = column_row + 1 %}
                    {% endfor %}
                    <li>
                      <button type="button" class="btn btn-success btn-block" onclick="addColumn();">{{ button_addcolumn }}</button>
                    </li>
                  </ul>
                </div>
                <div class="col-sm-10">
                  <div class="tab-content"> {% set column_row = 0 %}
                    {% set column_value_row = 0 %}
                    {% for column in columns %}
                    <div class="tab-pane" id="tab-column{{ column_row }}">
                    	<fieldset>
                    		<legend>{{ text_column_size }}</legend>
                    		<div class="form-group required">
                    			<label class="control-label col-sm-2">{{ entry_column_size }}</label>
                    			<div class="col-sm-10">
                    				<select name="columns[{{ column_row }}][size]" class="form-control">
                  					{% for column_size in column_sizes %}
                  						{% if column_size.size == column.size %}
                  						<option value="{{ column_size.size }}" selected="selected">{{ column_size.size }}</option>
                  						{% else %}
              								<option value="{{ column_size.size }}">{{ column_size.size }}</option>
                    					{% endif %}
                    				{% endfor %}
                    				</select>
                    			</div>
                    		</div>
                    	</fieldset>
                    	<br>
                    	<br>
                    	<fieldset>
                    		<legend>{{ text_column_image }}</legend>
                        {% if error_column_value[column_row] %}
                        <div class="alert alert-danger">{{ error_column_value[column_row] }}</div>
                        {% endif %}
                    		<div class="table-responsive">
	                        <table id="column-value{{ column_row }}" class="table table-striped table-bordered table-hover">
	                          <thead>
	                            <tr>
	                              <td class="text-left" style="width: 20%">{{ entry_title }}</td>
	                              <td class="text-left">{{ entry_image }}</td>
	                              <td class="text-left" style="width: 10%">{{ entry_image_width }}</td>
	                              <td class="text-left" style="width: 10%">{{ entry_image_height }}</td>
	                              <td class="text-left" >{{ entry_link }}</td>
	                              <td class="text-left" style="width: 20%">{{ entry_status }}</td>
	                              <td class="text-right" style="width: 1%">{{ entry_action }}</td>
	                            </tr>
	                          </thead>
	                          <tbody>
	                          	{% for column_value in column.column_value %}
	                          	<tr id="column-value-row{{ column_value_row }}">
                            		<td class="text-left">
                            			{% for language in languages %}
			                            <div class="input-group"><span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span>
			                              <input type="text" name="columns[{{ column_row }}][column_value][{{ column_value_row }}][description][{{ language.language_id }}][title]" value="{{ column_value.description[language.language_id] ? column_value.description[language.language_id].title }}" placeholder="{{ entry_title }}" class="form-control" />
			                            </div>
			                            {% endfor %}
                            		</td>
                            		<td class="text-center">
                            			<a href="" id="thumb-image{{ column_row }}-{{ column_value_row }}" data-toggle="image" class="img-thumbnail"><img src="{{ column_value.thumb }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
                    						  <input type="hidden" name="columns[{{ column_row }}][column_value][{{ column_value_row }}][image]" value="{{ column_value.image }}" id="input-image{{ column_row }}-{{ column_value_row }}" />
                            		</td>
                            		<td class="text-left"><input type="text" name="columns[{{ column_row }}][column_value][{{ column_value_row }}][width]" class="form-control" value="{{ column_value.width }}" /></td>
                            		<td class="text-left"><input type="text" name="columns[{{ column_row }}][column_value][{{ column_value_row }}][height]" class="form-control" value="{{ column_value.height }}" /></td>
                            		<td class="text-left"><input type="text" name="columns[{{ column_row }}][column_value][{{ column_value_row }}][link]" class="form-control" value="{{ column_value.link }}" /></td>
                            		<td class="text-left">
                            			<div class="btn-group btn-group-toggle" data-toggle="buttons">
							                      <label class="btn btn-default btn-sm {{ column_value.status ? 'active' : '' }}"><input type="radio" name="columns[{{ column_row }}][column_value][{{ column_value_row }}][status]" value="1" {{ column_value.status ? 'checked="checked"' : '' }} /> {{ text_show }}</label>
							                      <label class="btn btn-default btn-sm {{ not column_value.status ? 'active' : '' }}"><input type="radio" name="columns[{{ column_row }}][column_value][{{ column_value_row }}][status]" value="0" {{ not column_value.status ? 'checked="checked"' : '' }} /> {{ text_hide }}</label>
							                    </div>
                            		</td>
                            		<td class="text-center"><button type="button" onclick="$(this).tooltip('destroy');$('#column-value-row{{ column_value_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger btn-sm"><i class="fa fa-minus-circle"></i></button></td>
                            	</tr>

                              {% if error_column_value_image[column_row][column_value_row] %}
                              <tr><td colspan="6"><div class="alert alert-danger">{{ error_column_value_image[column_row][column_value_row] }}</div></td></tr>
                              {% endif  %}

                            	{% set column_value_row = column_value_row + 1 %}
                            	{% endfor %}
	                          </tbody>
	                          <tfoot>
	                            <tr>
	                              <td colspan="6"></td>
	                              <td class="text-center"><button type="button" onclick="addColumnImage('{{ column_row }}');" data-toggle="tooltip" title="{{ button_addcolumn_image }}" class="btn btn-primary btn-sm"><i class="fa fa-plus-circle"></i></button></td>
	                            </tr>
                          	</tfoot>
                          </table>
                        </div>
                    	</fieldset>
                    </div>
                    {% set column_row = column_row + 1 %}
                    {% endfor %}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
var column_row = {{ column_row }};

function addColumn() {
  html  = '<div class="tab-pane" id="tab-column' + column_row + '">';
  html += '<fieldset>';
    html += '<legend>{{ text_column_size }}</legend>';
    html += '<div class="form-group required">';
		html += '<label class="control-label col-sm-2">{{ entry_column_size }}</label>';
		html += '<div class="col-sm-10">';
		html += '<select name="columns['+ column_row +'][size]" class="form-control">';
			{% for column_size in column_sizes %}
				{% if column_size.size == 'col-sm-12' %}
				html += '<option value="{{ column_size.size }}" selected="selected">{{ column_size.size }}</option>';
				{% else %}
				html += '<option value="{{ column_size.size }}">{{ column_size.size }}</option>';
				{% endif %}
			{% endfor %}
    	html += '</select>';
    	html += '</div>';
    html += '</div>';
  html += '</fieldset>';
  html += '<fieldset>';
  html += '<legend>{{ text_column_image }}</legend>';
  html += '<div class="table-responsive">';
			html += '  <table id="column-value' + column_row + '" class="table table-striped table-bordered table-hover">';
			html += '  	 <thead>';
			html += '      <tr>';
			html += '        <td class="text-left">{{ entry_title }}</td>';
      html += '        <td class="text-left">{{ entry_image }}</td>';
			html += '        <td class="text-left" style="width: 10%">{{ entry_image_width }}</td>';
			html += '        <td class="text-left" style="width: 10%">{{ entry_image_height }}</td>';
			html += '        <td class="text-left">{{ entry_link }}</td>';
			html += '        <td class="text-left" style="width: 20%">{{ entry_status }}</td>';
			html += '        <td class="text-center" style="width: 1%">{{ entry_action }}</td>';
			html += '      </tr>';
			html += '  	 </thead>';
			html += '  	 <tbody>';
			html += '    </tbody>';
			html += '    <tfoot>';
			html += '      <tr>';
			html += '        <td colspan="6"></td>';
			html += '        <td class="text-left"><button type="button" onclick="addColumnImage(' + column_row + ');" data-toggle="tooltip" title="{{ button_addcolumn_image }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>';
			html += '      </tr>';
			html += '    </tfoot>';
			html += '  </table>';
			html += '</div>';
  html += '</fieldset>';
  html += '</div>';

  $('#tab-column .tab-content').append(html);

  $('#column > li:last-child').before('<li><a href="#tab-column' + column_row + '" data-toggle="tab"><i class="fa fa-minus-circle" onclick=" $(\'#column a:first\').tab(\'show\');$(\'a[href=\\\'#tab-column' + column_row + '\\\']\').parent().remove(); $(\'#tab-column' + column_row + '\').remove();"></i> {{ text_new_column }}</li>');

    $('#column a[href=\'#tab-column' + column_row + '\']').tab('show');

    addColumnImage(column_row);

    $('[data-toggle=\'tooltip\']').tooltip({
			container: 'body',
			html: true
		});

  	column_row++;
}
</script>
<script type="text/javascript"><!--
var column_value_row = {{ column_value_row }};

function addColumnImage(column_row) {
	html  = '<tr id="column-value-row' + column_value_row + '">';
  html += '  <td class="text-right">';
    {% for language in languages %}
    html += '    <div class="input-group">';
    html += '      <span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span><input type="text" name="columns[' + column_row + '][column_value][' + column_value_row + '][description][{{ language.language_id }}][title]" value="" placeholder="{{ entry_title }}" class="form-control" />';
    html += '    </div>';
    {% endfor %}
  html += '  </td>';
	html += '  <td class="text-right"><a href="" id="thumb-image' + column_row + '-'+ column_value_row +'" data-toggle="image" class="img-thumbnail"><img src="{{ placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="columns[' + column_row + '][column_value][' + column_value_row + '][image]" value="" id="input-image' + column_row + '-'+ column_value_row +'" /></td>';
	html += '  <td class="text-right"><input type="text" name="columns[' + column_row + '][column_value][' + column_value_row + '][width]" value="500" placeholder="{{ entry_width }}" class="form-control" /></td>';
	html += '  <td class="text-right"><input type="text" name="columns[' + column_row + '][column_value][' + column_value_row + '][height]" value="500" placeholder="{{ entry_height }}" class="form-control" /></td>';
	html += '  <td class="text-right"><input type="text" name="columns[' + column_row + '][column_value][' + column_value_row + '][link]" value="" placeholder="{{ entry_link }}" class="form-control" /></td>';

	html += '  <td class="text-left">';
	html += '  <div class="btn-group btn-group-toggle" data-toggle="buttons">';
	html += '  <label class="btn btn-default btn-sm active"><input type="radio" name="columns[' + column_row + '][column_value][' + column_value_row + '][status]" value="1" checked="checked" /> {{ text_show }}</label>';
	html += '  <label class="btn btn-default btn-sm"><input type="radio" name="columns[' + column_row + '][column_value][' + column_value_row + '][status]" value="0" /> {{ text_hide }}</label>';
	html += '</div>';
	html += '</td>';

	html += '  <td class="text-left"><button type="button" onclick="$(this).tooltip(\'destroy\');$(\'#column-value-row' + column_value_row + '\').remove();" data-toggle="tooltip" rel="tooltip" title="{{ button_remove }}" class="btn btn-danger btn-sm"><i class="fa fa-minus-circle"></i></button></td>';
	html += '</tr>';

	$('#column-value' + column_row + ' tbody').append(html);
	$('[rel=tooltip]').tooltip();

	column_value_row++;
}
//--></script>
<script type="text/javascript">
$('#column a:first').tab('show');
</script>
<style type="text/css">
.btn-group .btn.btn-default:hover {
    background-color: #dab310;
    border-color: #dab310;
    color: #fff;
}
.btn-group .btn.btn-default.active {
    background-color: #dab310;
    border-color: #dab310;
    color: #fff;
}
</style>
{{ footer }}