<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
      xmlns:sms="http://typo3.org/ns/SMS/SmsResponsiveImages/ViewHelpers" data-namespace-typo3-fluid="true">

<f:layout name="Default"/>

<f:section name="hero">
    <v:variable.set name="files" value="{v:page.resources.fal()}"/>
    <div class="section section-hero bg-primary transition-after transition-type-2">
        <div class="hero hero-content has-background is-expanded ">
            <div class="container-fluid hero-text">
                <div class="hero-subheader">Unsere Standorte</div>
                <h1 class="hero-header">Reiner Genuss ganz nah ...</h1>
            </div>
            <div class="hero-bg hero-bg--image">
                <sms:image width="1920" src="{files.0.uid}" treatIdAsReference="true" alt=""
                           breakpoints="{
                              0: {'cropVariant': 'desktop', 'media': '(min-width: 1024px) and (orientation:landscape)', 'srcset': '1024,1280,1440,1920,2048,2560,3840,5120', 'sizes': '100vw'},
                              1: {'cropVariant': 'mobile', 'media': '(orientation:portrait)','srcset': '375,750,1125', 'sizes': '100vw'}
                            }"

                           picturefill="false"/>
            </div>
        </div>
    </div>
</f:section>

<f:section name="main">

    <f:if condition="{settings.displayMode} =='list'">

        <f:render section="selector" arguments="{_all}"/>

    </f:if>
    <div class="section section-address-list bg-light transition-after transition-type-3">
        <div class="container">

            <div class="address_list">
                <f:render section="displayMode_{settings.displayMode}" arguments="{_all}"/>
            </div>
        </div>
    </div>

</f:section>


<f:section name="selector">
    <div class="section">
        <div class="container space-after-none">

            <header><h2 class="ce-headline-center fancy">Lieblingsort finden!</h2></header>
            <p class="text-center">Wählen Sie Ihren Ort aus und finden Sie ganz einfach alle unsere Backhäuser in Ihrer Nähe.</p>
            <p class="text-center"><b>Geheimtipp:</b> Standort als Favorit markieren und zukünftig gleich auf der Startseite Infos und Angebote angezeigt bekommen.</p>
            <div class="amds-address-search">
                <select class="select2">
                    <option value="" disabled selected>Ihr Ort</option>
                    <f:for each="{addresses}" as="address" iteration="iterator">
                        <option value="{address.zip} {address.city}">{address.zip} {address.city}</option>
                    </f:for>
                </select>
            </div>
        </div>
    </div>
</f:section>

<f:section name="displayMode_list">
    <!--TYPO3SEARCH_end-->
    <f:if condition="{settings.hidePagination}">
        <f:then>
            <f:for each="{addresses}" as="address" iteration="iterator">
                <f:render partial="ListItem" arguments="{_all}"/>
            </f:for>
        </f:then>
        <f:else>
            <f:widget.paginate objects="{addresses}" as="paginatedAdresses" configuration="{settings.paginate}">
                <f:for each="{paginatedAdresses}" as="address" iteration="iterator">
                    <f:render partial="ListItem" arguments="{_all}"/>
                </f:for>
            </f:widget.paginate>
        </f:else>
    </f:if>
    <!--TYPO3SEARCH_begin-->


    <v:asset.script movable="true" standalone="true" path="typo3conf/ext/bn_sitepackage/Resources/Public/JavaScript/Dist/select2.js"/>
    <v:asset.script movable="true" standalone="true">

        var a = new Array();
        var select = $(".amds-address-search .select2");
        select.children("option").each(function(x){
        test = false;
        b = a[x] = $(this).val();
        for (i=0;i < a.length-1 ;i++){
        if (b ==a[i]) test = true;
        }
        if (test) $(this).remove();
        })

        select.select2().on('select2:select',function(e){
        $searchFor = e.params.data.text;
        $('.card.card-branch').hide().each(function(e){
        if($(this).data('location') == $searchFor) $(this).show();

        });


        });

    </v:asset.script>

</f:section>

<f:section name="displayMode_single">
    <f:for each="{addresses}" as="address">
        <f:render partial="Full" arguments="{_all}"/>
    </f:for>
</f:section>

<f:section name="displayMode_map">
    <f:render partial="Maps" section="{settings.map.rendering}" arguments="{_all}"/>
</f:section>


