<f:layout name="Content" />

<f:section name="Header" />

<f:section name="Configuration">
    <flux:form id="imageteasers" label="Bild Teaser" >
        <flux:form.option.group value="contentelements" />
        <flux:form.option.icon value="/typo3conf/ext/sutterbegg_distribution/Resources/Public/Icons/Content/Default.svg" />

        <flux:form.sheet name="settingssheet" label="Einstellungen">
            <flux:field.select name="layout" label="Layout" items="{
                0:{0:'Ein Bild',1:'oneimage'},
                1:{0:'Drei Bilder',1:'threeimages'},
                2:{0:'Vier Bilder',1:'fourimages'}
                }"
            />
            <flux:field.checkbox name="useanimation" label="Element bei Scroll animieren" default="1" required="true" />
        </flux:form.sheet>
      
        <flux:form.sheet name="oneimagesheet" label="Ein Bild">
			<flux:field.file name="onageimage.bigimage" allowed="jpg,png,jpeg,gif,bmp,svg" label="Grosses Bild" minItems="0" maxItems="1" size="1" multiple="false" useFalRelation="1" showThumbnails="true" />
            <flux:field.input name="onageimage.bigimagename" label="Text" required="false"/>
            <flux:field.input name="onageimage.bigimagetarget" label="Link" required="false" config="{renderType: 'inputLink'}" />
        </flux:form.sheet>

        <flux:form.sheet name="threeimagessheet" label="Drei Bilder">
			<flux:field.file name="threeimages.bigimage" allowed="jpg,png,jpeg,gif,bmp,svg" label="Grosses Bild" minItems="0" maxItems="1" size="1" multiple="false" useFalRelation="1" showThumbnails="true" />
            <flux:field.input name="threeimages.bigimagename" label="Text" required="false"/>
            <flux:field.input name="threeimages.bigimagetarget" label="Link" required="false" config="{renderType: 'inputLink'}" />
			<flux:field.file name="threeimages.imagetop" allowed="jpg,png,jpeg,gif,bmp,svg" label="Bild oben" minItems="0" maxItems="1" size="1" multiple="false" useFalRelation="1" showThumbnails="true" />
            <flux:field.input name="threeimages.imagetopname" label="Text" required="false"/>
            <flux:field.input name="threeimages.imagetoptarget" label="Link" required="false" config="{renderType: 'inputLink'}" />
			<flux:field.file name="threeimages.imagebottom" allowed="jpg,png,jpeg,gif,bmp,svg" label="Bild unten" minItems="0" maxItems="1" size="1" multiple="false" useFalRelation="1" showThumbnails="true" />
            <flux:field.input name="threeimages.imagebottomname" label="Text" required="false"/>
            <flux:field.input name="threeimages.imagebottomtarget" label="Link" required="false" config="{renderType: 'inputLink'}" />
        </flux:form.sheet>

        <flux:form.sheet name="fourimagessheet" label="Vier Bilder">
			<flux:field.file name="fourimages.bigimage" allowed="jpg,png,jpeg,gif,bmp,svg" label="Grosses Bild" minItems="0" maxItems="1" size="1" multiple="false" useFalRelation="1" showThumbnails="true" />
            <flux:field.input name="fourimages.bigimagename" label="Text" required="false"/>
            <flux:field.input name="fourimages.bigimagetarget" label="Link" required="false" config="{renderType: 'inputLink'}" />
			<flux:field.file name="fourimages.imageleft" allowed="jpg,png,jpeg,gif,bmp,svg" label="Bild links quadratisch" minItems="0" maxItems="1" size="1" multiple="false" useFalRelation="1" showThumbnails="true" />
            <flux:field.input name="fourimages.imageleftname" label="Text" required="false"/>
            <flux:field.input name="fourimages.imagelefttarget" label="Link" required="false" config="{renderType: 'inputLink'}" />
			<flux:field.file name="fourimages.imageright" allowed="jpg,png,jpeg,gif,bmp,svg" label="Bild rechts quadratisch" minItems="0" maxItems="1" size="1" multiple="false" useFalRelation="1" showThumbnails="true" />
            <flux:field.input name="fourimages.imagerightname" label="Text" required="false"/>
            <flux:field.input name="fourimages.imagerighttarget" label="Link" required="false" config="{renderType: 'inputLink'}" />
			<flux:field.file name="fourimages.imagebottom" allowed="jpg,png,jpeg,gif,bmp,svg" label="Bild unten" minItems="0" maxItems="1" size="1" multiple="false" useFalRelation="1" showThumbnails="true" />
            <flux:field.input name="fourimages.imagebottomname" label="Text" required="false"/>
            <flux:field.input name="fourimages.imagebottomtarget" label="Link" required="false" config="{renderType: 'inputLink'}" />
        </flux:form.sheet>
    </flux:form>
</f:section>

