<div xmlns="http://www.w3.org/1999/xhtml" xmlns:v="http://www.w3.org/1999/html" lang="en"
     xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
     xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers">

    <f:layout name="Content" />

    <f:section name="Configuration">
        <flux:form id="responsiveimage">
            <flux:form.option.icon value="EXT:fluidbootstrap/Resources/Public/Icons/Content/SimpleResponsiveImage.png"/>
            <flux:form.option.group value="fluxcontent"/>
            <flux:form.sheet name="settingsImage" label="Bild Einstellungen">
                <flux:field.inline.fal name="settings.image" label="Bild wählen"
                                       allowedExtensions="gif,jpg,jpeg,png,tiff,tif"
                                       expandSingle="1"
                                       collapseAll="1"
                                       showThumbs="1" maxItems="1" required="true"/>
                <flux:field.select name="settings.imageLayout"
                                   requestUpdate="true"
                                   label="Darstellungsart wählen"
                                   items="{
                               0:{0:'Standard (Fluid Image)', 1:'Standard'},
                               1:{0:'Hintergrundbild (Passt Größe an das Elternelements an)', 1:'Hintergundbild'},
                               2:{0:'Hintergrundbild Monotoner Scrolleffekt (Passt Größe an das Elternelements an)', 1:'Monotone-Scroll'}
                               }" />
                <flux:field.input name="settings.imageGrayscaleColor" label="Monotoner Scrolleffekt Farbe ( Hexadezimal: #000000 oder RGBA: rgba(0,0,0, .5) )"
                                  default="rgba(255,255,255, .8)"
                                  displayCond="FIELD:settings.imageLayout:=:Monotone-Scroll"/>
                <flux:field.select name="settings.imageScrollAnimateDirection"
                                   label="Monotoner Scrolleffekt Richtung"
                                   displayCond="FIELD:settings.imageLayout:=:Monotone-Scroll"
                                   items="{
						   0:{0:'Nach rechts', 1:'to-right'},
						   1:{0:'Nach links', 1:'to-left'},
						   2:{0:'Nach oben', 1:'to-top'},
						   3:{0:'Nach unten', 1:'to-bottom'}
						   }" default="to-right"/>
                <flux:field.checkbox name="settings.imageGrayscaleOffsetHeader" label="Endpunkt der Animation Headerhöhe nutzen bis Scrollanimation abgeschlossen ist."
                                     displayCond="FIELD:settings.imageLayout:=:Monotone-Scroll" default="1"/>
                <flux:field.input name="settings.imageGrayscaleOffset" label="Endpunkt der Animation von Oben (wird addiert falls Endpunkt Headerhöhe gesetzt)"
                                  displayCond="FIELD:settings.imageLayout:=:Monotone-Scroll" default="0" eval="trim, int"/>
                <flux:field.input name="settings.imageGrayscaleOffsetBottom" label="Startpunkt der Animation von unten in px"
                                  displayCond="FIELD:settings.imageLayout:=:Monotone-Scroll" default="0"  eval="trim, int"/>
                <flux:field.input name="settings.imageGrayscaleOffsetReverse" label="Startpunkt der Animation rückwärts (Anzahl Pixel zum herausscrollen, standard = Bildschirmoberkante)"
                                  displayCond="FIELD:settings.imageLayout:=:Monotone-Scroll" default="0"  eval="trim, int"/>
                <flux:field.select name="settings.imageImageSize"
                                   label="Hintergrundbild Füllmethode"
                                   displayCond="{'or':{0:'FIELD:settings.imageLayout:=:Hintergundbild',1:'FIELD:settings.imageLayout:=:Monotone-Scroll'}}"
                                   items="{
						   0:{0:'Ausfüllen: cover (Bild wird skaliert und kann abgeschnitten werden)', 1:'cover'},
						   1:{0:'Gesamtes Bild zeigen: contain', 1:'contain'}
						   }" default="cover"/>
                <flux:field.select name="settings.imageBgPosH"
                                   label="Hintergundbild Position horizontal"
                                   displayCond="{'or':{0:'FIELD:settings.imageLayout:=:Hintergundbild',1:'FIELD:settings.imageLayout:=:Monotone-Scroll'}}"
                                   default="center"
                                   items="{
                                            0:{0:'links', 1:'left'},
                                            1:{0:'mittig', 1:'center'},
                                            2:{0:'rechts', 1:'right'}}" />
                <flux:field.select name="settings.imageBgPosV"
                                   label="Hintergrundbild Position vertical"
                                   displayCond="{'or':{0:'FIELD:settings.imageLayout:=:Hintergundbild',1:'FIELD:settings.imageLayout:=:Monotone-Scroll'}}"
                                   default="center"
                                   items="{
                                            0:{0:'oben', 1:'top'},
                                            1:{0:'mittig' , 1:'center'},
                                            2:{0:'unten' , 1:'bottom'}}" />
                <flux:field.select name="settings.imageViewportParentHeight"
                                   label="Wähle automatische Höheneinstellungen"
                                   displayCond="{'or':{0:'FIELD:settings.imageLayout:=:Hintergundbild',1:'FIELD:settings.imageLayout:=:Monotone-Scroll'}}"
                                   requestUpdate="true"
                                   default="h-100"
                                   items="{
						   0:{0:'Nutze Mindesthöhe', 1:'min-height'},
						   1:{0:'Höhe = Höhe des Elternelements', 1:'h-100'},
						   2:{0:'Höhe = Höhe des Browserfensters', 1:'viewport'}
						   }"/>
                <flux:field.input name="settings.imageMinHeight" label="Mindesthöhe Mobil in px" eval="'trim','int'"
                                  default="{settings.image.heightMobile}"
                                  displayCond="FIELD:settings.imageViewportParentHeight:=:min-height"/>
                <flux:field.input name="settings.imageMinHeightTablet" label="Mindesthöhe Tablet in px (Hochformat)" eval="'trim','int'"
                                  default="{settings.image.heightTablet}"
                                  displayCond="FIELD:settings.imageViewportParentHeight:=:min-height"/>
                <flux:field.input name="settings.imageMinHeightTabletLandscape" label="Mindesthöhe Tablet in px (Querformat)" eval="'trim','int'"
                                  default="{settings.image.heightTabletLandscape}"
                                  displayCond="FIELD:settings.imageViewportParentHeight:=:min-height"/>
                <flux:field.input name="settings.imageMinHeightTabletDesktop" label="Mindesthöhe Desktop in px" eval="'trim','int'"
                                  default="{settings.image.heightDesktop}"
                                  displayCond="FIELD:settings.imageViewportParentHeight:=:min-height"/>
                <flux:field.input name="settings.imageMinHeightTabletDesktopXL" label="Mindesthöhe Desktop in px (ab 1440px Breite)" eval="'trim','int'"
                                  default="{settings.image.heightDesktopXl}"
                                  displayCond="FIELD:settings.imageViewportParentHeight:=:min-height"/>
                <flux:field.input name="settings.imageMinHeightTabletDesktopXXL" label="Mindesthöhe Desktop in px (ab 1600px Breite)" eval="'trim','int'"
                                  default="{settings.image.heightDesktopXxl}"
                                  displayCond="FIELD:settings.imageViewportParentHeight:=:min-height"/>
                <flux:field.checkbox name="settings.imageEnableZoom" default="0" label="Aktiviere Zoom-Effekt beim Mouseover"
                                     displayCond="FIELD:settings.imageLayout:!=:Monotone-Scroll" requestUpdate="true"/>
                <flux:field.select name="settings.imageZoomStyle"
                                   label="Zoom Effekt Typ"
                                   displayCond="FIELD:settings.imageEnableZoom:=:1"
                                   items="{
                                   0:{0:'vergrößern', 1:'zoom-image'},
                                   1:{0:'verkleinern', 1:'zoom-image-out'}
                                   }"/>
                <flux:field.checkbox name="settings.imageShowOverlay" label="Aktiviere Bild-Overlay" default="false"
                                     displayCond="FIELD:settings.imageLayout:!=:Monotone-Scroll"/>
                <flux:field.input name="settings.imageClasses" label="Zusätzliche Klassen" eval="'trim'"/>
                <flux:field.input name="settings.imageAdditionalStyles" label="Zusätzliche CSS-Styles (Bsp: padding-left: 10px; top: 30px;)" eval="'trim'"/>
            </flux:form.sheet>
            <flux:form.sheet name="imageTitle" label="Bild Titel">
                <flux:field.checkbox name="settings.imageShowTitle" label="Zeige Bild-Metadaten (Titel, Beschreibung, Teaser wenn gesetzt)" default="0" requestUpdate="true" />
                <flux:field.checkbox name="settings.imageShowTitleMobile" default="1" label="Zeige Titel Mobil" displayCond="FIELD:settings.imageShowTitle:=:1"/>
                <flux:field.checkbox name="settings.imageShowTitleTablet" default="1" label="Zeige Titel auf Tablet (Hochformat)" displayCond="FIELD:settings.imageShowTitle:=:1"/>
                <flux:field.checkbox name="settings.imageShowTitleTabletLandscape" default="1" label="Zeige Titel auf Tablet (Querformat)" displayCond="FIELD:settings.imageShowTitle:=:1"/>
                <flux:field.checkbox name="settings.imageShowTitleDesktop" default="1" label="Zeige Titel auf Desktop" displayCond="FIELD:settings.imageShowTitle:=:1"/>
                <flux:field.select name="settings.imageTitleColorClass" items="{settings.textColorClasses}" label="Titel Textfarbe"
                                   displayCond="FIELD:settings.imageShowTitle:=:1"/>
                <flux:field.select name="settings.imageTitlePosH"
                                   label="Titel Position horizontal Mobil"
                                   items="{
                                            0:{0:'links', 1:'justify-content-start'},
                                            1:{0:'mittig', 1:'justify-content-center'},
                                            2:{0:'rechts', 1:'justify-content-end'}}"
                                   displayCond="FIELD:settings.imageShowTitle:=:1"/>
                <flux:field.select name="settings.imageTitlePosHTablet"
                                   label="Titel Position horizontal Tablet (Hochformat)"
                                   items="{
                                            0:{0:'links', 1:'justify-content-md-start'},
                                            1:{0:'mittig', 1:'justify-content-md-center'},
                                            2:{0:'rechts', 1:'justify-content-md-end'}}"
                                   displayCond="FIELD:settings.imageShowTitle:=:1"/>
                <flux:field.select name="settings.imageTitlePosHTabletLandscape"
                                   label="Titel Position horizontal Tablet (Querformat)"
                                   items="{
                                            0:{0:'links', 1:'justify-content-lg-start'},
                                            1:{0:'mittig', 1:'justify-content-lg-center'},
                                            2:{0:'rechts', 1:'justify-content-lg-end'}}"
                                   displayCond="FIELD:settings.imageShowTitle:=:1"/>
                <flux:field.select name="settings.imageTitlePosHDesktop"
                                   label="Titel Position horizontal Desktop"
                                   items="{
                                            0:{0:'links', 1:'justify-content-xl-start'},
                                            1:{0:'mittig', 1:'justify-content-xl-center'},
                                            2:{0:'rechts', 1:'justify-content-xl-end'}}"
                                   displayCond="FIELD:settings.imageShowTitle:=:1"/>

                <flux:field.select name="settings.imageTitlePosV"
                                   label="Titel Position vertical Mobil"
                                   items="{
                                            0:{0:'oben', 1:'align-items-start'},
                                            1:{0:'mittig' , 1:'align-items-center'},
                                            2:{0:'unten' , 1:'align-items-end'}}"
                                   displayCond="FIELD:settings.imageShowTitle:=:1"/>
                <flux:field.select name="settings.imageTitlePosVTablet"
                                   label="Titel Position vertical Tablet (Hochformat)"
                                   items="{
                                            0:{0:'oben', 1:'align-items-md-start'},
                                            1:{0:'mittig' , 1:'align-items-md-center'},
                                            2:{0:'unten' , 1:'align-items-md-end'}}"
                                   displayCond="FIELD:settings.imageShowTitle:=:1"/>
                <flux:field.select name="settings.imageTitlePosVTabletLandscape"
                                   label="Titel Position vertical Tablet (Querformat)"
                                   items="{
                                            0:{0:'oben', 1:'align-items-lg-start'},
                                            1:{0:'mittig' , 1:'align-items-lg-center'},
                                            2:{0:'unten' , 1:'align-items-lg-end'}}"
                                   displayCond="FIELD:settings.imageShowTitle:=:1"/>
                <flux:field.select name="settings.imageTitlePosVDesktop"
                                   label="Titel Position vertical Desktop"
                                   items="{
                                            0:{0:'oben', 1:'align-items-xl-start'},
                                            1:{0:'mittig' , 1:'align-items-xl-center'},
                                            2:{0:'unten' , 1:'align-items-xl-end'}}"
                                   displayCond="FIELD:settings.imageShowTitle:=:1"/>
            </flux:form.sheet>
        </flux:form>
    </f:section>

    <f:section name="Main">
        <v:asset.script name="lazysizejs" path="EXT:fluidbootstrap/Resources/Public/Page/Javascript/Lazysizes.min.js" />
        <f:if condition="{settings.imageMagnific}">
            <v:asset.script name="magnific" dependencies="jquery"  path="EXT:fluidbootstrap/Resources/Public/Page/Javascript/MagnificPopup.min.js"/>
            <v:asset.script name="magnificplugin" dependencies="magnific"  path="EXT:fluidbootstrap/Resources/Public/Page/Javascript/MagnificPopup/MagnificImage.js"/>
            <v:asset.script name="magnific-{record.uid}" fluid="true" dependencies="magnificplugin">
                $(function(){
                $('.magnific-<f:format.raw>{record.uid}</f:format.raw>').magnificImage({
                animationEffect:'<f:format.raw>{settings.imageAnimationEffect}</f:format.raw>',
                });
                });
            </v:asset.script>
        </f:if>
        <f:for each="{v:content.resources.fal(field: 'settings.image')}" as="image" iteration="i">
            <f:if condition="{settings.imageLayout} == 'Standard'">
                <div class="{f:if(condition:'{settings.imageMagnific}', then:'magnific-{record.uid}')}">
                    <f:render partial="Content/ResponsiveImage/ResponsiveImage" section="ResponsiveImage" arguments="{settings:settings, uid:record.uid, image:image, i:i, slider:'0'}" />
                </div>
            </f:if>
            <f:if condition="{settings.imageLayout} == 'Hintergundbild'">
                <div class="{f:if(condition:'{settings.imageViewportParentHeight} != \'viewport\'', then: 'h-100')}{f:if(condition:'{settings.imageMagnific}', then:' magnific-{record.uid}')}">
                    <f:render partial="Content/ResponsiveImage/ResponsiveImageBackground" section="ResponsiveImage" arguments="{settings:settings, uid:record.uid, image:image, i:i, slider:'0'}" />
                </div>
            </f:if>
            <f:if condition="{settings.imageLayout} == 'Monotone-Scroll'">
                <div class="{f:if(condition:'{settings.imageViewportParentHeight} != \'viewport\'', then: 'h-100')}{f:if(condition:'{settings.imageMagnific}', then:' magnific-{record.uid}')}">
                    <f:render partial="Content/ResponsiveImage/ResponsiveImageMonotoneScroll" section="ResponsiveImage" arguments="{settings:settings, uid:record.uid, image:image, i:i, slider:'0'}" />
                </div>
            </f:if>
        </f:for>

    </f:section>

    <f:section name="Preview">
        <div style="background-color:#efefef; margin-bottom: 10px; padding: 10px;">
            <p><b>Responsive Image</b></p>
            <p><i>Darstellung:</i> {settings.imageLayout} |
                <i>Zeige Overlay:</i> <f:if condition="{settings.imageShowOverlay}"><f:then>ja</f:then><f:else>nein</f:else></f:if> |
                <i>Zeige Titel:</i> <f:if condition="{settings.imageShowTitle}"><f:then>ja</f:then><f:else>nein</f:else></f:if> |<f:if condition="{settings.imageShowTitle}">
                    <i>Textfarbe Titel:</i> {titleColorClass} |
                </f:if>
                <i>Popup:</i> <f:if condition="{settings.imageMagnific}"><f:then>ja</f:then><f:else>nein</f:else></f:if>
            </p>
            <div class="t3-grid-container" style="padding: 10px">
                <table class="flux-grid">
                    <tbody>
                    <tr>
                        <f:for each="{v:content.resources.fal(field: 'settings.image', record: '{record}')}" as="image" iteration="i">
                            <td class="flux-grid-column">
                                <f:image src="{image.id}" treatIdAsReference="1" alt="{image.title}" width="100c"/><br/>
                            </td>
                        </f:for>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </f:section>
</div>