{namespace eck=Eckpunkt\Fluidbootstrap\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="carouselContent">
            <flux:form.option.icon value="EXT:fluidbootstrap/Resources/Public/Icons/Content/Carousel.png"/>
            <flux:form.option.group value="fluxcontent"/>
            <flux:form.sheet name="carouselSettings" label="Carousel Einstellungen">
                <flux:field.select name="settings.dotsStyle"
                                   default="default"
                                   label="Slides Direktauswahl Typ"
                                   items="{
                                           0:{0:'default (none)', 1:'default'},
                                           1:{0:'Punkte', 1:'dots'},
                                           2:{0:'Zahlen', 1:'numbers'},
                                           3:{0:'Dropdown Auswahlfeld', 1:'dropdown'}}"/>
                <flux:field.checkbox name="settings.arrows" default="1" label="Zeige Rechts/Links Navigation (arrows)"/>
                <flux:field.select name="settings.fade"
                                   default="0"
                                   label="Animation Typ"
                                   items="{
                                           0:{0:'Verschieben (sliding)', 1:'0'},
                                           1:{0:'Überblenden (fading)', 1:'1'}}"/>
                <flux:field.input name="settings.speed" default="300" eval="int,trim" label="Animations Geschwindigkeit (ms)"/>
                <flux:field.checkbox name="settings.autoplay" label="Autoplay"/>
                <flux:field.input name="settings.autoplaySpeed" default="3000" eval="int,trim" label="Autoplay Geschwindigkeit (ms)"/>
                <flux:field.checkbox name="settings.equal" default="1" label="Gleiche Höhe für alle Slides" />
                <flux:field.checkbox name="settings.infinite" default="1" label="Unendlich (Slides in Schleife)" />
                <flux:field.input name="settings.maxHeight"  eval="int,trim" default="NULL" label="Maximale Höhe (px)"/>
            </flux:form.sheet>
            <flux:form.sheet name="carouselElements" label="Elemente (slides)">
                <flux:form.section name="elements">
                    <flux:form.object name="element">
                        <flux:field.input name="title" eval="trim" label="Titel nur Backend (wird bei Direktauswahl Typ Dropdown verwendet)" required="true" />
                        <flux:field.select name="bgColor" items="default, {settings.bgColorClassesForRow}" default="default" label="Hintergrundfarbe"/>
                        <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="{sectionObject.element.title}" 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="Main">
        <v:asset.script name="slicksliderjs" dependencies="jquery" path="EXT:fluidbootstrap/Resources/Public/Page/Javascript/Slickslider.min.js"/>
        <v:condition.type.isArray value="{elements}">
            <v:variable.set name="dots" value="false" />
            <f:if condition="{settings.maxHeight} > 0">
                <f:then>
                    <v:variable.set name="carouselHeight" value="max-height:{settings.carousel.maxHeight}px;" />
                </f:then>
                <f:else>
                    <v:variable.set name="carouselHeight" value="" />
                </f:else>
            </f:if>
            <eck:slickSliderInlineJs recordUid="{record.uid}" settings="{settings}" />
            <f:if condition="{settings.dotsStyle} != 'default'">
                <f:if condition="{settings.dotsStyle} == 'dots' || {settings.dotsStyle} == 'numbers'">
                    <f:render partial="Content/Carousel/DirectNavigations/DotsNavigation" section="Navigation" arguments="{uid:record.uid, elements:elements, type:settings.dotsStyle}" />
                </f:if>
                <f:if condition="{settings.dotsStyle} == 'dropdown'">
                    <f:render partial="Content/Carousel/DirectNavigations/DropdownNavigation" section="Navigation" arguments="{uid:record.uid, elements:elements}" />
                </f:if>
            </f:if>
            <div id="slick-wrap-{record.uid}" class="slick-slider content-carousel content-carousel-{record.uid} eckpunkt-slickslider {f:if(condition:'{settings.dotsStyle} == \'dropdown\'', then:' slick-slider-dropdown')}">
                <f:for each="{elements}" as="sectionObject" iteration="i">
                    <div class="carousel-height" style="{carouselHeight}">
                        <div class="slider-item"  id="slider-item-{record.uid}-{i.cycle}">
                            <flux:content.render area="element-{sectionObject.element.colPos}" />
                        </div>
                    </div>
                </f:for>
            </div>
        </v:condition.type.isArray>
    </f:section>
    <f:section name="Preview">
        <div style="background-color:#efefef; margin-bottom: 10px; padding: 10px;">
            <p><strong>Carousel für Inhalte<br/></strong></p>
            <v:condition.type.isArray value="{elements}">
                <f:else>
                    <p style="color:red">
                        <b>! Bitte mindestens legen Sie mindestens ein Element (slide) an.</b>
                    </p>
                </f:else>
            </v:condition.type.isArray>
        </div>
    </f:section>
</div>