<f:section name="Preview">
    <div style="position:absolute;top:1px;left:46px;height:35px;line-height:35px;right:110px;padding:0 10px;"><b>Bild Teaser</b></div>
    <div style="width:100%;">
    <f:switch expression="{layout}">
        <f:case value="oneimage">
            <div style="margin-top: 12px; width: 1180px; height: 190px; cursor: pointer;">
                <div style="width: 100%; height: 100%;background-image:url('<v:uri.image src="{onageimage.bigimage}" width="1180c" height="190c" quality="100" />');background-repeat:no-repeat;background-repeat:no-repeat;background-size:cover;">
                    <div style="display:table;width:100%;height:100%;">
                        <h1 style="font-weight: 400;color: white; display: table-cell; vertical-align: bottom; padding: 20px 30px;text-transform: uppercase;">{onageimage.bigimagename}</h1>
                    </div>
                </div>
            </div>
        </f:case>
        <f:case value="threeimages">
            <div style="width:683px;height:440px;display:inline-block;vertical-align:top;box-sizing:border-box;padding-right:12px;">
                <div style="width:100%;height:100%;background-image:url('<v:uri.image src="{threeimages.bigimage}" width="680c" height="440c" quality="100" />');background-repeat:no-repeat;background-size:cover;">
                    <div style="width:100%; height:100%">
                        <div style="display:table;width:100%;height:100%;cursor:pointer;">
                            <h1 style="font-weight: 400;color:white; display: table-cell;vertical-align:bottom;padding: 20px 30px;text-transform:uppercase;">{threeimages.bigimagename}</h1>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width:485px;height:440px;display:inline-block;vertical-align:top;box-sizing:border-box;">
                <div style="width:100%;height:50%;box-sizing:border-box;">
                    <div style="width:100%;height:100%;background-image:url('<v:uri.image src="{threeimages.imagetop}" width="485c" height="215c" quality="100" />');background-repeat:no-repeat;background-size:cover;">
                        <div style="width:100%;height:100%">
                            <div style="display:table;width:100%;height:100%;cursor:pointer;">
                                <h1 style="font-weight: 400;color:white;display:table-cell;vertical-align:bottom;padding:20px 30px;text-transform:uppercase;">{threeimages.imagetopname}</h1>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="width:100%;height:50%;box-sizing:border-box;padding-top:12px;">
                    <div style="width:100%;height:100%;background-image:url('<v:uri.image src="{threeimages.imagebottom}" width="485" height="215c" quality="100" />');background-repeat:no-repeat;background-size:cover;">
                        <div style="width:100%;height:100%">
                            <div style="display:table;width:100%;height:100%;cursor:pointer;">
                                <h1 style="font-weight: 400;color:white;display:table-cell;vertical-align:bottom;padding:20px 30px;text-transform:uppercase;">{threeimages.imagebottomname}</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </f:case>
        <f:case value="fourimages">
            <div style="width:584px;height:480px;display:inline-block;vertical-align:top;padding-right:12px">
                <div style="width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-image:url('<v:uri.image src="{fourimages.bigimage}" width="580c" height="480c" quality="100" />');">
                    <div style="width:100%;height:100%">
                        <div style="display:table;width:100%;height:100%;cursor:pointer;">
                            <h1 style="font-weight: 400;color:white;display:table-cell;vertical-align:bottom;padding:20px 30px;text-transform:uppercase;">{fourimages.bigimagename}</h1>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width:590px;height:480px;display:inline-block;vertical-align:top;">
                <div style="height:50%;width:100%;display:inline-block;vertical-align:top; padding-bottom:12px;">
                    <div style="width:49%;height:100%;display:inline-block;font-size:0;">
                        <div style="width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-image:url('<v:uri.image src="{fourimages.imageleft}" width="280c" height="230c" quality="100" />');">
                            <div style="width:100%;height:100%;font-size:27px;">
                                <div style="width:100%;height:100%;cursor:pointer; display:table;">
                                    <h1 style="font-weight: 400;color:white;display:table-cell;vertical-align:bottom;padding:20px 30px;text-transform:uppercase;">{fourimages.imageleftname}</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="width:50%;height:100%;display:inline-block;vertical-align:top;font-size:0;">
                        <div style="width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-image: url('<v:uri.image src="{fourimages.imageright}" width="280c" height="230c" quality="100" />');">
                            <div style="width:100%;height:100%;">
                                <div style="width:100%;height:100%;cursor:pointer;display:table;">
                                    <h1 style="font-weight: 400;font-size:32px;color:white;display:table-cell;vertical-align:bottom;padding:20px 30px;text-transform:uppercase;">{fourimages.imagerightname}</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="height:50%;width:100%;display:inline-block;vertical-align:top;font-size:0;">
                    <div style="width:100%;height:100%;background-repeat: no-repeat; background-size:cover;background-image:url('<v:uri.image src="{fourimages.imagebottom}" width="580c" height="230c" quality="100" />');">
                        <div style="width:100%; height: 100%">
                            <div style="width:100%;height:100%;cursor:pointer;display:table;">
                                <h1 style="font-weight: 400;color:white;display:table-cell;vertical-align:bottom;padding:20px 30px;text-transform:uppercase;">{fourimages.imagebottomname}</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </f:case>
    </f:switch>
</div>

</f:section>

