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

            <!-- TODO: Figure out way to get URL -->
            {{?it.marker.url}}
                <a href="{{=it.marker.url}}" class="tb-map-info-window__button">
                    <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">
                            {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>