{capture assign=elementOperationsContent}{block name=elementOperations}
{/block}{/capture}

{if $elementOperationsContent|trim}
	<div class="elementOperationsIcons clonesContainer-elementOperations onlyIcons">
		{$elementOperationsContent|trim}
	</div>
{/if}

{block name=pre}
	{if $element.customHTML.pre}
		{$element.customHTML.pre}
	{/if}
{/block}

{*** this is the main container, with the tbody that will get cloned ***}
<div class="clonesContainer {$element.class}" id="{$element.id}" {if $element.element->getTooltip()}style='margin-right: 32px;'{/if}>
	<table class="clonesContainer {$element.class}">
		{block name=header}{/block}

		<tbody id="{$element.id}.:id:._mainContainer" style="display: none;" increment=".:id:." class="clone {$element.style.CSSClass}">
			<tr>
				{if $element.settings.showCounter}
					<td class="counter right" style="width: 1%;">
						{block name=counter}{/block}
					</td>
				{/if}
				{block name=columns}
					<td class="columns" {if $element.style.colspan}colspan="{$element.style.colspan}"{/if}>
						{block name=input}
						{/block}
					</td>
				{/block}
				<td class="icons w1p">
					<table class="icons">
						<tr>
							{block name=operations}
								{if $element.disabled}
									{if $element.settings.operations.default}
										<td>
											<var class="icon-accept-disabled dummy_default"></var>

											<input type="radio" class="dummy_default"
												name="{$element.name}[.:id:.][default]"
												value=".:id:."
												style="display:none;"
												disabled="disabled"
											/>
										</td>
									{/if}
								{else}
									{if $element.settings.operations.remove}
										<td>
											<var class="icon-delete" onclick="FormField_clone_{$element.id}.removeClone($(this).up('tbody.clone'), { });"></var>
										</td>
									{/if}

									{if $element.settings.operations.move}
										<td>
											<var class="icon-moveUp" onclick="FormField_clone_{$element.id}.moveUp($(this).up('tbody.clone'), { });"></var>
										</td>
										<td>
											<var class="icon-moveDown" onclick="FormField_clone_{$element.id}.moveDown($(this).up('tbody.clone'), { });"></var>
										</td>
									{/if}

									{if $element.settings.operations.default}
										<td>
											<var class="icon-accept dummy_default" onclick="FormField_clone_{$element.id}.setDefault($(this).up('tbody.clone'), { });"></var>

											<input type="radio" class="dummy_default"
												name="{$element.name}[.:id:.][default]"
												value=".:id:."
												style="display:none;"
											/>
										</td>
									{/if}

									{if !$element.disabled and $element.settings.operations.add}
										<td class="visibleOnlyOnFirstRow">
											<var class="icon-add" onclick="FormField_clone_{$element.id}.makeClone(null, { });"></var>
										</td>
									{/if}
								{/if}
							{/block}
						</tr>
					</table>
				</td>
			</tr>

			{block name=rawInput}
			{/block}
		</tbody>
	</table>
</div>

{block name=post}
	{if $element.customHTML.post}
		{$element.customHTML.post}
	{/if}

	{if $element.methods->getDetails()}
		<dfn>{$element.methods->getDetails()}</dfn>
	{/if}
{/block}

{capture assign=elementPostOperationsContent}{block name=elementPostOperations}{/block}{/capture}
{if $elementPostOperationsContent|trim}
	<div class="elementPostOperations clonesContainer-elementPostOperations">
		{$elementPostOperationsContent|trim}
	</div>
{/if}


{capture assign=javascriptContent}
	{block name=script}
		{************************************************************************************************************}
		{*** !!!!!!!!!! generalClone expects to receive $onClone_output and $onChange_output on input  !!!!!!!!!! ***}
		{************************************************************************************************************}
		cloneFactory_{$element.id}_onLoad = function () {
			FormField_clone_{$element.id} = new FormField._clone({ }, {
				minClones: {$element.settings.minItems},
				defaultIsOptional: {if $element.settings.defaultIsOptional}true{else}false{/if},
				operations: {
					add: {if $element.settings.operations.add}true{else}false{/if},
					remove: {if $element.settings.operations.remove}true{else}false{/if},
					'default': {if $element.settings.operations.default}true{else}false{/if},
					move: {if $element.settings.operations.move}true{else}false{/if}
				}
			});

			FormField_clone_{$element.id}.createCloneFactory({
				position: '{$element.settings.addLocation}',
				template: '{$element.id}.:id:._mainContainer',
				start: {$element.settings.startIndex|default:1},
				bulkEval: {if $element.bulkEval}true{else}false{/if}		{*** tbody wont get cloned/inserted correctly if bulkEval is true ***}
			})
			.addHandler('makeClone', function(clone, index, item) {
				{$onClone_output|trim|replace:".:id:.":'"+index+"'}
			})
			.addHandler('onChange', function(clone, index) {
				{$onChange_output|trim|replace:".:id:.":'"+index+"'}
			})
			.populate({if $element.value}{$element.value|array_values|json_encode}{else}[]{/if});
		}


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

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