{namespace ll=Lucidlab\HandynamicCar\ViewHelpers}
{namespace llc=Lucidlab\HandynamicCar\ViewHelpers}
{namespace tx=Lucidlab\HandynamicSkin\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<v:variable.set name="pageUid" value="{v:page.info(field:'uid')}" />

<div class="generalContent newVehicule">
    <h2 class="d-none">En bref</h2>
    <div class="row">
        <div class="col-lg-8">
            <div class="image">
                <f:if condition="{car.falMediaGallery}">
            		<div id="carslider" class="carousel slide">
            			<div class="carousel-inner">
            				<f:for each="{car.falMediaGallery}" as="file" iteration="iterator">
            					<f:if condition="{iterator.cycle}  == 1">
            						<f:then>
            							<div class="carousel-item active">
            								<div class="slide">
                                                <f:render partial="Car/Image" arguments="{file : file, car:car, settings:settings}" />
                                            </div>
            							</div>
            						</f:then>
            						<f:else>
            							<div class="carousel-item">
            								<div class="slide">
                                                <f:render partial="Car/Image" arguments="{file : file, car:car, settings:settings}" />
                                            </div>
            							</div>
            						</f:else>
            				    </f:if>
            				</f:for>
            			</div>
            			<ol class="carousel-indicators">
            				<f:for each="{car.falMediaGallery}" as="file" iteration="iterator">
            					<f:if condition="{iterator.cycle}  == 1">
            						<f:then>
            							<li data-target="#carslider" data-slide-to="{iterator.index}" class="active"></li>
            						</f:then>
            						<f:else>
            							<li data-target="#carslider" data-slide-to="{iterator.index}"></li>
            						</f:else>
            				    </f:if>
            				</f:for>
            			</ol>
            			<a data-slide="prev" role="button" class="carousel-control-icon left carousel-control carousel-control-prev" href="#carslider">
            		        <span class="carousel-control-prev-icon"></span>
            		        <span class="sr-only">{f:translate(key: 'previous', extensionName: 'bootstrap_package')}</span>
            		    </a>
            		    <a data-slide="next" role="button" class="carousel-control-icon right carousel-control carousel-control-next" href="#carslider">
            		        <span class="carousel-control-next-icon"></span>
            		        <span class="sr-only">{f:translate(key: 'next', extensionName: 'bootstrap_package')}</span>
            		    </a>
            		</div>
            	</f:if>
            </div>

        </div>
        <div class="col-lg-4 description">
            <p class="h2">
                {car.title}
            </p>

            <f:if condition="{car.capacities}">
                <p class="h3"><f:format.html parseFuncTSPath="lib.parseFunc"><llc:carCapacities transform="{car.capacities}" /></f:format.html></p>
            </f:if>

            <f:if condition="{car.price}">
                <div class="price h3">
                    <f:format.html>{car.price}</f:format.html>
                </div>
            </f:if>
            <hr>
            <div class="amenagmentContainer text-center">
                <f:for each="{car.categories}" as="category" >
                    <a href="#" onClick="return false" aria-label="{category.title}" class="amenagmentItem">
                        <img src="fileadmin/images/amenagements/{category.description}" alt="{category.description}" width="54" height="54">
                    </a>
                </f:for>
            </div>
        </div>
				<div class="col-lg-12">
					<f:if condition="{car.presentation}">
						<f:format.html>{car.presentation}</f:format.html>
					</f:if>
					<f:if condition="{car.mention}">
						<p class="mentions">{car.mention}</p>
					</f:if>
				</div>
    </div>
		<f:if condition="{car.availabilityVehicule}">
			<div class="row">
				<f:if condition="{car.informationsAvailabilityImage}">
					<div class="col-md-3">
						<f:for each="{car.informationsAvailabilityImage}" as="file" iteration="iterator">
							<img src="{v:uri.image(src:'{file.uid}', treatIdAsReference: '1')}" title="{file.originalResource.title}" alt="{file.originalResource.alternative}">
						</f:for>
					</div>
				</f:if>
				<f:if condition="{car.informationsAvailability}">
					<div class="{f:if(condition: '{car.informationsAvailabilityImage}', then: 'col-md-9', else: 'col-md-12')}">
						<f:format.html>{car.informationsAvailability}</f:format.html>
					</div>
				</f:if>
			</div>
		</f:if>
</div>
<f:if condition="{car.youtubeVideo}">
    <div class="videoContent">
        <h2>Vidéo</h2>
        <f:render partial="Car/ItemYoutubeVideo" arguments="{car : car}" />
    </div>
</f:if>
<f:if condition="{car.visitcontent} || {car.virtualVisite}">
    <div class="videoContent">
        <h2>Visite 360°</h2>
        <article class="rub" id="tour360">
            <f:render partial="Car/ItemVirtualVisite" arguments="{car : car}" />
        </article>
    </div>
</f:if>
<f:if condition="{car.more}">
    <div class="avantageContent">
        <h2>Plus d'informations</h2>
		<article class="rub" id="informations">
			<f:render partial="Car/InlineContent" arguments="{object : car.more}" />

			<f:if condition="{car.related} && {car.textRelated}">
				<f:for each="{car.related}" as="carRelated">
					<v:variable.set name="uid" value="{v:variable.convert(value: carRelated.uid, type: 'array')}" />
					<f:format.htmlentitiesDecode><p><a href="{f:uri.action(action: 'show', arguments: {car: '{carRelated.uid}'}, controller: 'Car', extensionName: 'HandynamicCar', pluginName: 'Carlisting', addQueryString: 1, argumentsToBeExcludedFromQueryString: {foo: 'uid'})}" target="_top" class="cta" title="{car.textRelated}">{car.textRelated}</a></p></f:format.htmlentitiesDecode>
				</f:for>
			</f:if>
		</article>
    </div>
</f:if>
<f:if condition="{car.implantation} || {car.specifications} || {car.options} || {car.falRelatedFiles}">
    <div class="infoContent">
    	<h2>Infos techniques</h2>
    	<f:if condition="{car.implantation}">
    		<article class="rub" id="schema">
    			<f:render partial="Car/InlineContent" arguments="{object : car.implantation, imgClass:'full'}" />
    		</article>
    	</f:if>
    	<f:if condition="{car.specifications}">
    		<article class="rub" id="spec">
    			<div class="table-rte">
    				<f:render partial="Car/InlineContent" arguments="{object : car.specifications, imgClass:'small'}" />
    			</div>
    		</article>
    	</f:if>

    	<f:if condition="{car.options}">
    		<article class="rub" id="options">
    			<f:render partial="Car/InlineContent" arguments="{object : car.options, imgClass:'small'}" />
    		</article>
    	</f:if>

    	<f:if condition="{car.falRelatedFiles}">
    		<article class="rub" id="docs">
    			<h3>{f:translate(key:'LLL:EXT:handynamic_car/Resources/Private/Language/locallang.xlf:detail.document_download')}</h3>
    		</article>
    		<article class="rubs" id="telechargements">
    			<ul>
    				<f:for each="{car.falRelatedFiles}" as="relatedFile">
    					<li>
    						<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
    						<a href="{relatedFile.originalResource.publicUrl}" title="{relatedFile.originalResource.title}" class="{relatedFile.originalResource.originalFile.extension}" target="_blank">{relatedFile.originalResource.title}</a>
							(<f:format.bytes decimals="1">{v:media.size(path: '{relatedFile.originalResource.publicUrl}')}</f:format.bytes>)
    					</li>
    				</f:for>
    			</ul>
    		</article>
    	</f:if>
    </div>
</f:if>