<f:section name="Main">
    <div class="imgteaser {f:if(condition: useanimation, then: 'anim', else: '')}">
        <f:switch expression="{layout}">
            <f:case value="oneimage">
                <f:if condition="{onageimage.bigimagetarget} != ''">
                    <div class="oneimgteaser">
                        <div class="teaserblock main"> 
							<f:link.typolink parameter="{onageimage.bigimagetarget}">
                                <f:image class="img" src="{onageimage.bigimage}" width="1180c" height="190c" additionalAttributes="{srcset: '{v:uri.image(src:onageimage.bigimage, width:\'2360‬c\', height:\'380c\')} 2x'}" />
                                <div class="inner">
                                    <h1>{onageimage.bigimagename}</h1>
                                </div> 
                            </f:link.typolink>
                        </div>
                    </div>
                </f:if>
            </f:case>
            <f:case value="threeimages">
                <f:if condition="{threeimages.bigimage} != '' && {threeimages.imagetop} != '' && {threeimages.imagebottom} != ''">
                    <div class="threeimgteaser">
                        <div class="leftteaser">
                            <div class="teaserblock"> 
								<f:link.typolink parameter="{threeimages.bigimagetarget}">
                                    <f:image class="img" src="{threeimages.bigimage}" width="680c" height="440c" additionalAttributes="{srcset: '{v:uri.image(src:threeimages.bigimage, width:\'1360‬c\', height:\'880c\')} 2x'}" />
                                    <div class="inner">
                                        <h1>{threeimages.bigimagename}</h1>
                                    </div>                                   
                                </f:link.typolink>
                            </div>
                        </div>
                        <div class="rightteaser">
                            <div class="teaserblock up"> 
								<f:link.typolink parameter="{threeimages.imagetoptarget}">
                                    <f:image class="img" src="{threeimages.imagetop}" width="490c" height="214c" additionalAttributes="{srcset: '{v:uri.image(src:threeimages.imagetop, width:\'980‬c\', height:\'428c\')} 2x'}" />
                                    <div class="inner">
                                        <h1>{threeimages.imagetopname}</h1>
                                    </div>
                                </f:link.typolink>
                            </div>
                            <div class="teaserblock down"> 
								<f:link.typolink parameter="{threeimages.imagebottomtarget}">
                                    <f:image class="img" src="{threeimages.imagebottom}" width="490c" height="214c" additionalAttributes="{srcset: '{v:uri.image(src:threeimages.imagebottom, width:\'980‬c\', height:\'428c\')} 2x'}" />
                                    <div class="inner">
                                        <h1>{threeimages.imagebottomname}</h1>
                                    </div>
                                </f:link.typolink>
                            </div>
                        </div>
                    </div>
                </f:if>
            </f:case>
            <f:case value="fourimages">
                <f:if condition="{fourimages.bigimagetarget} != '' && {fourimages.imagelefttarget} != '' && {fourimages.imagerighttarget} != '' && {fourimages.imagebottomtarget} != ''">
                    <div class="fourimgteaser">
                        <div class="leftteaser">
                            <div class="teaserblock"> 
								<f:link.typolink parameter="{fourimages.bigimagetarget}">
                                    <f:image class="img" src="{fourimages.bigimage}" width="584c" height="480c" additionalAttributes="{srcset: '{v:uri.image(src:fourimages.bigimage, width:\'1168‬c\', height:\'920c\')} 2x'}" />
                                    <div class="inner">
                                        <h1>{fourimages.bigimagename}</h1>
                                    </div>
                                </f:link.typolink>
                            </div>
                        </div>
                        <div class="rightteaser">
                            <div class="teaserblock up">
                                <div class="teaserblock left"> 
									<f:link.typolink parameter="{fourimages.imagelefttarget}">
                                        <f:image class="img" src="{fourimages.imageleft}" width="286c" height="234c" additionalAttributes="{srcset: '{v:uri.image(src:fourimages.imageleft, width:\'572‬c\', height:\'468c\')} 2x'}" />
                                        <div class="inner">
                                            <h1>{fourimages.imageleftname}</h1>
                                        </div>
                                    </f:link.typolink>
                                </div>
                                <div class="teaserblock right"> 
									<f:link.typolink parameter="{fourimages.imagerighttarget}">
                                        <f:image class="img" src="{fourimages.imageright}" width="286c" height="234c" additionalAttributes="{srcset: '{v:uri.image(src:fourimages.imageright, width:\'572‬c\', height:\'468c\')} 2x'}"/>
                                        <div class="inner">
                                            <h1>{fourimages.imagerightname}</h1>
                                        </div>
                                    </f:link.typolink>
                                </div>
                            </div>
                            <div class="teaserblock down"> 
								<f:link.typolink parameter="{fourimages.imagebottomtarget}">
                                    <f:image class="img" src="{fourimages.imagebottom}" width="584c" height="234c" additionalAttributes="{srcset: '{v:uri.image(src:fourimages.imagebottom, width:\'1168‬c\', height:\'468c\')} 2x'}" />
                                    <div class="inner">
                                        <h1>{fourimages.imagebottomname}</h1>
                                    </div>
                                </f:link.typolink>
                            </div>
                        </div>
                    </div>
                </f:if>
            </f:case>
        </f:switch>
    </div>
</f:section>