{namespace neos=Neos\Neos\ViewHelpers}
{namespace media=Neos\Media\ViewHelpers}
<section class="product-right {backgroundColor}">

	<div class="background-image-holder">
		<f:if condition="{image}">
			<media:image image="{image}" alt="Background Image" class="background-image" maximumWidth="2000"
						 maximumHeight="1500" allowCropping="1" allowUpScaling="1"/>
		</f:if>
	</div>

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

				<p class="lead">
					{neos:contentElement.editable(property: 'lead', class: 'lead {fontColor}')}
				</p>
				<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-white">
					{neos:contentElement.editable(property: 'link2Text')}
				</{f:if(condition: '{node.context.workspaceName} == "live"', then: 'a', else: 'span')}>
				</f:if>
				</neos:contentElement.wrap>
			</div>
			<f:if condition="{productImage.properties.image}">
				<f:then>
					<div class="product-image" data-scroll-reveal="enter right and move 100px">
						<neos:contentElement.wrap node="{productImage}">
							<figure>
								<media:image image="{productImage.properties.image}" alt="Product Image" allowCropping="1" allowUpScaling="1"/>
							</figure>
						</neos:contentElement.wrap>
					</div>
				</f:then>
				<f:else>
					<f:security.ifAccess privilegeTarget="Neos.Neos:Backend.GeneralAccess">
						<div class="product-image">
							<neos:contentElement.wrap node="{productImage}">
								<figure>
									<f:if condition="{node.context.workspace.name} != 'live'">
										<img src="{f:uri.resource(package: 'Neos.Neos', path: 'Images/dummy-image.svg')}"
											 title="Dummy image" alt="Dummy image"/>
									</f:if>
								</figure>
							</neos:contentElement.wrap>
						</div>
					</f:security.ifAccess>
				</f:else>
			</f:if>
		</div>
	</div>


</section>