<div class="clonesContainer {$element.class}" id="{$element.id}" {if $element.element->getTooltip()}style='margin-right: 32px;'{/if}>
	<table class="clonesContainer {$element.class}" data-startIndex="{$element['style']['startIndex']}">
		<thead>
			<tr>
				{if $element['childs']['Engine\Form\Input\Matrix\Row']->getChilds()}
					{if $element['style']['render_rowIndex']}
						<th class="counter">#</th>
					{/if}
					{foreach $element['childs']['Engine\Form\Input\Matrix\Row']->getChilds() as $cellObj}
						{$cellStyles = $cellObj->getStyles()}
						<th
							style="
								{if $cellStyles['height']} height:{$cellStyles['height']}px;{/if}
								{if $cellStyles['width']}
									width:{$cellStyles['width']}px;
								{/if}
							"
						>{$cellObj->getLabel()}</th>
					{/foreach}

					<th>
						<div class="elementOperationsIcons clonesContainer-elementOperations onlyIcons">
							{block name=elementOperations}
								{if !$element.disabled and $element.settings.operations.add}
									<var class="icon-add"
										onclick="FormField_matrix_{$element.id}.makeClone();"
									></var>
								{/if}
							{/block}
						</div>
					</th>
				{/if}
			</tr>
		</thead>

		{if $element['childs']['Engine\Form\Input\Matrix\Row']}
			{if $element['value']}
				{$index = $element['style']['startIndex']}
				{foreach $element['value'] as $value}
					{$element['childs']['Engine\Form\Input\Matrix\Row']
						->setStyle('class_body', 'clone')
						->setIndex($index + 1)
						->setValue($value)
						->setDisabled(in_array($index, $element['disabledRows']))
						->render()}
					{$index=$index+1}
				{/foreach}
			{elseif $element['settings']['minItems']}
				{$element['childs']['Engine\Form\Input\Matrix\Row']
					->setStyle('class_body', 'clone')
					->setIndex(1)
					->setValue([])
					->setDisabled(false)
					->render()}
			{/if}
		{/if}

		{if $element['childs']['Engine\Form\Input\Matrix\RowFooter']}
			{$element['childs']['Engine\Form\Input\Matrix\RowFooter']->setStyle('class_body', 'footer')->render()}
		{/if}
	</table>
</div>

{capture assign=javascriptContent}
	{block name=script}
		matrixFactory_{$element.id}_onLoad = function () {
			FormField_matrix_{$element.id} = new FormField._matrix({
				mainContainer: 		$('{$element.id}'),
				tableContainer : 	$('{$element.id}').down('table.clonesContainer.{$element.class}')
			}, {
				minClones: {$element.settings.minItems},
				position: '{$element.settings.addLocation}',
				url: '{$element['methods']->getUrl()}',
				operations: {
					add: 	{if $element.settings.operations.add}true{else}false{/if},
					remove: {if $element.settings.operations.remove}true{else}false{/if},
				},
				index:		{if $element['value']}{($element['value']|count)}{else}1{/if}
			});

			FormField_matrix_{$element.id}.refreshClones();
		}

		{*** execute the onLoad handler ***}
		if (document.loaded) {
			matrixFactory_{$element.id}_onLoad();
		}
		else {
			if(MVC){
				MVC.scheduleOnLoad(matrixFactory_{$element.id}_onLoad);
			}else{
				Event.observe(document,'dom:loaded', matrixFactory_{$element.id}_onLoad);
			}
		}
	{/block}
{/capture}

{if $javascriptContent|trim}
	<script type="text/javascript">
		// matrix.tpl
		{$javascriptContent|trim}
	</script>
{/if}
