{namespace neos=Neos\Neos\ViewHelpers}
{namespace poi=Newland\Toubiz\Poi\Neos\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<f:if condition="{neos:rendering.inBackend(node: node)}">
    <f:then>
        <f:render section="Backend" />
    </f:then>
    <f:else>
        <f:render section="Frontend" arguments="{_all}" />
    </f:else>
</f:if>


<f:section name="Frontend">
    <f:render partial="IconSprite" />
    <f:render partial="InfoWindow" />
    <f:render partial="FilterMenu" />

<span data-oa-tracking-config
      data-oa-tracking-config-api-key="{outdooractiveCredentials.apiKey}"
      data-oa-tracking-config-client="{outdooractiveCredentials.client}"></span>

<div class="tb-map"
     data-toubiz-map
     data-toubiz-map.importers.0.type="neosCategoryJson"
     data-toubiz-map.importers.0.categories="{categories -> vh:format.json()}"
     data-toubiz-map.importers.1.type="json"
     data-toubiz-map.importers.1.markers="{articleJson}"
     data-toubiz-map.importers.1.template="[data-toubiz-map-info-window-template]"
     data-toubiz-map.importers.2.type="dom"
     data-toubiz-map-type="{properties.initialMapStyle}"
     data-toubiz-map-filters-title="{f:translate(id: 'filterMenu.title', package: 'Newland.Toubiz.Map.Neos', source: 'Views/Map/Show')}"
     data-toubiz-map-filters-select-all-label="{f:translate(id: 'filterMenu.allFilters', package: 'Newland.Toubiz.Map.Neos', source: 'Views/Map/Show')}"
     data-toubiz-map-icon-color="{configuration.colors.icon}"
     data-toubiz-map-icon-background-color="{configuration.colors.iconBackground}"
     data-toubiz-map-cluster-color="{configuration.colors.clusterText}"
     data-toubiz-map-cluster-background-color="{configuration.colors.clusterBackground}">

    <f:for each="{nodes}" as="node">
        <div data-toubiz-map-location
             data-toubiz-map-location-lat="{node.properties.toubizMapLatitude}"
             data-toubiz-map-location-lng="{node.properties.toubizMapLongitude}">

            <div data-toubiz-map-location-content>
                <div class="tb-map-info-window">
                    <button class="tb-map-info-window__close-button"
                            data-toubiz-map-info-window-close-button>

                        <svg class="c-icon"
                             aria-hidden="true">

                            <use xlink:href="#tb-map-close" />
                        </svg>
                    </button>

                    <div class="tb-map-info-window__text">
                        <h2 class="tb-map-info-window__title">{node.properties.title}</h2>

                        <f:if condition="{node.properties.toubizMapDescription}">
                            <p class="tb-map-info-window__description">{node.properties.toubizMapDescription -> f:format.crop(maxCharacters: '100')}</p>
                        </f:if>
                    </div>

                    <div class="tb-map-info-window__footer">
                        <div class="tb-map-info-window__attribute"></div>

                        <neos:link.node node="{node}" class="tb-map-info-window__button" target="_blank">
                            {f:translate(id: 'marker.infoWindow.moreLinkLabel', package: 'Newland.Toubiz.Map.Neos', source: 'Views/Map/Show')}
                        </neos:link.node>
                    </div>
                </div>
            </div>
        </div>
    </f:for>

    <f:if condition="{configuration.displayOptions.hideCategories}">
        <f:else>
            <div data-toubiz-map-filter-menu>
                <!-- Map filter menu will be rendered here -->
            </div>
        </f:else>
    </f:if>

    <div data-toubiz-map-container>
        <!-- Actual google map will be renderered here -->
    </div>
</div>

    <f:comment>
        <!--
            Loading the maps api via script is compliant to official documentation.
            However, this should be at the end of the body tag and not within this template.
            TODO: Expose map api key on page default template and move this script there.
        -->
    </f:comment>
    <script src="https://maps.googleapis.com/maps/api/js?key={configuration.apiKey}"></script>
</f:section>

<f:section name="Backend">
    <p>
        Toubiz Map (Darstellung im Backend deaktiviert).
    </p>
</f:section>