{namespace flux=FluidTYPO3\Flux\ViewHelpers}
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
     xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
     xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
     xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">



    <f:layout name="Content" />
    <f:section name="Configuration">
        <flux:form id="modalLight" options="{icon: 'EXT:fluidbootstrap/Resources/Public/Icons/Content/ModalLight.png'}">
            <flux:form.option.icon value="EXT:fluidbootstrap/Resources/Public/Icons/Content/ModalLight.png"/>
            <flux:form.option.group value="fluxcontent"/>
            <flux:form.sheet name="modalConfiguration" label="Opener Einstellungen">+
                <flux:field.select name="settings.modalOpenAnimation"
                                   label="Popup Animationstyp beim öffnen/schließen"
                                   items="{
						   0:{0:'default', 1:'mfp-zoom-in'},
						   1:{0:'Move horizontal', 1:'mfp-move-horizontal'},
						   2:{0:'Move from top', 1:'mfp-move-from-top'},
						   3:{0:'3d unfold', 1:'mfp-3d-unfold'},
						   4:{0:'Zoom-out', 1:'mfp-zoom-out'},
						   5:{0:'Newspaper', 1:'mfp-newspaper'}
						   }"/>
                <flux:field.select name="settings.modalLinkType"
                                   label="Link Darstellung"
                                   items="{
                                        0:{0:'Button',1:'0'},
                                        1:{0:'Normal Link',1:'1'},
                                        2:{0:'Image',1:'2'},
                                        3:{0:'Video Button',1:'3'}}"
                                   requestUpdate="true" default="0" />
                <flux:field.input name="settings.modalLinkTitle" required="false" displayCond="FIELD:settings.modalLinkType:=:1" label="Link Titel"/>
                <flux:field.input name="settings.modalButtonTitle" required="false" displayCond="{'or':{0:'FIELD:settings.modalLinkType:=:0',1:'FIELD:settings.modalLinkType:=:3'}}"label="Button Titel"/>
                <flux:field.select name="settings.modalLinkStyle" items="{settings.linkStyles}" displayCond="FIELD:settings.modalLinkType:=:1" label="Link Textfarbe"/>
                <flux:field.select name="settings.modalButtonStyle" items="{settings.buttonStyles}" displayCond="{'or':{0:'FIELD:settings.modalLinkType:=:0',1:'FIELD:settings.modalLinkType:=:3'}}" label="Button Style"/>
                <flux:field.select name="settings.modalImageIcon"
                                   items="{
                                   0:{0:'none', 1:'none'},
                                   1:{0:'Video Play Icon', 1:'play_circle'}}"
                                   displayCond="FIELD:settings.modalLinkType:=:2" label="Zusätzliches Icon"/>
                <flux:field.select name="settings.modalImageIconColor" items="{settings.textColorClasses}" displayCond="FIELD:settings.modalLinkType:=:2" label="Icon Farbe"/>
                <flux:field.text name="settings.modalImageTitle" enableRichText="true" displayCond="FIELD:settings.modalLinkType:=:2" label="Titel"/>
                <flux:field.select name="settings.modalImageTitleBgColor" items="none,{settings.bgColorClassesForRow}" default="none" label="Hintergrundfarbe für Titel"/>
                <flux:field.select name="settings.modalButtonIcon" items="none, mail, file" displayCond="{'or':{0:'FIELD:settings.modalLinkType:=:0',1:'FIELD:settings.modalLinkType:=:3'}}" label="Button Icon"/>
                <flux:field.checkbox name="settings.modalButtonRound" displayCond="FIELD:settings.modalLinkType:=:0" label="Button mit runden Ecken" default="{settings.buttonDefaultRound}"/>
                <flux:field.checkbox name="settings.modalButtonShadow" displayCond="FIELD:settings.modalLinkType:=:0" default="{settings.buttonDefaultShadow}" label="Button mit Schatten"/>
                <flux:field.checkbox name="settings.modalButtonWidth" displayCond="FIELD:settings.modalLinkType:=:0" label="Setze Button Weite auf 100%"/>
                <flux:field.select name="settings.modalLinkPosH" label="Button/ Link Position"
                                   items="{
                                0:{0:'links', 1:'justify-content-start'},
                                1:{0:'mitte', 1:'justify-content-center'},
                                2:{0:'rechts', 1:'justify-content-end'}
                               }"
                                   displayCond="{'or':{0:'FIELD:settings.modalLinkType:=:0',1:'FIELD:settings.modalLinkType:=:1',2:'FIELD:settings.modalLinkType:=:3'}}"/>
                <flux:field.inline.fal name="settings.modalImage" label="Bild wählen" maxItems="1" minItems="1" allowedExtensions="gif,jpg,jpeg,png,tiff,tif" displayCond="FIELD:settings.modalLinkType:=:2" />
                <flux:field.input name="settings.modalClass" label="Zusätzliche Button/Link Klassen"/>
            </flux:form.sheet>
            <flux:form.sheet name="modalContentSettings" label="Popup Einstellungen">
                <flux:field.checkbox name="settings.modalShadow" label="Aktiviere Schatten" default="1"/>
                <flux:field.checkbox name="settings.modalSetPadding" default="0" requestUpdate="true" label="Nutze Innenabstand" />
                <flux:field.select name="settings.modalPadding" displayCond="FIELD:settings.modalSetPadding:=:1" items="none, extra-small, small, medium, large, extra-large" default="medium" label="Innenabstand rechts/links (padding)"/>
                <flux:field.select name="settings.modalPaddingTopBottom" displayCond="FIELD:settings.modalSetPadding:=:1" items="none, extra-small, small, medium, large, extra-large" default="medium" label="Innenabstand oben/unten (padding)"/>
                <flux:field.input name="settings.modalWidthMobile" default="100" eval="trim, int" label="Weite Mobil (in vw = % von Bildschirmbreite)"/>
                <flux:field.input name="settings.modalWidthTablet" default="100" eval="trim, int" label="Weite Tablet Hochformat (in vw = % von Bildschirmbreite)"/>
                <flux:field.input name="settings.modalWidthTabletLandscape" default="80" eval="trim, int" label="Weite Tablet Querformat (in vw = % von Bildschirmbreite)"/>
                <flux:field.input name="settings.modalWidthDesktop" default="80" eval="trim, int" label="Weite Desktop (in vw = % von Bildschirmbreite)"/>
                <flux:field.input name="settings.modalWidthDesktopXl" default="80" eval="trim, int" label="Weite Desktop XL ab 1440px (in vw = % von Bildschirmbreite)"/>
                <flux:field.input name="settings.modalWidthDesktopXxl" default="80" eval="trim, int" label="Weite Desktop XXL ab 1600px (in vw = % von Bildschirmbreite)"/>

                <flux:field.input name="settings.modalSpaceMobile" default="0" eval="trim, int" label="Abstand oben/unten Mobil (in Pixel)"/>
                <flux:field.input name="settings.modalSpaceTablet" default="0" eval="trim, int" label="Abstand oben/unten Tablet Hochformat (in Pixel)"/>
                <flux:field.input name="settings.modalSpaceTabletLandscape" default="50" eval="trim, int" label="Abstand oben/unten Tablet Querformat (in Pixel)"/>
                <flux:field.input name="settings.modalSpaceDesktop" default="60" eval="trim, int" label="Abstand oben/unten Desktop (in Pixel)"/>
                <flux:field.input name="settings.modalSpaceDesktopXl" default="70" eval="trim, int" label="Abstand oben/unten Desktop ab 1440px Breite (in Pixel)"/>
                <flux:field.input name="settings.modalSpaceDesktopXxl" default="80" eval="trim, int" label="Abstand oben/unten Desktop ab 1600px Breite (in Pixel)"/>
            </flux:form.sheet>
            <flux:form.content name="modalContent"/>
            <flux:form.sheet name="modalBgSettings" label="Hintergrund Einstellungen">
                <flux:field.select name="settings.modalBg"
                                   label="Hintergrundoptionen"
                                   requestUpdate="true"
                                   default="default"
                                   items="{
                                   0:{0:'Globale Einstellungen verwenden (Css)',1:'default'},
                                   1:{0:'Hintergundfarbe anpassen',1:'bgcolor'},
                                   2:{0:'Hintergundbild verwenden',1:'bgimage'}
                                   }"/>
                <flux:field.input name="settings.modalBgColor"
                                  displayCond="FIELD:settings.modalBg:=:bgcolor"
                                  default="#000000"
                                  eval="trim"
                                  label="Hintergundfarbe (Hexadezimal = #000000)"/>
                <flux:field.inline.fal name="settings.modalBgImage"
                                       label="Hintergrundbild (überlagert Hintergundfarbe)"
                                       displayCond="FIELD:settings.modalBg:=:bgimage"
                                       maxItems="1"
                                       expandSingle="1"
                                       collapseAll="1"
                                       required="true"
                                       allowedExtensions="gif,jpg,jpeg,png,tiff,tif,webp" />
                <flux:field.select name="settings.modalBgSize"
                                   label="Füllmethode"
                                   displayCond="FIELD:settings.modalBg:=:bgimage"
                                   default="auto"
                                   items="{
						            0:{0:'Ausfüllen: cover (Bild wird skaliert und kann abgeschnitten werden)', 1:'cover'},
						            1:{0:'Gesamtes Bild zeigen: contain', 1:'contain'},
						            2:{0:'Originalgröße behalten', 1:'auto'}
						            }"/>
                <flux:field.select name="settings.modalBgRepeat"
                                   label="Hintergundwiederholung"
                                   displayCond="FIELD:settings.modalBg:=:bgimage"
                                   default="no-repeat"
                                   items="{
						            0:{0:'nicht wiederholen', 1:'no-repeat'},
						            1:{0:'vertikal wiederholen', 1:'repeat-y'},
						            2:{0:'horizontal wiederholen', 1:'repeat-x'},
						            3:{0:'vertikal und horizontal wiederholen', 1:'repeat'}
						            }"/>
                <flux:field.input name="settings.modalBgOpacity"
                                  eval="int"
                                  default="80"
                                  displayCond="FIELD:settings.modalBg:!=:default"
                                  maximum="100" label="Hintergrund Sichtbarkeit in % (100 = komplett sichtbar)"/>
            </flux:form.sheet>
            <flux:form.sheet name="viewSettings" label="Anzeige Einstellungen">
                <flux:field.checkbox name="showOnMobile" default="1" label="Zeige Element auf Handy (mobile)"/>
                <flux:field.checkbox name="showOnTablet" default="1" label="Zeige Element auf Tablets (Hochformat)"/>
                <flux:field.checkbox name="showOnTabletLandscape" default="1" label="Zeige Element auf Tablets (Quervormat)"/>
                <flux:field.checkbox name="showOnDesktop" default="1" label="Zeige Element auf Desktops"/>
                <flux:field.checkbox name="showOnDesktopXl" default="1" label="Zeige Element auf Desktops (ab 1440px Breite)"/>
                <flux:field.checkbox name="showOnDesktopXxl" default="1" label="Zeige Element auf Desktops (ab 1600px Breite)"/>
                <flux:field.checkbox name="showOnDesktopXxxl" default="1" label="Zeige Element auf Desktops (ab 1900px HD)"/>
            </flux:form.sheet>
        </flux:form>
    </f:section>

    <f:section name="Main">
        <f:if condition="{showOnMobile}">
            <f:then>

                <v:variable.set name="settings.displayMobile" value='d-sm-flex'/>
            </f:then>
            <f:else>
                <v:variable.set name="settings.displayMobile" value='d-none'/>
            </f:else>
        </f:if>
        <f:if condition="{showOnTablet}">
            <f:then>
                <v:variable.set name="settings.displayTablet" value='d-md-flex'/>
            </f:then>
            <f:else>
                <v:variable.set name="settings.displayTablet" value='d-md-none'/>
            </f:else>
        </f:if>
        <f:if condition="{showOnTabletLandscape}">
            <f:then>
                <v:variable.set name="settings.displayTabletLandscape" value='d-lg-flex'/>
            </f:then>
            <f:else>
                <v:variable.set name="settings.displayTabletLandscape" value='d-lg-none'/>
            </f:else>
        </f:if>
        <f:if condition="{showOnDesktop}">
            <f:then>
                <v:variable.set name="settings.displayDesktop" value='d-xl-flex'/>
            </f:then>
            <f:else>
                <v:variable.set name="settings.displayDesktop" value='d-xl-none'/>
            </f:else>
        </f:if>
        <f:if condition="{showOnDesktopXl}">
            <f:then>
                <v:variable.set name="settings.displayDesktopXl" value='d-xxl-flex'/>
            </f:then>
            <f:else>
                <v:variable.set name="settings.displayDesktopXl" value='d-xxl-none'/>
            </f:else>
        </f:if>
        <f:if condition="{showOnDesktopXxl}">
            <f:then>
                <v:variable.set name="settings.displayDesktopXxl" value='d-xxxl-flex'/>
            </f:then>
            <f:else>
                <v:variable.set name="settings.displayDesktopXxl" value='d-xxxl-none'/>
            </f:else>
        </f:if>
        <f:if condition="{showOnDesktopXxxl}">
            <f:then>
                <v:variable.set name="settings.displayDesktopXxxl" value='d-xxxxl-flex'/>
            </f:then>
            <f:else>
                <v:variable.set name="settings.displayDesktopXxxl" value='d-xxxxl-none'/>
            </f:else>
        </f:if>
        <v:asset.style name="modallightcss" path="EXT:fluidbootstrap/Resources/Public/Page/Stylesheets/Css/ContentElements/ModalLight.css"/>
        <v:asset.script name="magnificjs" dependencies="jquery" path="EXT:fluidbootstrap/Resources/Public/Page/Javascript/MagnificPopup.min.js"/>
        <v:asset.script name="magnificcontentjs" dependencies="jquery, magnificjs" path="EXT:fluidbootstrap/Resources/Public/Page/Javascript/MagnificPopup/MagnificContent.js"/>
