<li><a href="#tab-ah-attributes" data-toggle="tab">{{ entry_ah_attributes }}</a></li>
<div class="tab-pane" id="tab-ah-attributes">
	<div class="table-responsive">
	<input type="hidden" name="ah_attributes[0][attribute_id]" value="">
	<table id="ah-attribute" class="table table-striped table-bordered table-hover">
		<thead>
			<tr>
				<td class="text-left">{{ entry_ah_attribute }}</td>
				<td class="text-left">{{ entry_ah_default_text }}</td>
				<td></td>
			</tr>
		</thead>
		<tbody>
		{% set attribute_row = 1 %}
		{% for product_attribute in ah_attributes %}
			<tr id="attribute-row{{ attribute_row }}" data-row="{{ attribute_row }}">
				<td class="text-left" style="width: 40%;"><input type="text" id="ah_attributes[{{ attribute_row }}][name]" value="{{ product_attribute.name }}" placeholder="{{ entry_ah_attribute }}" class="form-control"/> <input type="hidden" name="ah_attributes[{{ attribute_row }}][attribute_id]" value="{{ product_attribute.attribute_id }}"/></td>
				<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> <textarea name="ah_attributes[{{ attribute_row }}][description][{{ language.language_id }}][text]" rows="5" placeholder="{{ entry_ah_default_text }}" class="form-control">{{ product_attribute.description[language.language_id] ? product_attribute.description[language.language_id].text }}</textarea>
					</div>
					{% endfor %}</td>
				<td class="text-left"><button type="button" onclick="$('#attribute-row{{ attribute_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
			</tr>
			{% set attribute_row = attribute_row + 1 %}
		{% endfor %}
		</tbody>
		<tfoot>
			<tr>
				<td colspan="2"></td>
				<td class="text-left"><button type="button" onclick="addAttribute();" data-toggle="tooltip" title="{{ button_attribute_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
			</tr>
		</tfoot>
	</table>
	</div>
</div>

{{ ah_css }}

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

function addAttribute() {
	html = '<tr id="attribute-row' + attribute_row + '" data-row="' + attribute_row + '">';
	html += '	<td class="text-left" style="width: 20%;"><input type="text" id="ah_attributes[' + attribute_row + '][name]" value="" placeholder="{{ entry_ah_attribute }}" class="form-control" /><input type="hidden" name="ah_attributes[' + attribute_row + '][attribute_id]" value="" /></td>';
	html += '	<td class="text-left">';
	{% for language in languages %}
	html += '<div class="input-group"><span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span><textarea name="ah_attributes[' + attribute_row + '][description][{{ language.language_id }}][text]" rows="5" placeholder="{{ entry_ah_default_text }}" class="form-control"></textarea></div>';
	{% endfor %}
	html += '	</td>';
	html += '	<td class="text-left"><button type="button" onclick="$(\'#attribute-row' + attribute_row + '\').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
	html += '</tr>';
	$('#ah-attribute tbody').append(html);
	attributeautocomplete(attribute_row);
	attribute_row++;
}

function attributeautocomplete(attribute_row) {
	$('input[id=\'ah_attributes[' + attribute_row + '][name]\']').autocomplete({
		'source': function(request, response) {
			$.ajax({
				url: 'index.php?route=catalog/attribute/autocomplete&{{ token_name }}={{ user_token }}&filter_name=' + encodeURIComponent(request),
				dataType: 'json',
				success: function(json) {
					response($.map(json, function(item) {
						return {
							category: item.attribute_group,
							label: item.name,
							value: item.attribute_id
						}
					}));
				}
			});
		},
		'select': function(item) {
			$('input[id=\'ah_attributes[' + attribute_row + '][name]\']').val(item['label']);
			$('input[name=\'ah_attributes[' + attribute_row + '][attribute_id]\']').val(item['value']);
		}
	});
}
setTimeout(function() {
	$('a[href="#tab-data"]').closest('li').before($('a[href="#tab-ah-attributes"]').closest('li').detach());
	$('#tab-data').before($('#tab-ah-attributes').detach());

	$('#ah-attribute tbody tr').each(function(index, element) {
		attributeautocomplete($(this).attr('data-row'));
	});
}, 100);
//--></script>