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

	<div class="background-image-holder">
		<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="container align-vertical">
		<div class="row">

			<div class="col-md-6">
				{neos:contentElement.editable(property: 'title', class: 'text-white', tag: '{titleTag}')}
				{neos:contentElement.editable(property: 'lead', class: 'text-white lead')}
			</div>

			<div class="col-md-6" data-scroll-reveal="enter from bottom and move 100px">
				<f:if condition="{productImage.properties.image}">
					<f:then>
						<neos:contentElement.wrap node="{productImage}">
							<figure>
								<media:image asset="{productImage.properties.image}" alt="Blank Phone" allowCropping="1" allowUpScaling="1"/>
							</figure>
						</neos:contentElement.wrap>
					</f:then>
					<f:else>
						<f:security.ifAccess privilegeTarget="TYPO3.Neos:Backend.GeneralAccess">
							<neos:contentElement.wrap node="{productImage}">
								<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>