<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="accordion">
            <flux:form.option.icon value="EXT:fluidbootstrap/Resources/Public/Icons/Content/Accordion.png"/>
            <flux:form.option.group value="fluxcontent"/>
            <flux:form.sheet name="tabsSettings" label="Einstellungen">
                <flux:field.select name="settings.tabsBgColor" items="none,{settings.bgColorClassesForRow}" default="none" label="Hintergrundfarbe Panel-Kopf (global)"/>
                <flux:field.select name="settings.tabsTextColor" items="{settings.textColorClasses}" label="Textfarbe Panel-Kopf (global)"/>
                <flux:field.select name="settings.tabsIconColor" items="{settings.textColorClasses}" label="Iconfarbe Panel-Kopf (global)"/>
                <flux:field.select name="settings.tabsContentBgColor" items="none,{settings.bgColorClassesForRow}" default="none" label="Hintergrundfarbe Panel-Inhalt (global)"/>
                <flux:field.select name="settings.tabsContentTextColor" items="{settings.textColorClasses}" label="Textfarbe Panel-Inhalt (global)"/>
                <flux:field.select name="settings.tabsPaddingLR" items="default, none, extra-small, small, medium, large, extra-large" default="none" label="Innenabstand rechts/links (padding global)"/>
                <flux:field.select name="settings.tabsPaddingTB" items="default, none, extra-small, small, medium, large, extra-large" default="none" label="Innenabstand oben/unten (padding global)"/>
                <flux:field.checkbox name="settings.tabsAccScrollWithoutBar" default="0" label="Scrollbarer Accordioninhalt" requestUpdate="true"/>
                <flux:field.input name="settings.tabsAccHeightMobile" eval="int" label="Höhe scrollbarer Accordioninhalt" required="true" displayCond="FIELD:settings.tabsAccScrollWithoutBar:=:1"/>
                <flux:field.input name="settings.tabsJumperId" eval="trim" label="Eindeutige Sprungmarke"/>
            </flux:form.sheet>
            <flux:form.sheet name="panelSettings" label="Elemente (panels)">
                <flux:form.section name="settings.panels" label="Elemente">
                    <flux:form.object name="panel">
                        <flux:field.checkbox name="active" label="Nach laden aktiv"/>
                        <flux:field.checkbox name="enableRte" requestUpdate="true" label="Aktiviere Text-Editor für Titel" default="0"/>
                        <flux:field.input name="title" label="Titel" required="true" displayCond="FIELD:enableRte:=:0"/>
                        <flux:field.text name="titleHTML" label="Titel" required="true" displayCond="FIELD:enableRte:=:1" enableRichText="true"/>
                        <flux:field.select name="tabBgColor" items="global,{settings.bgColorClassesForRow}" default="global" label="Hintergrundfarbe Panel-Kopf (überschreibt globalen Wert)"/>
                        <flux:field.select name="tabTextColor" items="global, {settings.textColorClasses}" default="global" label="Textfarbe Panel-Kopf (überschreibt globalen Wert)"/>
                        <flux:field.select name="tabIconColor" items="global, {settings.textColorClasses}" default="global" label="Iconfarbe Panel-Kopf (überschreibt globalen Wert)"/>
                        <flux:field.select name="tabContentBgColor" items="global,{settings.bgColorClassesForRow}" default="global" label="Hintergrundfarbe Panel-Inhalt (überschreibt globalen Wert)"/>
                        <flux:field.select name="tabContentTextColor" items="global, {settings.textColorClasses}" default="global" label="Textfarbe Panel-Inhalt (überschreibt globalen Wert)"/>
                        <flux:field.select name="tabPaddingLR" items="global, default, none, extra-small, small, medium, large, extra-large" default="global" label="Innenabstand rechts/links (überschreibt padding global)"/>
                        <flux:field.select name="tabPaddingTB" items="global,default, none, extra-small, small, medium, large, extra-large" default="global" label="Innenabstand oben/unten (überschreibt padding global)"/>
                        <flux:form.object.columnPosition/>
                    </flux:form.object>
                </flux:form.section>
                <flux:grid>
                    <v:condition.type.isArray value="{settings.panels}">
                        <f:for each="{settings.panels}" as="sectionObject" iteration="iteration">
                            <flux:grid.row>
                                <flux:grid.column name="panel{sectionObject.panel.colPos}" label="Titel: {sectionObject.panel.title -> f:format.stripTags()}" colPos="{sectionObject.panel.colPos}"/>
                            </flux:grid.row>
                        </f:for>
                    </v:condition.type.isArray>
                </flux:grid>
            </flux:form.sheet>
        </flux:form>
    </f:section>
    <f:section name="Main">
        <v:condition.type.isArray value="{settings.panels}">
            <f:render partial="Content/Accordion/Accordion" section="Element" arguments="{_all}"/>
        </v:condition.type.isArray>
    </f:section>
    <f:section name="Preview">
        <div style="background-color:#efefef; margin-bottom: 10px; padding: 10px;">
            <p><strong>Accordion (collapse)<br/></strong></p>
            <v:condition.type.isArray value="{settings.panels}">
                <f:else>
                    <p style="color:red">
                        <b>! Bitte mindestens legen Sie mindestens ein Element (panel) an.</b>
                    </p>
                </f:else>
            </v:condition.type.isArray>
        </div>
    </f:section>
</div>