<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="pills">
            <flux:form.option.icon value="EXT:fluidbootstrap/Resources/Public/Icons/Content/Accordion.png"/>
            <flux:form.option.group value="fluxcontent"/>
            <flux:form.sheet name="pillsSettings" label="Einstellungen">
                <flux:field.input name="settings.pillsJumperId" eval="trim" label="Eindeutige Sprungmarke"/>
                <flux:field.select name="settings.pillsPosition"
                                   label="Pills Position"
                                   items="{
                                   0:{0:'links', 1: 'left'},
                                   1:{0:'rechts', 1: 'right'},
                                   2:{0:'oben', 1: 'top'},
                                   3:{0:'unten', 1: 'bottom'}
                                   }"/>
                <flux:field.select items="{settings.buttonStyles}"
                                   name="settings.PillsStyle" label="Pills Style global (gilt für alle Pills, kann überschrieben werden)"/>
                <flux:field.select items="{settings.buttonStyles}"
                                   name="settings.PillsStyleActive" label="Pills Style für Status aktiv global (gilt für alle Pills, kann überschrieben werden)"/>
                <flux:field.select name="settings.PillsContentPadding" items="none, extra-small, small, medium, large, extra-large" default="none" label="Innenabstand Elemente (padding, gilt für alle Elemente, kann überschrieben werden)"/>
            </flux:form.sheet>
            <flux:form.sheet name="pillSettings" label="Elemente (pills)">
                <flux:form.section name="pills" label="Elemente">
                    <flux:form.object name="pill">
                        <flux:field.input name="title" label="Titel"/>
                        <flux:field.checkbox name="active" label="aktiv"/>
                        <flux:field.select name="ContentPadding" items="global, none, extra-small, small, medium, large, extra-large" default="global" label="Innenabstand Elemente (padding, Überschreibt globalen Wert)"/>
                        <flux:field.select items="global, {settings.buttonStyles}"
                                           name="Style" label="Pills Style (überschreibt globalen Wert)"/>
                        <flux:field.select items="global, {settings.buttonStyles}"
                                           name="StyleActive" label=" Pills Style für Status aktiv (überschreibt globalen Wert)"/>
                        <flux:form.object.columnPosition/>
                    </flux:form.object>
                </flux:form.section>
                <flux:grid>
                    <v:condition.type.isArray value="{pills}">
                        <f:for each="{pills}" as="sectionObject" iteration="iteration">
                            <flux:grid.row>
                                <flux:grid.column name="pill{sectionObject.pill.colPos}" label="Inhalt-{iteration.cycle}" colPos="{sectionObject.pill.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="{pills}">
            <div class="pills-wrap d-flex{f:if(condition: '{settings.pillsPosition} ==\'bottom\' || {settings.pillsPosition} ==\'top\'', then: ' flex-column')}{f:if(condition: '{settings.pillsPosition} == \'right\'', then:' justify-content-between')}">
                <f:if condition="{settings.pillsPosition} == 'left' || {settings.pillsPosition} == 'top'">
                    <div class="pills-nav">
                        <f:render partial="Content/Pills/PillsNavigation" arguments="{_all}" section="Element"/>
                    </div>
                </f:if>
                <div class="pills-content tab-content">
                    <f:for each="{pills}" as="sectionObject" iteration="iteration">
                        <div class="{f:if(condition: '{sectionObject.pill.ContentPadding} != \'global\'', then: 'padding-{sectionObject.pill.ContentPadding}', else: 'padding-{settings.PillsContentPadding}')} tab-pane fade{f:if(condition: '{sectionObject.pill.active}', then: ' show active')}" aria-labelledby="pills-tab-{iteration.cycle}" role="tabpanel" id="pills-content-{iteration.cycle}">
                            <flux:content.render area="pill{sectionObject.pill.colPos}" />
                        </div>
                    </f:for>
                </div>
                <f:if condition="{settings.pillsPosition} == 'right' || {settings.pillsPosition} == 'bottom'">
                    <div class="pills-nav">
                        <f:render partial="Content/Pills/PillsNavigation" arguments="{_all}" section="Element"/>
                    </div>
                </f:if>
            </div>
<!--        <div id="pills-{record.uid} {settings.pillsJumperId}" role="tablist">-->
<!--            <f:for each="{pill}" as="sectionObject" iteration="iteration">-->
<!--                <div class="card">-->
<!--                    <div class="accordion-header card-header" role="tab" id="heading-{record.uid}-{iteration.cycle}">-->
<!--                        <h5 class="mb-0">-->
<!--                            <a data-toggle="collapse"-->
<!--                               href="#panel-{record.uid}-{iteration.cycle}" role="button"-->
<!--                               aria-expanded="{f:if(condition: '{activeTabIndex} == {iteration.cycle}', then: 'true', else:'false')}"-->
<!--                               aria-controls="panel-{record.uid}-{iteration.cycle}">-->
<!--                                <span class="material-icons">expand_more</span>-->
<!--                                {sectionObject.pill.title}-->
<!--                            </a>-->
<!--                        </h5>-->
<!--                    </div>-->
<!--                    <div id="panel-{record.uid}-{iteration.cycle}"-->
<!--                         class="collapse {f:if(condition: '{activeTabIndex} == {iteration.cycle}', then: 'show')}"-->
<!--                         role="tabpanel"-->
<!--                         aria-labelledby="heading-{record.uid}-{iteration.cycle}"-->
<!--                         data-parent="#accordion-{record.uid}">-->
<!--                        <div class="card-body">-->
<!--                            <flux:content.render area="pill{sectionObject.pill.colPos}" />-->
<!--                        </div>-->
<!--                    </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>Pills<br/></strong></p>
            <v:condition.type.isArray value="{pills}">
                <f:else>
                    <p style="color:red">
                        <b>! Bitte mindestens legen Sie mindestens ein Element (pill) an.</b>
                    </p>
                </f:else>
            </v:condition.type.isArray>
        </div>
    </f:section>
</div>