{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" />

    <template id="tb-map-infowindow-template">
        <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>

            {{?it.marker.image}}
            <div class="tb-map-info-window__image-wrapper">
                <img src="{{=it.marker.image.url}}" alt="{{=it.marker.image.alt}}" />
            </div>
            {{?}}

            <div class="tb-map-info-window__text">
                <h2 class="tb-map-info-window__title">{{=it.marker.name}}</h2>
            </div>

            <div class="tb-map-info-window__footer">
                <div class="tb-map-info-window__attribute">
                    {{=it.marker.categoryTitle}}

                    {{?it.marker.isTour}}
                        •
                        {{?it.marker.difficultyRating === 1}}
                            <f:translate id="property.attribute.difficultyRating.values.1" package="Newland.Toubiz.Poi.Neos" source="Models/Article" />
                        {{??it.marker.difficultyRating === 2}}
                            <f:translate id="property.attribute.difficultyRating.values.2" package="Newland.Toubiz.Poi.Neos" source="Models/Article" />
                        {{??it.marker.difficultyRating === 3}}
                            <f:translate id="property.attribute.difficultyRating.values.3" package="Newland.Toubiz.Poi.Neos" source="Models/Article" />
                        {{??it.marker.difficultyRating === 4}}
                            <f:translate id="property.attribute.difficultyRating.values.4" package="Newland.Toubiz.Poi.Neos" source="Models/Article" />
                        {{??it.marker.difficultyRating === 5}}
                            <f:translate id="property.attribute.difficultyRating.values.5" package="Newland.Toubiz.Poi.Neos" source="Models/Article" />
                        {{?}}
                    {{?}}
                </div>

                <f:comment><!-- TODO: Figure out way to get URL --></f:comment>
                {{?it.marker.url}}
                    <a href="{{=it.marker.url}}" class="tb-map-info-window__button" target="_blank">
                        <f:translate id="marker.infoWindow.moreLinkLabel"
                                     package="Newland.Toubiz.Map.Neos"
                                     source="Views/Map/Show" />
                    </a>
                {{?}}
            </div>
        </div>
    </template>

<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="#tb-map-infowindow-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>
</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>