{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<section class="feature-divider">
	<f:if condition="{image}">
		<div class="background-image-holder" data-scroll-reveal="wait 0.2s then enter 200px from bottom over 0.3s">
			<media:image asset="{image}" alt="Background Image" class="background-image" maximumWidth="2000"
						 maximumHeight="1500" allowCropping="1" allowUpScaling="1"/>
		</div>
	</f:if>

	<div class="container">
		<div class="row">
			<div class="col-sm-5">
				{neos:contentElement.editable(property: 'title', tag: 'h1')}
				{neos:contentElement.editable(property: 'lead', class: 'lead', tag: 'p')}
				<f:if condition="{image1.properties.image}">
					<f:then>
						<neos:contentElement.wrap node="{image1}">
							<f:if condition="{image1.properties.link}">
								<{f:if(condition: '{node.context.workspaceName} == "live"', then: 'a
								href="{image1.properties.link}"',
								else: 'span')} class="store-link">
							</f:if>
							<media:image asset="{image1.properties.image}" alt="Buy On App Store" allowCropping="1" allowUpScaling="1" />
							<f:if condition="{image1.properties.link}">
								</{f:if(condition: '{node.context.workspaceName} == "live"', then: 'a', else: 'span')}>
							</f:if>
						</neos:contentElement.wrap>
					</f:then>
					<f:else>
						<f:security.ifAccess privilegeTarget="TYPO3.Neos:Backend.GeneralAccess">
							<neos:contentElement.wrap node="{image1}">
								<span class="store-link">
									<figure>
									<f:if condition="{node.context.workspace.name} != 'live'">
										<img src="{f:uri.resource(package: 'TYPO3.Neos', path: 'Images/dummy-image.svg')}" title="Dummy image" alt="Dummy image"/>
									</f:if>
								</figure>
							</span>
						</neos:contentElement.wrap>
					</f:security.ifAccess>
				</f:else>
				</f:if>
				<f:if condition="{image2.properties.image}">
					<f:then>
						<neos:contentElement.wrap node="{image2}">
							<f:if condition="{image2.properties.link}">
								<{f:if(condition: '{node.context.workspaceName} == "live"', then: 'a
								href="{image2.properties.link}"',
								else: 'span')} class="store-link">
							</f:if>
								<media:image asset="{image2.properties.image}" alt="Buy On App Store" allowCropping="1" allowUpScaling="1" />
							<f:if condition="{image2.properties.link}">
								</{f:if(condition: '{node.context.workspaceName} == "live"', then: 'a', else: 'span')}>
							</f:if>
						</neos:contentElement.wrap>
					</f:then>
					<f:else>
						<f:security.ifAccess privilegeTarget="TYPO3.Neos:Backend.GeneralAccess">
							<neos:contentElement.wrap node="{image2}">
								<span class="store-link">
								<figure>
									<f:if condition="{node.context.workspace.name} != 'live'">
										<img src="{f:uri.resource(package: 'TYPO3.Neos', path: 'Images/dummy-image.svg')}" title="Dummy image" alt="Dummy image"/>
									</f:if>
								</figure>
									</span>
							</neos:contentElement.wrap>
						</f:security.ifAccess>
					</f:else>
				</f:if>
			</div>

			<div class="col-sm-7" data-scroll-reveal="enter from bottom and move 100px">
				<f:if condition="{image3.properties.image}">
					<f:then>
						<neos:contentElement.wrap node="{image3}">
							<media:image asset="{image3.properties.image}" alt="App Screenshot" allowCropping="1"
										 allowUpScaling="1"/>
						</neos:contentElement.wrap>
					</f:then>
					<f:else>
						<f:security.ifAccess privilegeTarget="TYPO3.Neos:Backend.GeneralAccess">
							<neos:contentElement.wrap node="{image3}">
								<figure>
									<f:if condition="{node.context.workspace.name} != 'live'">
										<img src="{f:uri.resource(package: 'TYPO3.Neos', path: 'Images/dummy-image.svg')}" title="Dummy image" alt="Dummy image"/>
									</f:if>
								</figure>
							</neos:contentElement.wrap>
						</f:security.ifAccess>
					</f:else>
				</f:if>
			</div>
		</div>
	</div>
</section>