{namespace v=Tx_Vhs_ViewHelpers}
{namespace flux=FluidTYPO3\Flux\ViewHelpers}
<f:layout name="Content" />
<div xmlns="http://www.w3.org/1999/xhtml"
     xmlns:v="http://fedext.net/ns/vhs/ViewHelpers"
     xmlns:flux="http://fedext.net/ns/flux/ViewHelpers"
     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">

<f:section name="Configuration">
	<flux:form wizardTab="Bootstrap" id="navigationlist" icon="{v:extension.path.resources(path: 'Icons/icon-navigationlist.gif')}">
		<flux:form.sheet name="display">
			<flux:field.checkbox name="addWell" />
			<flux:field.checkbox name="zeroPadding" />
			<flux:field.input name="class" />
		</flux:form.sheet>
		<flux:form.sheet name="items">
			<flux:form.section name="items">
				<flux:form.object name="header">
					<flux:field.input name="text" />
					<flux:field.input name="class" />
				</flux:form.object>
				<flux:form.object name="item">
					<flux:field.input name="text" />
					<flux:field.input name="tooltip" />
					<flux:field.input name="icon" eval="trim">
						<flux:wizard.link />
					</flux:field.input>
					<flux:field.input name="target">
						<flux:wizard.link />
					</flux:field.input>
					<flux:field.input name="class" />
				</flux:form.object>
				<flux:form.object name="divider">
					<flux:field.input name="class" />
				</flux:form.object>
			</flux:form.section>
		</flux:form.sheet>
	</flux:form>
</f:section>

<f:section name="Preview">
	<ul>
		<f:for each="{items}" as="itemSectionObject">
			<f:for each="{itemSectionObjects}" as="object" key="objectType">
				<li><strong>{objectType}</strong> <f:if condition="{0: objectType} != {0: 'divider'}"> <em>{object.text} ({object.target})</em>
					<v:media.exists file="{object.icon}">Icon: {object.icon}</v:media.exists></f:if></li>
			</f:for>
		</f:for>
	</ul>
</f:section>

<f:section name="Main">
	<div class="{class} {f:if(condition: addWell, then: 'well')}" style="{f:if(condition: zeroPadding, then: 'padding: 8px 0px 8px 0px;')}">
		<ul class="nav nav-list">
			<f:for each="{items}" as="itemSectionObjects">
				<v:var.set name="icon" value="" />
				<f:for each="{itemSectionObjects}" as="object" key="objectType">
					<v:switch value="{objectType}">
						<v:case case="header" break="TRUE">
							<li class="nav-header {object.class}"><f:format.raw>{icon}{object.text}</f:format.raw></li>
						</v:case>
						<v:case case="divider" break="TRUE">
							<li class="nav-divider {object.class}"></li>
						</v:case>
						<v:case case="default">
							<v:var.set name="icon" value="{v:media.exists(file: object.icon, then: '<img src=\'{object.icon}\' alt=\'\' class=\'icon-blank\' /> ', else: '')}" />
							<li class="{f:if(condition: '{contentObject.pid} == {object.target}', then: 'active', else: 'item')}">
								<f:if condition="{object.target -> v:math.round()} > 0">
									<f:then>
										<f:link.page pageUid="{object.target}" class="{object.class}" rel="{f:if(condition: object.tooltip, then: 'tooltip')}" title="{object.tooltip}"><f:format.raw>{icon}{object.text}</f:format.raw></f:link.page>
									</f:then>
									<f:else>
										<a href="{object.target}" class="{object.class}" rel="{f:if(condition: object.tooltip, then: 'tooltip')}" title="{object.tooltip}"><f:format.raw>{icon}{object.text}</f:format.raw></a>
									</f:else>
								</f:if>
							</li>
						</v:case>
					</v:switch>
				</f:for>
			</f:for>
		</ul>
	</div>
</f:section>

</div>