{namespace flux=FluidTYPO3\Flux\ViewHelpers}
{namespace v=Tx_Vhs_ViewHelpers}

<f:layout name="Content" />

<f:section name="Configuration">
    <flux:form id="image" wizardTab="Content" options="{Fluidcontent: '{sorting: 40}'}">
		<flux:field.inline.fal name="image" minItems="1" />
		<flux:field.checkbox name="zoom" />
        <flux:field.checkbox name="showBorder" />
        <flux:field.checkbox name="showImgBorder" />
    </flux:form>
</f:section>

<f:section name="Preview">
    <v:var.set name="imageReference" value="{v:resource.record.fal(table: 'tt_content', field: 'image')}" />

    <div class="image-element{f:if(condition: '{showImgBorder}', then: ' img-border')}{f:if(condition: '{showBorder}', then: ' border')}{f:if(condition: '{zoom}', then: ' zoom')}">
        <v:resource.image identifier="{imageReference.0.uid}" title="{imageReference.0.title}" alt="{imageReference.0.alternative}" maxWidth="360" treatIdAsReference="1" />
        <f:if condition="{imageReference.0.description}">
            <figcaption>{imageReference.0.description}</figcaption>
        </f:if>
    </div>
</f:section>

<f:section name="Main">
	<f:comment>
		Können wir die Bildgröße reduzieren wenn wir in einem Strukturlement, z.B. 50/50, sind?
		<f:debug><v:content.get contentUids="{0: '{record.tx_flux_parent}'}" render="0" /></f:debug>
    </f:comment>
	<div class="content-element-wrap{f:if(condition: '{showBorder}', then: ' border')}">
        <figure class="image-element{f:if(condition: '{showImgBorder}', then: ' img-border')}">
            <v:var.set name="imageReference" value="{v:resource.record.fal(table: 'tt_content', field: 'image')}" />
            <v:var.set name="imageTag" value="
				<span data-picture data-alt=\"{imageReference.0.alternative}\">
                    <span data-src=\"{f:uri.image(src: '{imageReference.0.uid}', maxWidth: '864', treatIdAsReference: '1')}\"></span>
                    <span data-src=\"{f:uri.image(src: '{imageReference.0.uid}', maxWidth: '1260', treatIdAsReference: '1')}\" data-media=\"(min-width: 768px)\"></span>
                    <span data-src=\"{f:uri.image(src: '{imageReference.0.uid}', maxWidth: '1386', treatIdAsReference: '1')}\" data-media=\"(min-width: 1024px)\"></span>
                    <span data-src=\"{f:uri.image(src: '{imageReference.0.uid}', maxWidth: '2076', treatIdAsReference: '1')}\" data-media=\"(min-width: 1600px)\"></span>
				</span>" />
            <f:if condition="{imageReference.0.link}">
                <f:then>
                    <f:link.page pageUid="{imageReference.0.link}">
                        {imageTag -> f:format.raw()}
                    </f:link.page>
                </f:then>
                <f:else>
                    <f:if condition="{zoom}">
                        <f:then>
                            <a href="{f:uri.image(src: '{imageReference.0.uid}', maxWidth: '2076', maxHeight: '1020', treatIdAsReference: '1')}" title="{imageReference.0.description}" class="zoom">
                                {imageTag -> f:format.raw()}
                            </a>
                        </f:then>
                        <f:else>
                            {imageTag -> f:format.raw()}
                        </f:else>
                    </f:if>
                </f:else>
            </f:if>
            <f:if condition="{imageReference.0.description}">
                <figcaption>{imageReference.0.description}</figcaption>
            </f:if>
        </figure>
    </div>
</f:section>