{namespace v=Tx_Vhs_ViewHelpers}
{namespace flux=Tx_Flux_ViewHelpers}

<f:layout name="FCE" />

<f:section name="Configuration">
	<flux:flexform id="tabs" label="Tabs with content elements" description="Places child content elements in tabs." enabled="TRUE" wizardTab="vantomas">
		<flux:flexform.sheet name="display" label="Display">
		</flux:flexform.sheet>

		<flux:flexform.sheet name="tabs" label="Tabs">
			<flux:flexform.section name="tabs" label="Tabs">
				<flux:flexform.object name="tab" label="Tab">
					<flux:flexform.field.input name="title" label="Tab title" />
					<flux:flexform.field.input name="class" label="Additional class names" />
					<flux:flexform.field.checkbox name="active" label="Active?" />
				</flux:flexform.object>
			</flux:flexform.section>
		</flux:flexform.sheet>

		<flux:flexform.grid>
			<flux:flexform.grid.row>
				<f:if condition="{tabs}">
					<f:for each="{tabs}" as="tab" iteration="iteration">
						<flux:flexform.grid.column style="width: {v:math.division(b: '{tabs -> f:count()}', a: 100)}%">
							<flux:flexform.content name="content.{iteration.index}" label="Content, tab {iteration.cycle}" />
						</flux:flexform.grid.column>
					</f:for>
				</f:if>
			</flux:flexform.grid.row>
		</flux:flexform.grid>
	</flux:flexform>
</f:section>

<f:section name="Preview">
	<flux:widget.grid />
</f:section>

<f:section name="Main">
	<v:var.set name="activeTabIndex" value="0" />
	<f:if condition="{tabs}">
		<f:for each="{tabs}" as="tab" iteration="iteration">
			<f:if condition="{tab.tab.active}">
				<v:var.set name="activeTabIndex" value="{iteration.index}" />
			</f:if>
		</f:for>
	</f:if>

	<div class="section-container tabs" data-section>
		<f:if condition="{tabs}">
			<f:for each="{tabs}" as="tab" iteration="iteration">
				<section class="section {f:if(condition: '{activeTabIndex} == {iteration.index}', then: 'active')}">
					<p class="title"><a href="#">{tab.tab.title}</a></p>
					<div class="content">
						<flux:flexform.renderContent area="content.{iteration.index}" />
					</div>
				</section>
			</f:for>
		</f:if>
	</div>
</f:section>