{assign var=index value=0}
{assign var=extraParams value=['index'=>$index]}

{if $form.methods->getMessages()}
	<div class='messageDivContainer'>
		{$form.methods->getMessages()->Draw()}
	</div>
{/if}

{$jsID=preg_replace("/[^a-zA-Z0-9]/", "_", $form.id)}

{** the main tabs container **}
<div class="tabs" id="{$form.id}">
	{*************************************************************************************
		the tabs labels
	**************************************************************************************}
	<div class="{$form.class} tabLabels">
		<ul class="tabLabels">
			{$separate=false}
			{foreach $form.childs as $tab}
				{$class=$tab|get_class}
				{if in_array($class, ["Engine\Form\Container\Tabs_Tab", "Engine\Form\Container\Tabs_IndividualTab", "Engine\Form\Container\Ajax"])}
					{if $separate}
						<li class="separator">|</li>
					{/if}

					{if $class=="Engine\Form\Container\Tabs_Tab"}
						<li class="tabLabel loaded {if $tab==$form.defaultContainer}active{/if}"
							data-id="{$tab->getId()}"
							data-tabClass="{$class}"
						>{$tab->getLabel()}</li>
					{elseif $class=="Engine\Form\Container\Tabs_IndividualTab"}
						<li class="tabLabel {if $tab==$form.defaultContainer}active{/if}"
							data-id="{$tab->getId()}"
							data-tabClass="{$class}"
							data-url="{$tab->getUrl()}"
						>{$tab->getLabel()}</li>
					{elseif $class=="Engine\Form\Container\Ajax"}
						<li class="tabLabel {if $tab==$form.defaultContainer}active{/if}"
							data-id="{$tab->getId()}"
							data-tabClass="{$class}"
							data-url="{$tab->getUrl()}"
							data-preload='{$tab->getStyle("preLoad")}'
						>{$tab->getLabel()}</li>
					{/if}
					{$separate=true}
				{/if}
			{/foreach}
		</ul>

		{if $form.settings.stateful.enabled}
			<input type="hidden" name="_formField[container][{$form.id}]" id="_formField_container__{$form.id}_" value="{$form.defaultContainer->getId()}" />
		{/if}
	</div>

	{*************************************************************************************
		the tabs content
	**************************************************************************************}
	<div class="{$form.class} tabContents">
		{foreach $form.childs as $tab}
			{$class=$tab|get_class}
			<div id="{$tab->getId()}"
				class="tabContent {if $tab==$form.defaultContainer}active{/if}"
				data-tabClass="{$class}"
			>
				{if $class=="Engine\Form\Container\Tabs_Tab"}
					{$tab->render()}
				{elseif $class=="Engine\Form\Container\Tabs_IndividualTab"}
					{if $tab==$form.defaultContainer}
						{$tab->render()}
					{/if}
				{elseif $class=="Engine\Form\Container\Ajax"}
					<div class="loading">...</div>
				{/if}
			</div>
		{/foreach}
	</div>

	{if $form.settings.stateful.enabled}
		<input type="hidden" name="_formField[container][{$form.id}]" id="_formField_container__{$form.id}_" value="{$form.defaultContainer->getId()}" />
	{/if}

	{foreach from=$form.childs item=element}
		{if !$element->isContainer() && $element->getInvisible()}
			{$element->render()}
		{/if}
	{/foreach}
</div>

<script type="text/javascript">
	MVC.scheduleOnLoad(function() {
		formFieldTabs_{$jsID} = new FormField.tabs({
			  'tabLabels': $('{$form.id}').down('div.tabLabels')
			, 'tabContents': $('{$form.id}').down('div.tabContents')
			{if $form.settings.stateful.enabled}
				, 'statefulInput': $('_formField_container__{$form.id}_')
			{/if}
		}, {
			priority: 'low'
		});
	});
</script>
