{namespace m=Stratis\StratisMap\ViewHelpers}
<f:section name="OpenLayers">
    <span class="update-mobile-map" ng-click="updateSize();"></span>
    <openlayers ol-center="center" ol-defaults="defaults" width="{width}" height="{height}" custom-layers="true">
        <ol-layer ol-layer-properties="layer" ng-repeat="layer in backgroundLayers"></ol-layer>
        <ol-route ol-route-properties="route"></ol-route>
        <f:if condition="{news -> f:count()}">
            <f:for each="{news -> m:format.clusters(settings:settings)}" as="cluster" iteration="iteration">
                <v:variable.set name="firstCluster" value="{cluster.clusteredLocations -> v:iterator.first()}"/>
                <v:variable.set name="firstCategory" value="{firstCluster.categories -> v:iterator.first()}"/>
                <v:variable.set name="firstImageInCategory" value="{firstCategory.images -> v:iterator.first()}"/>
                <v:variable.set name="categories" value="{firstCluster.categories -> v:iterator.extract(key:'title') -> v:iterator.implode(glue:', ')}"/>
                <v:variable.set name="clusterMessage" value="<div class='marker-message'><span class='marker-message__theme'>{categories}</span><p class='marker-message__title'>{cluster.title}</p></div>"/>
                <f:if condition="{cluster.marker}">
                    <f:then>
                        <ol-marker uid="{iteration.cycle}" lon="{cluster.longitude}" lat="{cluster.latitude}"
                                   message="{clusterMessage}" clustered="{cluster.clusteredLocations -> m:iterator.list()}"
                                   icon="{f:uri.image(src:cluster.marker.uid, treatIdAsReference:1)}"
                                   ng-click="showPopup({iteration.cycle}, '{cluster.relatedNews -> m:iterator.list()}')"></ol-marker>
                    </f:then>
                    <f:else>
                        <f:if condition="{firstImageInCategory}">
                            <f:then>
                                <v:variable.set name="iconUrl" value="{f:uri.image(src:firstImageInCategory.uid, treatIdAsReference:1)}"/>
                            </f:then>
                            <f:else>
                                <v:variable.set name="iconUrl" value="{settings.map.defaultMarker}"/>
                            </f:else>
                        </f:if>
                        <ol-marker uid="{iteration.cycle}" lon="{cluster.longitude}" lat="{cluster.latitude}"
                                   message="{clusterMessage}" clustered="{cluster.clusteredLocations -> m:iterator.list()}"
                                   icon="{iconUrl}"
                                   ng-click="showPopup({iteration.cycle}, '{cluster.relatedNews -> m:iterator.list()}')"></ol-marker>
                    </f:else>
                </f:if>

            </f:for>
        </f:if>
    </openlayers>
    <v:tag name="div" class="map__tools" hideIfEmpty="true">
        <f:if condition="{settings.map.showBackgroundLayerSelect}">
            <div class="background-switch">
                <label for="choice-of-plan" class="ghost">{s:l(key:'map.selectView',extensionName: 'StratisMap')}</label>
                <select name="choice-of-plan" id="choice-of-plan" ng-options="layer as layer.name for layer in backgroundLayers" ng-model="selectedBackLayer"
                    ng-change="changeBackLayer()"></select>
            </div>
        </f:if>
    </v:tag>
</f:section>