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


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

<div class="module module_poi_teaser js_module js_module_poi_teaser">

	<div class="background_elements">
		<f:if condition="{modulebgimg}">
			<div class="bg_image fitimage js_fitimage">
				<ne:image image="{modulebgimg.0}" />
			</div>
		</f:if>
	</div>

	<div class="content">
		<div class="container">
			<div class="row">
				<div class="col-12">

					<f:if condition="{header}">
						<div class="headline_container">
							<f:render partial="Header/Header" arguments="{
																header: header,
																layout: header_layout,
																headerClass: tx_nebase_headerclass}" />
						</div>
					</f:if>

					<f:if condition="{staticfocusimg}">
						<div class="image_stack">
							<div class="image_full">
								<ne:image image="{staticfocusimg.0}" />
							</div>

							<div class="js_slider_container_outer slider_container_outer">
								<div class="js_slider_container slider_container">
									<div class="slider">
										<f:for each="{pois}" as="poi" iteration='count'>
											<div class="slide js_slide slide_inactive">
												<f:if condition="{poi.poipartimg}">
													<div class="detail_img">
														<div class="marker js_marker" style="left: {poi.offsetleft}%; top: {poi.offsettop}%" id="marker_{count.cycle}" data-index="{count.cycle}">
															<div class="marker_icon js_marker_icon"></div>
															<div class="marker_title">{poi.title} <i class="arrow_right"></i></div>
														</div>
														<ne:image image="{poi.poipartimg.0}" class="detail_image" />
													</div>
												</f:if>

												<div class="detail_container">
													<div class="marker marker_detail">
														<div class="marker_icon"></div>
													</div>
													<f:if condition="{poi.poidetailimg}">
														<div class="img_container fitimage js_fitimage">
															<ne:image image="{poi.poidetailimg.0}" />
														</div>
													</f:if>
													<div class="text_container">
														<h3 class="poi_detail_title">{poi.title}</h3>
														<f:format.html>{poi.text}</f:format.html>
													</div>
												</div>
											</div>
										</f:for>
									</div>

								</div>
								<f:if condition="{pois -> f:count()} > 1">
									<div class="slider_prev_outer js_slider_prev_outer">
										<a href="javascript:void(0);"><span class="slider_prev"></span></a>
									</div>
									<div class="slider_next_outer js_slider_next_outer">
										<a href="javascript:void(0);"><span class="slider_next"></span></a>
									</div>
								</f:if>
							</div>
						</div>
					</f:if>

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

</div>