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

<f:asset.css identifier="ImageTabs" href="EXT:ne_distribution/Resources/Public/Css/ContentElements/ImageTabs.css" />

<div class="module module_image_tabs js_module js_module_image_tabs" id="{f:if(condition: anchor, then: anchor)}">
	<div class="full_width_container">
		<div class="container">
			<div class="row heading_row">
				<div class="col-12">
					<f:if condition="{header}">
						<div class="headline_container module_headline">
							<f:render partial="Header/Header" arguments="{
															header: header,
															layout: header_layout,
															headerClass: tx_nebase_headerclass}" />
						</div>
					</f:if>
				</div>
			</div>
			<div class="row nav_row">
				<div class="col-12 nav_col">
					<ul class="nav nav-tabs nav_count_{tabs -> f:count()}" id="tabContainer" role="tablist">
						<f:for each="{tabs}" as="tab" iteration="iterator">
							<li class="nav-item">
								<a class="nav_link button btn_primary {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.title}</a>
							</li>
						</f:for>
					</ul>
				</div>
			</div>
			<div class="row tab_row">
				<div class="col-12 tab_col">
					<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}">
								<div class="left_col image_col half_col">
									<div class="left_col">
										<f:if condition="{taby.image}">
											<div class="image">
												<ne:image image="{taby.image.0}" />
											</div>
										</f:if>
									</div>
								</div>
								<div class="right_col text_col half_col">
									<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.subheader}">
										<div class="subheader_container">
											<h3 class="subheader">{taby.subheader}</h3>
										</div>
									</f:if>
									<f:if condition="{taby.text}">
										<div class="text_container">
											<f:format.html>{taby.text}</f:format.html>
										</div>
									</f:if>
								</div>
							</div>
						</f:for>

					</div>
				</div>
			</div>
		</div>
	</div>
</div>