{namespace bk2k = BK2K\BootstrapPackage\ViewHelpers}
<f:layout name="Default"/>
<f:section name="Header">

    <f:render partial="Header/All" arguments="{_all}" />

</f:section>
<f:section name="Main">

        <f:if condition="{items}">
            <div id="carousel-{data.uid}"
                 class="carousel slide{f:if(condition: '{data.layout} == 110',then:' carousel-small')}"
                 data-interval="{data.pi_flexform.interval}"
                 data-wrap="{data.pi_flexform.wrap}"
                 data-ride="carousel">
                <div class="carousel-inner" role="listbox">
                    <f:for each="{items}" as="item" iteration="iteration">  
                        <bk2k:var name="itemStyleImage">
                            <bk2k:fal data="{item}" as="images" field="background_image" table="tx_bootstrappackage_carousel_item">
                                <f:if condition="{images}">
                                    <bk2k:var name="backgroundImagePath"
                                            value="{f:uri.image(src:'{images.0.uid}',treatIdAsReference: 1,maxWidth:'{data.pi_flexform.background_image_maxwidth}')}"/>
                                    background-image: url('{backgroundImagePath}');
                                    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.{backgroundImagePath}',
                                    sizingMethod='scale');
                                    -ms-filter:
                                    "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{backgroundImagePath}',
                                    sizingMethod='scale')";
                                </f:if>
                            </bk2k:fal>
                        </bk2k:var>
                        <bk2k:var name="itemStyleColor">
                            <f:if condition="{item.background_color}">background-color: {item.background_color};</f:if>
                        </bk2k:var>
                         <bk2k:var name="maxheigt">
                            <f:if condition="{data.maxheight} > 0">height: {data.maxheight}px !important;</f:if>
                        </bk2k:var>
						
						<bk2k:fal data="{item}" as="images" field="background_image"
								table="tx_bootstrappackage_carousel_item">
							<f:if condition="{images}">
								<f:then>
									<bk2k:var name="backgroundImagePathProtected" value="{f:uri.image(src:'{images.0.uid}',treatIdAsReference: 1,maxWidth:'{data.pi_flexform.background_image_maxwidth}')}" />
								</f:then>
								<f:else>
									<bk2k:var name="backgroundImagePathProtected" value="" />
								</f:else>
							</f:if>
						</bk2k:fal>
                        <div class="item{f:if(condition: iteration.isFirst,then:' active')} carousel-item-type carousel-item-type-{item.item_type}"
                            data-itemno="{iteration.index}" style="{itemStyleImage}{itemStyleColor}{maxheigt}" data-url="{backgroundImagePathProtected}">
                            <f:switch expression="{item.item_type}">
                                <f:case value="header">
                                    <div class="item carousel-item-type"></div>
                                    <f:link.page pageUid="{item.link}" additionalAttributes="{draggable:'false'}">
                                        <f:render partial="Carousel/Item/Header" arguments="{_all}"/>
                                    </f:link.page>
                                </f:case>
                                <f:case value="textandimage">
                                    <f:link.page pageUid="{item.link}" additionalAttributes="{draggable:'false'}">
                                        <f:render partial="Carousel/Item/TextAndImage" arguments="{_all}"/>
                                    </f:link.page>
                                </f:case>
                                <f:case value="backgroundimage">
                                    <div class="item carousel-item-type">{item.bodytext->f:format.raw()}</div>
                                </f:case>
                                <f:case value="html">
                                    <div class="item carousel-item-type">{item.bodytext->f:format.raw()}</div>
                                </f:case>
                            </f:switch>
                        </div>
                    </f:for>
                </div>
                <f:if condition="{items -> f:count()} > 1">
                    <div class="controlBtn">
                        <f:link.page class="left carousel-control" additionalAttributes="{data-slide: 'prev', role: 'button'}"
                                     section="carousel-{data.uid}">
                            <span class="glyphicon glyphicon-chevron-left ion-chevron-left"></span>
                            <span class="sr-only">{f:translate(key: 'previous', extensionName: 'bootstrap_package')}</span>
                        </f:link.page>
                        <f:link.page class="right carousel-control" additionalAttributes="{data-slide: 'next', role: 'button'}"
                                     section="carousel-{data.uid}">
                            <span class="glyphicon glyphicon-chevron-right ion-chevron-right"></span>
                            <span class="sr-only">{f:translate(key: 'next', extensionName: 'bootstrap_package')}</span>
                        </f:link.page>

                    </div>
                </f:if>
            </div>
        </f:if>

</f:section>