{namespace f=FluidTYPO3\Flux\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace n=Nesolu\SutterbeggDistribution\ViewHelpers}		
{namespace m=Nesolu\SutterbeggMagento\ViewHelpers}	
	
<f:section name="Navigation">
	<div class="center">
		<div class="inner">
			<div class="burger">
				<span class="bar top"></span>
				<span class="bar middle"></span>
				<span class="bar bottom"></span>
			</div>
			<div class="left">
				<a class="logo" href="/"></a>
			</div>
			<div class="middle">
				<div class="searchpanel">
					<form class="search">
						<input type="text" value="" placeholder="Suchen Sie Produkte, Kategorien und mehr..." />
						<button type="submit">
							<i class="fa fa-search" aria-hidden="true"></i>
						</button>
					</form>
				</div>
			</div>
			<div class="right">
				<div class="accountpanel">
					<v:render.uncache partial="Navigation" section="User" />
					<v:render.uncache partial="Navigation" section="Wishlist" />
					<v:render.uncache partial="Navigation" section="Cart" arguments="{target: '{f:uri.page(pageUid:\'25\')}', shopTarget: '{f:uri.page(pageUid:\'4\')}', checkoutTarget: '{f:uri.page(pageUid:\'61\')}' }" />
				</div>
			</div>
		</div>
		<nav id="navigation">
			<v:page.menu classActive="active" as="sections" levels="1" doktypes="DEFAULT">
				<ul class="mainnav">
					<f:for each="{sections}" as="section" iteration="mainit">
				
						<li {f:if(condition: '{section.class}', then: 'class="{section.class}"')}>
							<f:link.page pageUid="{section.uid}" title="{section.linktext}">{section.linktext}</f:link.page>
							<f:if condition="{section.hasSubPages}">
								{section -> flux:form.data(table: 'pages', field: 'tx_fed_page_flexform') -> v:variable.set(name: 'sd')}
								<f:if condition="{sd.mmexcluded} != '1'">
									<div class="megmenu">
										<v:page.menu pageUid="{section.uid}" levels="1" entryLevel="1" as="subsections">
											<ul>
												<f:for each="{subsections}" as="subsection" iteration="subit">
													<li {f:if(condition: '{subsection.class}', then: 'class="{subsection.class}"')}>
														<f:link.page pageUid="{subsection.uid}" title="{subsection.linktext}">{subsection.linktext}</f:link.page>
														<div class="line"></div>

														<f:if condition="{subsection.hasSubPages}">
															<v:page.menu classActive="active" pageUid="{subsection.uid}" levels="1" entryLevel="2" />
														</f:if>
													</li>
												</f:for>
											</ul>
										</v:page.menu>
										<div class="navteasers">
											<f:if condition="{sd.settings.mt1image} != '' && {sd.settings.mt1link} != ''">
												<a href="<f:uri.typolink parameter="{sd.settings.mt1link}" />" class="navteaser" style="background-image:url('<f:uri.image src="{sd.settings.mt1image}" width="210c" height="240c" />');">
													<f:if condition="{sd.settings.mt1btntext} != ''">
														<div class="button" {f:if(condition:'{sd.settings.mt1btncolor}',then:'style="background-color:{sd.settings.mt1btncolor};"')}>{sd.settings.mt1btntext} <i class="fa fa-angle-right" aria-hidden="true"></i></div>
													</f:if>
												</a>
											</f:if>
											<f:if condition="{sd.settings.mt2image} != '' && {sd.settings.mt2link} != ''">
												<a href="<f:uri.typolink parameter="{sd.settings.mt2link}" />" class="navteaser" style="background-image:url('<f:uri.image src="{sd.settings.mt2image}" width="210c" height="240c" />');">
													<f:if condition="{sd.settings.mt2btntext} != ''">
														<div class="button" {f:if(condition:'{sd.settings.mt2btncolor}',then:'style="background-color:{sd.settings.mt2btncolor};"')}>{sd.settings.mt2btntext} <i class="fa fa-angle-right" aria-hidden="true"></i></div>
													</f:if>
												</a>	
											</f:if>
										</div>
									</div>
								</f:if>
							</f:if>
						</li>
					</f:for>
				</ul>
			</v:page.menu>
		</nav>
	</div>
</f:section>

<f:section name="Wishlist">
	<m:IsAuthenticated>
		<f:then>
			<div class="entry wishlist" data-target="<f:uri.page pageUid="24"/>">
		</f:then>
		<f:else>
			<div class="entry wishlist" data-target="<f:uri.page pageUid="73"/>">
		</f:else>
	</m:IsAuthenticated>
		<div class="icon">
			<i class="fa fa-heart" aria-hidden="true"></i>
			<n:wishlistBadge />
		</div>
		<div class="label">
			<span>Wunschliste</span>
		</div>
	</div>
</f:section>

<f:section name="User">
	<m:IsAuthenticated>
		<f:then>
			<div class="entry user" data-target="<f:uri.page pageUid="74"/>">
				<div class="icon">
					<i class="fa fa-user" aria-hidden="true"></i>
				</div>

				<div class="label">
					<span>Mein Konto</span><i class="fa fa-angle-down" aria-hidden="true"></i>
				</div>

				<div class="username"><n:username /></div>
					
				<div class="flyout">
					<div class="inner">
						<ul>
							<li>
								<f:link.page pageUid="74">Übersicht</f:link.page>
							</li>
							<li>
								<f:link.page pageUid="57">Meine Bestellungen</f:link.page>
							</li>
							<li>
								<f:link.page pageUid="59">Persönliche Daten</f:link.page>
							</li>
							<li>
								<f:link.page pageUid="58">Adressbuch</f:link.page>
							</li>
						</ul>
						<div class="separator"></div>
						<f:link.action extensionName="sutterbeggmagento" controller="Login" pluginName="login" pageUid="73" action="logout" class="logout">Abmelden</f:link.action>
					</div>
				</div>
			</div>
		</f:then>
		<f:else>
			<div class="entry user" data-target="<f:uri.page pageUid="73"/>">
				<div class="icon">
					<i class="fa fa-user" aria-hidden="true"></i>
				</div>
				<div class="label">
					<span>Anmelden</span>
				</div>
			</div>
		</f:else>
	</m:IsAuthenticated>
</f:section>

<f:section name="Cart">
	<n:Cart target="{target}" shopTarget="{shopTarget}" checkoutTarget="{checkoutTarget}" />
</f:section>

<f:section name="UserName">
	<h3>Hallo <n:username /></h3>
</f:section>