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

<f:render partial="IconSprite" />

<div class="tb-map"
     data-toubiz-map
     data-toubiz-map-api-key="{configuration.apiKey}"
     data-toubiz-map-type="{properties.initialMapStyle}"
     data-toubiz-map-cluster-icon="{f:uri.resource(path: configuration.defaultClusterIcon)}"
     data-toubiz-map-marker-icon="{f:uri.resource(path: configuration.defaultMarkerIcon)}"
     data-toubiz-map-filters-menu-title="{f:translate(id: 'filterMenu.title', package: 'Newland.Toubiz.Map.Neos', source: 'Views/Map/Show')}"
     data-toubiz-map-filters-menu-select-all-label="{f:translate(id: 'filterMenu.allFilters', package: 'Newland.Toubiz.Map.Neos', source: 'Views/Map/Show')}">

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

            <div data-toubiz-location-content>
                <div class="tb-map-info-window">
                    <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>

                    <neos:link.node node="{node}" class="c-button 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>
    </f:for>

    <f:for each="{categories}" as="filter">
        <div data-toubiz-map-filter="{filter.persistenceObjectIdentifier}"
             data-toubiz-map-filter-title="{filter.title}">
        </div>
    </f:for>

    <f:for each="{articles}" as="article">
        <div data-toubiz-location
             data-toubiz-location-lat="{article.latitude}"
             data-toubiz-location-lng="{article.longitude}"
             data-toubiz-location-filter="{article.categories.0.persistenceObjectIdentifier}"
             data-toubiz-location-tour="{article.attributes.geometry -> vh:format.json()}">

            <div data-toubiz-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="#icon-close" />
                        </svg>
                    </button>

                    <div class="tb-map-info-window__image-wrapper">
                        <img src="{article.media.0.sourceUri}"
                             alt="{article.media.0.title}" />

                    </div>

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

                    <div class="tb-map-info-window__footer">
                        <div class="tb-map-info-window__attribute">
                            {article.categories.0.title}

                            <f:if condition="{article.isTour} && {article.attributes.difficultyRating} !== 0">
                                •
                                <f:translate id="property.attribute.difficultyRating.values.{article.attributes.difficultyRating}"
                                             package="Newland.Toubiz.Poi.Neos"
                                             source="Models/Article" />

                            </f:if>
                        </div>

                        <f:if condition="{poi:context.targetNode(article: article)}">
                            <neos:link.node node="{poi:context.targetNode(article: article)}"
                                            arguments="{
                                                --newland_toubiz_poi_neos-list: {
                                                    '@package': 'newland.toubiz.poi.neos',
                                                    '@controller': 'pointofinterests',
                                                    '@action': 'show',
                                                    article: article
                                                }
                                            }"
                                            class="tb-map-info-window__button">

                                <f:translate id="marker.infoWindow.moreLinkLabel"
                                             package="Newland.Toubiz.Map.Neos"
                                             source="Views/Map/Show" />

                            </neos:link.node>
                        </f:if>
                    </div>
                </div>
            </div>
        </div>
    </f:for>
</div>