{namespace flux=FluidTYPO3\Flux\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<f:asset.css identifier="Tabs" href="EXT:ne_distribution/Resources/Public/Css/ContentElements/Tabs.css" />
<f:asset.script defer="1" identifier="Tabs" src="EXT:ne_distribution/Resources/Public/JavaScript/ContentElements/Tabs.js" />

<div class="module module_tabs js_module js_module_tabs">
	<div class="container overflow-hidden">
		<div class="row">
			<div class="col-12 col-lg-4 col-xl-3">
				<div class="left_col">
					<div class="select-box form-group d-block d-lg-none">
						<div class="styled_dropdown_outer">
							<select name="tabs" class="js_filter form-control select">
								<f:for each="{tabs}" as="t" iteration="i">
									<option value="#tab_{i.cycle}">{t.tabtitle}</option>
								</f:for>
							</select>
						</div>
					</div>

					<ul class="nav nav-tabs d-none d-lg-block" id="tabContainer" role="tablist">
						<f:for each="{tabs}" as="tab" iteration="iterator">
							<li class="nav-item">
								<a class="nav_link {f:if(condition: iterator.isFirst, then: 'active')}" id="tab-link-{iterator.cycle}" data-toggle="tab" href="#tab_{iterator.cycle}" role="tab" aria-controls="tab_{iterator.cycle}" aria-selected="true">{tab.tabtitle}</a>
							</li>
						</f:for>
					</ul>
				</div>
			</div>
			<div class="col-12 col-lg-8 col-xl-9">
				<div class="tab-content" id="tabContainerContent">
					<f:for each="{tabs}" as="taby" iteration="iter">
						<div class="tab-pane fade {f:if(condition: iter.isFirst, then: 'show active')}" id="tab_{iter.cycle}" role="tabpanel" aria-labelledby="tab-link-{iter.cycle}">
							<f:if condition="{taby.header}">
								<div class="headline_container">
									<f:render partial="Header/Header" arguments="{
																		header: taby.header,
																		layout: taby.header_layout,
																		headerClass: taby.tx_nebase_headerclass}" />
								</div>
							</f:if>
							<f:if condition="{taby.text}">
								<div class="text_container">
									<f:format.html>{taby.text}</f:format.html>
								</div>
							</f:if>
						</div>
					</f:for>
				</div>
			</div>
		</div>
	</div>
</div>