<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
     xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
     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">
        <v:variable.set name="settings" value="{v:variable.typoscript(path: 'plugin.tx_fluidbootstrap.settings')}" />
        <v:variable.set name="numberOfColumns" value="{f:if(condition: settings.gridColumns, then: settings.gridColumns, else: 12}" />
        <flux:form id="masonry">
            <flux:form.option.icon value="EXT:fluidbootstrap/Resources/Public/Icons/Content/Row.png"/>
            <flux:form.option.group value="fluxlayout"/>
            <flux:form.sheet name="masonrySettings" label="Einstellungen">
                <flux:field.input name="class" eval="trim" label="Zusätzliche Klassen"/>
                <flux:field.select name="columnsMobile"
                                   items="{
                                           0:{0:'1', 1:'col-12'},
                                           1:{0:'2', 1:'col-6'},
                                           2:{0:'3', 1:'col-4'},
                                           3:{0:'4', 1:'col-3'},
                                           4:{0:'6', 1:'col-2'}}"
                                   default="col-12"
                                   label="Spalten Mobil"/>
                <flux:field.select name="columnsTablet"
                                   items="{
                                           0:{0:'1', 1:'col-md-12'},
                                           1:{0:'2', 1:'col-md-6'},
                                           2:{0:'3', 1:'col-md-4'},
                                           3:{0:'4', 1:'col-md-3'},
                                           4:{0:'6', 1:'col-md-2'}}"
                                   default="col-md-12"
                                   label="Spalten Tablet"/>
                <flux:field.select name="columnsTabletLandscape"
                                   items="{
                                           0:{0:'1', 1:'col-lg-12'},
                                           1:{0:'2', 1:'col-lg-6'},
                                           2:{0:'3', 1:'col-lg-4'},
                                           3:{0:'4', 1:'col-lg-3'},
                                           4:{0:'6', 1:'col-lg-2'}}"
                                   default="col-lg-6"
                                   label="Spalten Tablet Landscape"/>
                <flux:field.select name="columnsDesktop"
                                   items="{
                                           0:{0:'1', 1:'col-xl-12'},
                                           1:{0:'2', 1:'col-xl-6'},
                                           2:{0:'3', 1:'col-xl-4'},
                                           3:{0:'4', 1:'col-xl-3'},
                                           4:{0:'6', 1:'col-xl-2'}}"
                                   default="col-xl-4"
                                   label="Spalten Desktop"/>
                <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="Textfarbe"/>
            </flux:form.sheet>
            <flux:form.sheet name="masonryElements" label="Elemente">
                <flux:form.section name="elements">
                    <flux:form.object name="element" label="Element">
                        <flux:field.select name="padding" items="none, extra-small, small, medium, large, extra-large" default="extra-small" label="Innenabstand (padding)"/>
                        <flux:field.input name="elementClasses"
                                          label="Zusätzliche Klassen"/>
                        <flux:field.select name="bgColor"
                                           items="none, {f:if(condition:'{settings.bgColorClassesForCol}', then:'{settings.bgColorClassesForCol}', else:'{settings.bgColorClassesForRow}')}"
                                           label="Hintergrundfarbe"/>
                        <flux:field.select name="textColor"
                                           items="none, {settings.textColorClasses}"
                                           label="Textfarbe"/>
                        <flux:form.object.columnPosition/>
                    </flux:form.object>
                </flux:form.section>
                <flux:grid>
                    <v:condition.type.isArray value="{elements}">
                        <f:for each="{elements}" as="sectionObject" iteration="iteration">
                            <flux:grid.row>
                                <flux:grid.column name="element{sectionObject.element.colPos}" label="Element-{iteration.index + 1}" colPos="{sectionObject.element.colPos}"/>
                            </flux:grid.row>
                        </f:for>
                    </v:condition.type.isArray>
                </flux:grid>
            </flux:form.sheet>
        </flux:form>
    </f:section>
    <f:section name="renderMasonry">
        <v:condition.type.isArray value="{elements}">
            <div id="masonry-{record.uid}"
                 class="text-{textColor} {f:if(condition: '{bgColor} !=\'none\'', then: '{bgColor}' )}">
                <div class="mansory-sizer {columnsMobile} {columnsTablet} {columnsTabletLandscape} {columnsDesktop}"></div>
                <f:for each="{elements}" as="sectionObject" iteration="iteration">
                    <div class="masonry-card  {columnsMobile} {columnsTablet} {columnsTabletLandscape} {columnsDesktop} padding-{sectionObject.element.padding} {f:if(condition: '{sectionObject.element.bgColor} !=\'none\'', then: '{sectionObkect.element.bgColor}' )} {f:if(condition: '{sectionObject.element.textColor} !=\'none\'', then: '{sectionObkect.element.textColor}' )}">
                        <flux:content.render area="element{sectionObject.element.colPos}" />
                    </div>
                </f:for>
            </div>
        </v:condition.type.isArray>
    </f:section>

    <f:section name="Main">
        <v:asset.script name="masonry-js" dependencies="jquery" movable="true" path="EXT:fluidbootstrap/Resources/Public/Page/Javascript/Masonry.min.js" />
        <v:asset.script name="masonry-{record.uid}" dependencies="masonry-js" movable="true" fluid="true">
            $( window).on ('load', function(){
            var el = '#masonry-<f:format.raw>{record.uid}</f:format.raw>';
            $(el).masonry({
            itemSelector: '.masonry-card',
            columnWidth: '.mansory-sizer',
            percentPosition: true,
            horizontalOrder: false,
            isOriginLeft: true,
            });
            })
        </v:asset.script>
        <f:render section="renderMasonry" arguments="{_all}" optional="true"/>
    </f:section>

    <f:section name="Preview">
        <f:if condition="{columnsMobile} == 'col-12'"><v:variable.set name="prevMobile" value="1" /></f:if>
        <f:if condition="{columnsMobile} == 'col-6'"><v:variable.set name="prevMobile" value="2" /></f:if>
        <f:if condition="{columnsMobile} == 'col-4'"><v:variable.set name="prevMobile" value="3" /></f:if>
        <f:if condition="{columnsMobile} == 'col-3'"><v:variable.set name="prevMobile" value="4" /></f:if>
        <f:if condition="{columnsMobile} == 'col-2'"><v:variable.set name="prevMobile" value="6" /></f:if>
        <f:if condition="{columnsTablet} == 'col-md-12'"><v:variable.set name="prevTablet" value="1" /></f:if>
        <f:if condition="{columnsTablet} == 'col-md-6'"><v:variable.set name="prevTablet" value="2" /></f:if>
        <f:if condition="{columnsTablet} == 'col-md-4'"><v:variable.set name="prevTablet" value="3" /></f:if>
        <f:if condition="{columnsTablet} == 'col-md-3'"><v:variable.set name="prevTablet" value="4" /></f:if>
        <f:if condition="{columnsTablet} == 'col-md-2'"><v:variable.set name="prevTablet" value="6" /></f:if>
        <f:if condition="{columnsTabletLandscape} == 'col-lg-12'"><v:variable.set name="prevTabletLandscape" value="1" /></f:if>
        <f:if condition="{columnsTabletLandscape} == 'col-lg-6'"><v:variable.set name="prevTabletLandscape" value="2" /></f:if>
        <f:if condition="{columnsTabletLandscape} == 'col-lg-4'"><v:variable.set name="prevTabletLandscape" value="3" /></f:if>
        <f:if condition="{columnsTabletLandscape} == 'col-lg-3'"><v:variable.set name="prevTabletLandscape" value="4" /></f:if>
        <f:if condition="{columnsTabletLandscape} == 'col-lg-2'"><v:variable.set name="prevTabletLandscape" value="6" /></f:if>
        <f:if condition="{columnsDesktop} == 'col-xl-12'"><v:variable.set name="prevDesktop" value="1" /></f:if>
        <f:if condition="{columnsDesktop} == 'col-xl-6'"><v:variable.set name="prevDesktop" value="2" /></f:if>
        <f:if condition="{columnsDesktop} == 'col-xl-4'"><v:variable.set name="prevDesktop" value="3" /></f:if>
        <f:if condition="{columnsDesktop} == 'col-xl-3'"><v:variable.set name="prevDesktop" value="4" /></f:if>
        <f:if condition="{columnsDesktop} == 'col-xl-2'"><v:variable.set name="prevDesktop" value="6" /></f:if>

        <div style="background-color:#efefef; margin-bottom: 10px; padding: 10px;">
            <p><strong>Masonry</strong></p>
            <p><i>Spalten Mobil</i>: {prevMobile} |
            <i>Spalten Tablet</i>: {prevTablet} |
            <i>Spalten Tablet (landscape)</i>: {prevTabletLandscape} |
                <i>Spalten Desktop</i>: {prevDesktop}</p>
            <v:condition.type.isArray value="{elements}">
                <f:else>
                    <p style="color:red">
                        <b>! Bitte mindestens legen Sie mindestens ein Element an.</b>
                    </p>
                </f:else>
            </v:condition.type.isArray>
        </div>
    </f:section>
</div>