{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<section class="hero-slider">
	<ul class="slides">
		<li class="overlay">
			<div class="background-image-holder parallax-background">
				<f:if condition="{image}">
					<media:image asset="{image}" alt="Background Image" class="background-image" maximumWidth="2000" maximumHeight="1500" allowCropping="1" allowUpScaling="1" />
				</f:if>
			</div>

			<div class="video-wrapper">
				<video autoplay="" muted="" loop="">
					<f:if condition="{webm}">
						<source type="video/webm" src="{f:uri.resource(resource: webm.resource)}">
					</f:if>
					<f:if condition="{mp4}">
						<source type="video/mp4" src="{f:uri.resource(resource: mp4.resource)}">
					</f:if>
					<f:if condition="{ogv}">
						<source type="video/ogg" src="{f:uri.resource(resource: ogv.resource)}">
					</f:if>
				</video>
			</div>

			<div class="container align-vertical">
				<div class="row">
					<div class="col-md-6 col-sm-9">
						{neos:contentElement.editable(property: 'title', class: 'text-white', tag: 'h1')}

						<f:if condition="{link}">
							<{f:if(condition: '{node.context.workspaceName} == "live"', then: 'a href="{link}"', else: 'span')} class="btn btn-primary btn-white">
							{neos:contentElement.editable(property: 'linkText')}
						</{f:if(condition: '{node.context.workspaceName} == "live"', then: 'a', else: 'span')}>
						</f:if>
						<f:if condition="{link2}">
							<{f:if(condition: '{node.context.workspaceName} == "live"', then: 'a href="{link2}"', else: 'span')} class="btn btn-primary btn-filled">
							{neos:contentElement.editable(property: 'link2Text')}
						</{f:if(condition: '{node.context.workspaceName} == "live"', then: 'a', else: 'span')}>
						</f:if>
					</div>
				</div>
			</div>
		</li>
	</ul>
</section>