<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="referenzElement"
                   label="Referenz Element"
                   description="Referenz Element mit Inhalten in einer Modalbox">
            <flux:form.option.icon value="EXT:fluidbootstrap/Resources/Public/Icons/Content/ModalLight.png"/>
            <flux:form.option.group value="fluxcontent"/>
            <flux:form.sheet name="settings" label="Settings">
                <flux:field.input name="title" label="Titel"/>
                <flux:field.checkbox name="hoverAnimation" label="Enable Hover Animation"/>
                <flux:field.select name="openAnimation"
                                   label="Referenz Open/Close Animation"
                                   items="{
						   0:{0:'default', 1:'zoom-in'},
						   1:{0:'Move horizontal', 1:'move-horizontal'},
						   2:{0:'Move from top', 1:'move-from-top'},
						   3:{0:'3d unfold', 1:'3d-unfold'},
						   4:{0:'Zoom-out', 1:'zoom-out'},
						   5:{0:'Newspaper', 1:'newspaper'}
						   }"/>
                <flux:field.inline.fal name="image" maxItems="1" minItems="1" required="1" allowedExtensions="gif,jpg,jpeg,png,tiff,tif" label="Teaserbild"/>
                <flux:field.inline.fal name="logo" maxItems="1" minItems="1" required="1" allowedExtensions="gif,jpg,jpeg,png,tiff,tif" label="Firmenlogo"/>

                <flux:field.select name="bgColor" items="none,{settings.bgColorClassesForRow}" default="none" label="Hintergrundfarbe"/>
                <flux:field.select name="textColor" items="standard,{settings.textColorClasses}" default="standard" label="Text Farbe"/>
                <flux:field.text name="teaser" enableRichText="0" label="Teaser for Hover Animation"/>
                <flux:field.text name="text" enableRichText="1" label="Text"/>
            </flux:form.sheet>
            <flux:form.sheet name="productImagesConf" label="Slider Images (Products)">
                <flux:field.inline.fal name="images"
                                       collapseAll="1"
                                       expandSingle="1"
                                       maxItems="20" minItems="1" required="1" allowedExtensions="gif,jpg,jpeg,png,tiff,tif" label="Produktbild/er"/>
            </flux:form.sheet>
            <flux:form.sheet name="carouselSettings" label="Slider Settings">
                <flux:field.select name="settings.carousel.sliderEffect" items="slide,fade" default="fade" label="Slides Animation Type"/>
                <flux:field.checkbox name="settings.carousel.quickselect" default="1" label="Show Direct Select"/>
                <flux:field.select name="settings.carousel.dotsPosition"
                                   label="Direct Select Position"
                                   items="{
						   0:{0:'Bottom', 1:'dots-bottom'},
						   1:{0:'Top', 1:'dots-top'}
						   }"/>
                <flux:field.checkbox name="settings.carousel.arrows" default="1" label="Show Arrows"/>
                <flux:field.checkbox name="settings.carousel.autostart" label="Enable Autostart"/>
                <flux:field.input name="settings.carousel.interval" default="5000" eval="int,trim" label="Autostart Intervall"/>
                <flux:field.input name="settings.carousel.slidesToShow" default="1" eval="int,trim" label="Slides to Show"/>
                <flux:field.input name="settings.carousel.slidesToScroll" default="1" eval="int,trim" label="Slides to Scroll"/>

                <flux:field.input name="settings.carousel.width" default="" eval="int,trim" label="Slider with (Default = Parent Width)"/>
                <flux:field.select name="settings.carousel.imageSize" label="Image Size" default="contain"
                                   items="{
						   0:{0:'LLL:EXT:fluidbootstrap/Resources/Private/Language/locallang.xlf:pleaseChoose',1:'default'},
						   1:{0:'LLL:EXT:fluidbootstrap/Resources/Private/Language/locallang.xlf:flux.carousel.fields.settings.carousel.imageSize.cover', 1:'cover'},
						   2:{0:'LLL:EXT:fluidbootstrap/Resources/Private/Language/locallang.xlf:flux.carousel.fields.settings.carousel.imageSize.contain', 1:'contain'}
						   }"/>

                <flux:field.input name="settings.carousel.height" default="400" eval="int,trim" label="Slider min Height"/>
                <flux:field.select name="settings.carousel.viewportParentHeight"
                                   label="Select automatic Height"
                                   default="default"
                                   items="{
						   0:{0:'Use Slider min Height', 1:'min-height'},
						   1:{0:'Default', 1:'default'}
						   }"/>
                <flux:field.checkbox name="settings.carousel.overlay" label="Show Overlay"/>
                <flux:field.checkbox name="settings.carousel.elementTitle" label="Show Image Title, Description, Teaser" default="1"/>
            </flux:form.sheet>
            <flux:form.sheet name="SliderMagnific" label="Slider Modalbox Settings">
                <flux:field.checkbox name="settings.carousel.magnific" label="Enable Modalbox for Slides" default="1"/>
                <flux:field.select name="settings.carousel.sliderOpenAnimation"
                                   label="Slider Open/Close Animation"
                                   items="{
						   0:{0:'default', 1:'zoom-in'},
						   1:{0:'Move horizontal', 1:'move-horizontal'},
						   2:{0:'Move from top', 1:'move-from-top'},
						   3:{0:'3d unfold', 1:'3d-unfold'},
						   4:{0:'Zoom-out', 1:'zoom-out'},
						   5:{0:'Newspaper', 1:'newspaper'}
						   }"/>
                <flux:field.checkbox name="settings.carousel.showModalArrows" label="Show Arrows" />
                <flux:field.checkbox name="settings.carousel.showModalDirectSelect" label="Show Direct Select" />
                <flux:field.select name="settings.carousel.modalDirectSelectColorClass" label="Direct Select Color Class" items="{settings.textColorClasses}"/>

                <flux:field.checkbox name="settings.carousel.showModalOpener" label="Show additional Opener beside"/>
                <flux:field.select name="settings.carousel.modalOpenerPosition"
                                   label="Select Opener Position"
                                   items="{
						   0:{0:'Left', 1:'pos-left'},
						   1:{0:'Right', 1:'pos-right'}
						   }"/>
                <flux:field.select name="settings.carousel.modalOpenerColor" label="Opener Color" items="{settings.textColorClasses}"/>
                <flux:field.checkbox name="settings.carousel.modalElementTitle" label="Show Elements Title" default="1"/>
                <flux:field.checkbox name="settings.carousel.modalElementDescription" label="Show Elements Description" default="1"/>
                <flux:field.checkbox name="settings.carousel.modalElementTeaser" label="Show Elements Teaser" default="1"/>
            </flux:form.sheet>
        </flux:form>
    </f:section>

    <f:section name="Preview">
        <strong>Referenz Element</strong><br/>
        {v:content.resources.fal(field: 'logo', record: '{record}') -> v:iterator.first() -> v:variable.set(name: 'image')}
        <f:if condition="{image.id}">
            Hersteller:<br/>
            <f:image src="{image.id}" treatIdAsReference="1" alt="{image.title}" width="100c"/><br/>
        </f:if>
    </f:section>

    <f:section name="Main">
        <v:asset.script name="refelementjs-{record.uid}" dependencies="jquery, slickslider, slicksliderplugin" fluid="true" >
            $(document).ready(function(){
            $('#ref-link-{record.uid}').on('click', function(){
            $('.carousel-{record.uid}').slick('refresh');
            const links = $('.carousel-{record.uid}').find('.image-carousel-modal-opener-link');
            $(links).each(function(){
            $(this).on('click',function(e){
            e.preventDefault();
            const targetTmp = $(this).attr('data-target');
            const target = $('.carousel-{record.uid}').find(targetTmp);
            $.magnificPopup.close();
            setTimeout(function(){
            $(target).trigger('click');
            },600)
            });
            });
            });
            });
        </v:asset.script>

        <v:variable.set name="modalDelay" value="600" />
        <v:variable.set name="notFilling" value="1" />

        <a href="#ref-modal-{record.uid}" class="magnific-content ref-link" id="ref-link-{record.uid}" data-effect="mfp-{openAnimation}">
            <div class="ref-element {f:if(condition: '{hoverAnimation}', then: 'hover-animation')}">
                <div class="ref-overlay">
                    <div class="ref-image-wrap">
                        <f:for each="{v:content.resources.fal(field: 'image')}" as="image" iteration="i">
                            <picture>
                                <!--[if IE 9]><video class="d-none"><![endif]-->
                                <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="default" />' media="(min-width: 1200px)" />
                                <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="tablet" maxWidth="1200" />' media="(min-width: 992px)" />
                                <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="mobile" maxWidth="768" />' media="(min-width: 768px)" />
                                <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="mobile" maxWidth="767" />' media="(max-width: 767px)"/>
                                <!--[if IE 9]></video><![endif]-->

                                <!---Fallback--->
                                <img class="img-fluid" id="responsive-img-{record.uid}-{i.cycle}" srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="default"/>' alt="{image.alternative}" longdesc="{image.description}" title="{image.title}" />
                            </picture>
                        </f:for>
                    </div>
                    <div class="ref-logo-wrap">
                        <f:for each="{v:content.resources.fal(field: 'logo')}" as="image" iteration="i">
                            <picture>
                                <!--[if IE 9]><video class="d-none"><![endif]-->
                                <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="default" />' media="(min-width: 1200px)" />
                                <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="tablet" maxWidth="1200" />' media="(min-width: 992px)" />
                                <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="mobile" maxWidth="768" />' media="(min-width: 768px)" />
                                <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="mobile" maxWidth="767" />' media="(max-width: 767px)"/>
                                <!--[if IE 9]></video><![endif]-->

                                <!---Fallback--->
                                <img class="img-fluid ref-logo-short" id="responsive-img-{record.uid}-{i.cycle}" srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="default"/>' alt="{image.alternative}" longdesc="{image.description}" title="{image.title}" />
                            </picture>
                        </f:for>
                        <div class="ref-lupe-wrap {f:if(condition: '{hoverAnimation}', then: 'd-xl-none')} {enableMagnific}">
                            <i class="icon-maximize"></i>
                        </div>
                    </div>
                </div>
                <f:if condition="{hoverAnimation}">
                    <div class="ref-content row no-gutters">
                        <div class="ref-lupe-wrap">
                            <i class="icon-maximize"></i>
                        </div>
                        <f:for each="{v:content.resources.fal(field: 'produktImage')}" as="image" iteration="i">
                            <picture class="text-center col-12 flex flex-align-center flex-justify-center">
                                <!--[if IE 9]><video class="d-none"><![endif]-->
                                <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image2.crop}" cropVariant="default" />' media="(min-width: 1200px)" />
                                <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image2.crop}" cropVariant="tablet" maxWidth="1200" />' media="(min-width: 992px)" />
                                <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image2.crop}" cropVariant="mobile" maxWidth="768" />' media="(min-width: 768px)" />
                                <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image2.crop}" cropVariant="mobile" maxWidth="767" />' media="(max-width: 767px)"/>
                                <!--[if IE 9]></video><![endif]-->
                                <!---Fallback--->
                                <img class="img-fluid" id="responsive-img2-{record.uid}-{i.cycle}" srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="default"/>' alt="{image.alternative}" longdesc="{image.description}" title="{image.title}" />
                            </picture>
                        </f:for>
                        <div class="ref-text col-12">
                            <div class="ref-text-text {bgColor} {f:if(condition:'{textColor} != \'standard\'', then:'text-{textColor}')} flex flex-align-center flex-justify-center">
                                <div>
                                    <p class="ref-title-short text-center font-bold-italic">{title}</p>
                                    <p class="font-italic text-center">
                                    <span class="ref-text-short ">
                                        <f:format.raw>{teaser}</f:format.raw>
                                    </span>
                                        ... mehr erfahren
                                    </p>
                                </div>

                            </div>
                        </div>
                    </div>
                </f:if>
            </div>
        </a>

        <div class="mfp-hide ref-popup mfp-with-anim" id="ref-modal-{record.uid}">
            <a href="#" class="magnific-content-closer"><i class="icon-close"></i></a>
            <div class="row no-gutters h-100">
                <div class="col-12 col-lg-7 popup-teaser-wrap order-2 order-lg-1">
                    <f:for each="{v:content.resources.fal(field: 'image')}" as="image" iteration="i">
                        <div class="responsive-image-container h-100 w-100">
                            <div class="responsive-image-wrap ref-el-img-teaser">
                                <picture class="d-none">
                                    <!--[if IE 9]><video class="d-none"><![endif]-->
                                    <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image2.crop}" cropVariant="default" />' media="(min-width: 1200px)" />
                                    <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image2.crop}" cropVariant="tablet" maxWidth="1200" />' media="(min-width: 992px)" />
                                    <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image2.crop}" cropVariant="mobile" maxWidth="768" />' media="(min-width: 768px)" />
                                    <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image2.crop}" cropVariant="mobile" maxWidth="767" />' media="(max-width: 767px)"/>
                                    <!--[if IE 9]></video><![endif]-->

                                    <!---Fallback--->
                                    <img class="img-fluid responsive-img-for-background" id="responsive-img2-{record.uid}-{i.cycle}" srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="default"/>' alt="{image.alternative}" longdesc="{image.description}" title="{image.title}" />
                                </picture>
                            </div>
                        </div>
                    </f:for>
                </div>
                <div class="col-12 col-lg-5 popup-carousel-wrap order-6 order-lg-2">
                    <f:render partial="Content/ImageCarousel" section="Carousel" arguments="{_all}" />
                </div>
                <div class="col-5 col-lg-3 popup-logo-wrap order-1 order-lg-3">
                    <div class="padding-medium">
                        <f:for each="{v:content.resources.fal(field: 'logo')}" as="image" iteration="i">
                            <picture>
                                <!--[if IE 9]><video class="d-none"><![endif]-->
                                <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="default" />' media="(min-width: 1200px)" />
                                <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="tablet" maxWidth="1200" />' media="(min-width: 992px)" />
                                <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="mobile" maxWidth="768" />' media="(min-width: 768px)" />
                                <source srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="mobile" maxWidth="767" />' media="(max-width: 767px)"/>
                                <!--[if IE 9]></video><![endif]-->

                                <!---Fallback--->
                                <img class="img-fluid ref-logo-short" id="responsive-img-{record.uid}-{i.cycle}" srcset='<f:uri.image treatIdAsReference="1" src="{image.id}" crop="{image.crop}" cropVariant="default"/>' alt="{image.alternative}" longdesc="{image.description}" title="{image.title}" />
                            </picture>
                        </f:for>
                    </div>
                </div>
                <div class="col-12 col-lg-4 order-lg-5 order-4 {bgColor} text-{textColor} flex flex-justify-center">
                    <p class="font-bold-italic text-big padding-medium popup-title">
                        {title}
                    </p>
                </div>
                <div class="col-12 col-lg-5 order-lg-6 order-5 {bgColor} text-{textColor}">
                    <div class="padding-medium">
                        <f:format.raw>{text}</f:format.raw>
                    </div>
                </div>
            </div>
        </div>
    </f:section>

</div>