<!--        <v:asset.script name="magnificbgcss-{record.uid}" fluid="true">-->
<!--            -->
<!--        </v:asset.script>-->
        <f:if condition="{settings.modalBg} == 'bgimage'">
            {v:content.resources.fal(field: 'settings.modalBgImage') -> v:iterator.first() -> v:variable.set(name: 'modalBgImage')}
        </f:if>
        <v:asset.style name="modalboxcss-{record.uid}" fluid="true">
            .mfp-bg.modalbox-bg-<f:format.raw>{record.uid}</f:format.raw>.mfp-removing{opacity:0 !important}
            <f:if condition="{settings.modalBg} == 'bgcolor'">
                <f:then>
                    .mfp-bg.modalbox-bg-<f:format.raw>{record.uid}</f:format.raw>{
                    background-color:<f:format.raw>{settings.modalBgColor}</f:format.raw> !important;
                    opacity:<v:math.division b="100" a="{settings.modalBgOpacity}" /> !important;
                    }
                </f:then>
            </f:if>
            <f:if condition="{settings.modalBg} == 'bgimage'">
                <f:then>
                    .mfp-bg.modalbox-bg-<f:format.raw>{record.uid}</f:format.raw>{
                    background-image:url("<f:format.raw>{modalBgImage.url}</f:format.raw>") !important;
                    opacity:<v:math.division b="100" a="{settings.modalBgOpacity}" /> !important;
                    background-size:<f:format.raw>{settings.modalBgSize}</f:format.raw>;
                    background-repeat:<f:format.raw>{settings.modalBgRepeat}</f:format.raw>;
                    }
                </f:then>
            </f:if>
        </v:asset.style>

        <v:asset.style name="magnificcss-{record.uid}" fluid="true">
            #modalbox-<f:format.raw>{record.uid}</f:format.raw>{
            width:<f:format.raw>{settings.modalWidthMobile}</f:format.raw>vw;
            }
            #modalbox-<f:format.raw>{record.uid}</f:format.raw> .magnific-content-closer-wrap{
            top: <f:format.raw>{settings.modalSpaceMobile}</f:format.raw>px;
            }
            #modalbox-<f:format.raw>{record.uid}</f:format.raw> .mfp-content-content{
            margin: <f:format.raw>{settings.modalSpaceMobile}</f:format.raw>px 0;
            }
            @media(min-width:<f:format.raw>{settings.breakpointTablet}</f:format.raw>){
            #modalbox-<f:format.raw>{record.uid}</f:format.raw>{
            width:<f:format.raw>{settings.modalWidthTablet}</f:format.raw>vw;
            }
            #modalbox-<f:format.raw>{record.uid}</f:format.raw> .magnific-content-closer-wrap{
            top: <f:format.raw>{settings.modalSpaceTablet}</f:format.raw>px;
            }
            #modalbox-<f:format.raw>{record.uid}</f:format.raw> .mfp-content-content{
            margin: <f:format.raw>{settings.modalSpaceTablet}</f:format.raw>px 0;
            }
            }
            @media(min-width:<f:format.raw>{settings.breakpointTabletLandscape}</f:format.raw>){
            #modalbox-<f:format.raw>{record.uid}</f:format.raw>{
            width:<f:format.raw>{settings.modalWidthTabletLandscape}</f:format.raw>vw;
            }
            #modalbox-<f:format.raw>{record.uid}</f:format.raw> .magnific-content-closer-wrap{
            top: <f:format.raw>{settings.modalSpaceTabletLandscape}</f:format.raw>px;
            }
            #modalbox-<f:format.raw>{record.uid}</f:format.raw> .mfp-content-content{
            margin: <f:format.raw>{settings.modalSpaceTabletLandscape}</f:format.raw>px 0;
            }
            }
            @media(min-width:<f:format.raw>{settings.breakpointDesktop}</f:format.raw>){
            #modalbox-<f:format.raw>{record.uid}</f:format.raw>{
            width:<f:format.raw>{settings.modalWidthDesktop}</f:format.raw>vw;
            }
            #modalbox-<f:format.raw>{record.uid}</f:format.raw> .magnific-content-closer-wrap{
            top: <f:format.raw>{settings.modalSpaceDesktop}</f:format.raw>px;
            }
            #modalbox-<f:format.raw>{record.uid}</f:format.raw> .mfp-content-content{
            margin: <f:format.raw>{settings.modalSpaceDesktop}</f:format.raw>px 0;
            }
            }
            @media(min-width:<f:format.raw>{settings.breakpointDesktopXL}</f:format.raw>){
            #modalbox-<f:format.raw>{record.uid}</f:format.raw>{
            width:<f:format.raw>{settings.modalWidthDesktopXl}</f:format.raw>vw;
            }
            #modalbox-<f:format.raw>{record.uid}</f:format.raw> .magnific-content-closer-wrap{
            top: <f:format.raw>{settings.modalSpaceDesktopXl}</f:format.raw>px;
            }
            #modalbox-<f:format.raw>{record.uid}</f:format.raw> .mfp-content-content{
            margin: <f:format.raw>{settings.modalSpaceDesktopXl}</f:format.raw>px 0;
            }
            }
            @media(min-width:<f:format.raw>{settings.breakpointDesktopXXL}</f:format.raw>){
            #modalbox-<f:format.raw>{record.uid}</f:format.raw>{
            width:<f:format.raw>{settings.modalWidthDesktopXxl}</f:format.raw>vw;
            }
            #modalbox-<f:format.raw>{record.uid}</f:format.raw> .magnific-content-closer-wrap{
            top: <f:format.raw>{settings.modalSpaceDesktopXxl}</f:format.raw>px;
            }
            #modalbox-<f:format.raw>{record.uid}</f:format.raw> .mfp-content-content{
            margin: <f:format.raw>{settings.modalSpaceDesktopXxl}</f:format.raw>px 0;
            }
            }
        </v:asset.style>

        <f:render partial="Content/ModalLight/Standard" section="Element" arguments="{_all}"/>
    </f:section>

    <f:section name="Preview">
        <div style="background-color:#efefef; margin-bottom: 10px; padding: 10px;">
            <strong>Modalbox<br/></strong>
            <p>
                <i>Anzeige:</i>
                Mobil:<span style="font-size: 16px;"><f:if condition="{showOnMobile}"><f:then>&#10004;</f:then><f:else>&#10006;</f:else> </f:if></span> |
                Tablet:<span style="font-size: 16px;"><f:if condition="{showOnTablet}"><f:then>&#10004;</f:then><f:else>&#10006;</f:else> </f:if></span> |
                Tablet(landscape):<span style="font-size: 16px;"><f:if condition="{showOnTabletLandscape}"><f:then>&#10004;</f:then><f:else>&#10006;</f:else></f:if></span> |
                Desktop:<span style="font-size: 16px;"><f:if condition="{showOnDesktop}"><f:then>&#10004;</f:then><f:else>&#10006;</f:else></f:if></span> |
                Desktop (1440px):<span style="font-size: 16px;"><f:if condition="{showOnDesktopXl}"><f:then>&#10004;</f:then><f:else>&#10006;</f:else></f:if></span>|
                Desktop (1600px):<span style="font-size: 16px;"><f:if condition="{showOnDesktopXxl}"><f:then>&#10004;</f:then><f:else>&#10006;</f:else></f:if></span> |
                Desktop (1900px):<span style="font-size: 16px;"><f:if condition="{showOnDesktopXxxl}"><f:then>&#10004;</f:then><f:else>&#10006;</f:else></f:if></span><br/>
            </p>
        </div>
        <div style="background-color:#efefef; margin-bottom: 10px; padding: 10px;">
            <p>
                <f:if condition="{settings.modalLinkType} == '0' || {settings.modalLinkType} == '3'">
                    <i>Button Titel:</i> {settings.modalButtonTitle}
                </f:if>
                <f:if condition="{settings.modalLinkType} == '1'">
                    <i>Link Titel:</i> {settings.modalLinkTitle}
                </f:if>
                <f:if condition="{settings.modalLinkType} == '2'">
                    {v:content.resources.fal(field: 'settings.modalImage', record: '{record}') -> v:iterator.first() -> v:variable.set(name: 'image')}
                    <i>Link-Bild</i>:
                    <f:image src="{image.id}" treatIdAsReference="1" alt="{image.title}" height="50px"/>
                </f:if>
            </p>

        </div>
    </f:section>
</div>