{namespace drk=DRK\DrkClothescontainerview\ViewHelpers}
<f:layout name="Default"/>

<f:section name="content">
    <f:asset.css identifier="clothescontainerview-result-styles" href="EXT:drk_clothescontainerview/Resources/Public/Css/styles.css" />
    <header class="header">
        <h4 class="header__header">
            <f:format.raw>{f:translate(id: 'clothescontainerViewResult.list.headline')}</f:format.raw>
        </h4>
    </header>
    <p class="c-clothescontainer-view__result">
        <f:if condition="{clothescontainers}">
            <f:then>
                <f:if condition="{settings.show_map}">
                    <div class="c-clothescontainer-view__result-map" style="margin-top: 50px;">
                        <header class="header">
                        <h5 class="header__header">
                            <f:format.raw>
                                <f:translate key="LLL:EXT:drk_clothescontainerview/Resources/Private/Language/locallang.xlf:clothescontainerViewResult.list.map.headline"/>
                            </f:format.raw>
                        </h5>
                        </header>
                        <f:if condition="{settings.mapType} == 'google'">
                            <f:then>
                                <drk:googleMap locations="{clothescontainers}" class="c-vorort-search__result-map"
                                               alt="{f:translate(id: 'clothescontainerViewResult.list.map.alt')}"
                                               title="{f:translate(id: 'clothescontainerViewResult.list.map.title')}"/>
                            </f:then>
                            <f:else>
                                <drk:openStreetMap locations="{clothescontainers}"
                                                   class="c-vorort-search__result-map"
                                                   alt="{f:translate(id: 'clothescontainerViewResult.list.map.alt')}"
                                                   title="{f:translate(id: 'clothescontainerViewResult.list.map.title')}"/>
                            </f:else>
                        </f:if>
                    </div>
                </f:if>
                <ul class="c-clothescontainer-view__result-list">
                    <f:for each="{clothescontainers}" as="clothescontainer" iteration="clothescontainerIterator">
                        <f:if condition="{clothescontainer.containerid}">
                            <f:then>
                                <li class="c-clothescontainer-view__result-item">
                                    <p>
                                        <a href="https://www.google.com/maps?q={clothescontainer.containerlatitude -> f:format.number(decimals: 10, decimalSeparator: '.', thousandsSeparator: '')},{clothescontainer.containerlongitude -> f:format.number(decimals: 10, decimalSeparator: '.', thousandsSeparator: '')}&amp;t=m&amp;z=14$hl=de&amp;mrt=all&amp;iwd=1&amp;iwloc=A"
                                           target="_blank" class="button button--secondary drk-clothescontainer-search_distance" title="{f:translate(id: 'clothescontainerViewResult.list.maplink.text')}">
                                            <f:format.raw value="{clothescontainer.offertypdescription}"/>
                                        </a><br/>
                                        {clothescontainer.containerzip} {clothescontainer.containercity},
                                        {clothescontainer.containerstreet}
                                        <f:if condition="{clothescontainer.containernote}">
                                            <br/>Hinweis: {clothescontainer.containernote}
                                        </f:if>
                                    </p>
                                </li>
                            </f:then>
                            <f:comment>Kleiderläden</f:comment>
                            <f:else>
                                <li class="c-clothescontainer-view__result-item">
                                    <p>
                                        <a href="https://www.google.com/maps?q={clothescontainer.offerlatitude -> f:format.number(decimals: 10, decimalSeparator: '.', thousandsSeparator: '')},{clothescontainer.offerlongitude -> f:format.number(decimals: 10, decimalSeparator: '.', thousandsSeparator: '')}&amp;t=m&amp;z=14$hl=de&amp;mrt=all&amp;iwd=1&amp;iwloc=A"
                                           target="_blank" class="button button--secondary drk-clothescontainer-search_distance" title="{f:translate(id: 'clothescontainerViewResult.list.maplink.text')}">

                                        <f:if condition="{clothescontainer.offername}">
                                            <f:then>
                                                    <f:format.raw value="{clothescontainer.offertypdescription} - {clothescontainer.offername}"/>
                                            </f:then>
                                            <f:else>
                                                    <f:format.raw value="{clothescontainer.offertypdescription}"/>
                                            </f:else>
                                        </f:if>
                                        </a><br/>
                                        {clothescontainer.offerzip} {clothescontainer.offercity},
                                        {clothescontainer.offerstreet}
                                    </p>
                                </li>
                            </f:else>
                        </f:if>
                    </f:for>
                </ul>
            </f:then>

            <f:else>
                <p>{f:translate(id: 'clothescontainerViewResult.list.noContainerList')}</p>
            </f:else>
        </f:if>
    </div>

</f:section>