{namespace neos=Neos\Neos\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}
{namespace common=Newland\Toubiz\Common\Neos\ViewHelpers}
{namespace media=Neos\Media\ViewHelpers}

<f:if condition="{neos:rendering.inBackend(node: node)}">
    <f:then>
        <vh:render section="Backend" arguments="{_all}" />
    </f:then>
    <f:else>
        <f:if condition="{properties.mapType}">
            <f:then><vh:render section="Frontend" arguments="{_all}" /></f:then>
            <f:else><!-- A map type must be selected in backend --></f:else>
        </f:if>
    </f:else>
</f:if>


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

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

<div
    data-toubiz-map
    {f:render(section: 'DynamicMapAttributes', arguments: _all)}
    >

    <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:section>


<f:section name="DynamicMapAttributes">
    <f:comment><!-- API Keys --></f:comment>
    data-toubiz-map.map.toursprung-api-key="{apiKeys.toursprung}"
    data-toubiz-map.map.google-maps-api-key="{apiKeys.googleMaps}"

    <f:comment><!-- Importers --></f:comment>
    data-toubiz-map.importers.0.type="api"
    data-toubiz-map.importers.0.marker-url="{f:uri.action(package: 'Newland.Toubiz.Map.Neos', controller: 'Api', action: 'markerList', format: 'json', arguments: {node: node}, useMainRequest: true, absolute: false)}"
    data-toubiz-map.importers.0.filter-item-url="{f:uri.action(package: 'Newland.Toubiz.Map.Neos', controller: 'Api', action: 'filterItemList', format: 'json', arguments: {node: node}, useMainRequest: true, absolute: false)}"
    data-toubiz-map.importers.0.template="[data-toubiz-map-info-window-template]"
    data-toubiz-map.importers.0.highlight-marker="{f:uri.action(package: 'Newland.NeosIcons', controller: 'Svg', action: 'mapMarker', format: 'svg', arguments: {icon: 'circle-solid', backgroundColor: configuration.markers.highlightIcons.backgroundColor, foregroundColor: configuration.markers.highlightIcons.color}, useMainRequest: true, absolute: false)}"

    <f:comment><!-- General setup --></f:comment>
    data-toubiz-map.map-type="{properties.mapType}"
    data-toubiz-map.link-target="{properties.linkTarget}"
    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.disable-menu="(bool) {f:if(condition: node.properties.disableMenu, then: 'true', else: 'false')}"
    data-toubiz-map.open-menu-initially="(bool) {f:if(condition: node.properties.openMenuInitially, then: 'true', else: 'false')}"
    data-toubiz-map.map.geolocation.enabled="(bool) {configuration.geolocation.enabled}"
    data-toubiz-map.map.geolocation.wait-for-user-intent="(bool) {configuration.geolocation.waitForUserIntent}"

    <f:comment><!-- Colors & Icons --></f:comment>
    data-toubiz-map.map.clustering.spiderfication-icon="{f:uri.action(package: 'Newland.NeosIcons', controller: 'Svg', action: 'mapMarker', format: 'svg', arguments: {icon: 'plus', backgroundColor: configuration.clustering.backgroundColor, foregroundColor: configuration.clustering.color}, useMainRequest: true, absolute: false)}"
    data-toubiz-map.marker-style.icon-url="{f:uri.action(package: 'Newland.NeosIcons', controller: 'Svg', action: 'mapMarker', format: 'svg', arguments: {icon: 'circle-solid', backgroundColor: configuration.markers.defaultIcons.backgroundColor, foregroundColor: configuration.markers.defaultIcons.color}, useMainRequest: true, absolute: false)}"
    data-toubiz-map.map.clustering.color="{configuration.clustering.color}"
    data-toubiz-map.map.clustering.background-color="{configuration.clustering.backgroundColor}"
    data-toubiz-map.map.clustering.disabled="(bool) {f:if(condition: node.properties.disableClustering, then: 'true', else: 'false')}"
    data-toubiz-map.map.zoom="(int) {properties.initialZoom}"


    <f:comment><!-- Initial map center --></f:comment>
    <f:if condition="{properties.initialLatitude} && {properties.initialLongitude}">
        data-toubiz-map.map.center.latitude="(float) {properties.initialLatitude}"
        data-toubiz-map.map.center.longitude="(float) {properties.initialLongitude}"
    </f:if>

    <f:comment><!-- Center on markers --></f:comment>
    <f:if condition="{properties.centerMapOnMarkers}">
        <f:then>
            data-toubiz-map.center-on-markers="(bool) true"
        </f:then>
        <f:else>
            data-toubiz-map.center-on-markers="(bool) false"
        </f:else>
    </f:if>

    <f:comment><!-- Map style --></f:comment>
    <f:if condition="{properties.mapType} === 'toursprung'">
        <f:then>
            <f:for each="{properties.toursprungMapStyle}" as="style" iteration="i">
                data-toubiz-map.map.toursprung-map-style.{i.index}.identifier="{style}"
            </f:for>
        </f:then>
        <f:else if="{properties.mapType} === 'google-maps'">
            <f:for each="{properties.googleMapStyle}" as="style" iteration="i">
                data-toubiz-map.map.google-map-style.{i.index}.identifier="{style}"
            </f:for>
        </f:else>
    </f:if>

    <f:comment><!-- Language labels --></f:comment>
    data-toubiz-map.lang.opening-times="(json) {common:allTranslations(source: 'Views/OpeningTimes', package: 'Newland.Toubiz.Poi.Neos') -> f:format.json()}"
    data-toubiz-map.lang.difficulty-rating1="<f:translate id="property.attribute.difficultyRating.values.1" package="Newland.Toubiz.Poi.Neos" source="Models/Article" />"
    data-toubiz-map.lang.difficulty-rating2="<f:translate id="property.attribute.difficultyRating.values.2" package="Newland.Toubiz.Poi.Neos" source="Models/Article" />"
    data-toubiz-map.lang.difficulty-rating3="<f:translate id="property.attribute.difficultyRating.values.3" package="Newland.Toubiz.Poi.Neos" source="Models/Article" />"
    data-toubiz-map.lang.difficulty-rating4="<f:translate id="property.attribute.difficultyRating.values.4" package="Newland.Toubiz.Poi.Neos" source="Models/Article" />"
    data-toubiz-map.lang.difficulty-rating5="<f:translate id="property.attribute.difficultyRating.values.5" package="Newland.Toubiz.Poi.Neos" source="Models/Article" />"
    data-toubiz-map.lang.more-link="<f:translate id="marker.infoWindow.moreLinkLabel" source="Views/Map/Show" />"
    data-toubiz-map.lang.mobile-confirm="<f:translate id="filterMenu.mobileConfirmLabel" source="Views/Map/Show" />"

    <f:if condition="{properties.menuLabel}">
        data-toubiz-map.lang.toggle="{properties.menuLabel}"
    </f:if>
    <f:if condition="{properties.filterMenuTopline}">
        data-toubiz-map.lang.topline="{properties.filterMenuTopline}"
    </f:if>
    <f:if condition="{properties.menuTitle}">
        <f:then>
            data-toubiz-map.lang.title="{properties.menuTitle}"
        </f:then>
        <f:else>
            data-toubiz-map.lang.title="<f:translate id="filterMenu.title" source="Views/Map/Show" />"
        </f:else>
    </f:if>
    <f:if condition="{properties.chooseCategoryLabel}">
        <f:then>
            data-toubiz-map.lang.all-filters="{properties.chooseCategoryLabel}"
        </f:then>
        <f:else>
            data-toubiz-map.lang.all-filters="<f:translate id="filterMenu.allFilters" source="Views/Map/Show" />"
        </f:else>
    </f:if>

    <f:comment><!-- Various settings --></f:comment>
    data-toubiz-map.use-alternative-menu-style="(bool) {properties.useAlternativeMenuStyle}"
</f:section>

<f:section name="Backend">
    <h3>Toubiz Map</h3>

    <f:if condition="{properties.mapType}">
        <f:then>{childrenPreview ->  f:format.raw()}</f:then>
        <f:else>Please select a map type</f:else>
    </f:if>
</f:section>