{% extends 'layout/base.html.twig' %}

{% block title %}{{ "title.properties_on_map"|trans }}{% endblock %}

{% block description %}{{ site.meta_description }}{% endblock %}

{% block body %}

    {% if is_granted('ROLE_ADMIN') %}

        <a href="{{ url('admin_map_settings') }}" class="btn btn-primary float">
            <i class="fas fa-cog float-icon"></i>
        </a>

    {% endif %}

    {% if site.ymaps_key != '' %}

        <script src="https://api-maps.yandex.ru/2.1/?apikey={{ site.ymaps_key }}&lang={{ app.request.locale }}"></script>

    {% else %}

        <script src="https://api-maps.yandex.ru/2.1/?lang={{ app.request.locale }}"></script>

    {% endif %}

    <script>
        ymaps.ready(init);

        function init() {
            var myMap = new ymaps.Map("map", {
                center: [{{ site.map_center|default('27.188534, -81.128735') }}],
                zoom: {{ site.map_zoom|default('7') }}
            });

            {% for property in properties %}

            var myGeoObject = new ymaps.GeoObject({
                geometry: {
                    type: "Point",
                    coordinates: [{{ property.latitude }}, {{ property.longitude }}]
                },
                properties: {
                    hintContent: "{{ site.currency.symbolLeft }}{{ property.price }} {{ site.currency.symbolRight }}",
                    balloonContentHeader: "{{ site.currency.symbolLeft }}{{ property.price }} {{ site.currency.symbolRight }}",
                    balloonContentBody: "{{ property.category.name }}<br><a href=\"{{ path('property_show', {
                        'id':  property.id,
                        'citySlug': property.city.slug,
                        'slug': property.slug}) }}\">{{ 'view_details'|trans }}</a>",
                }
            }, {preset: "islands#blueHomeIcon"});

            myMap.geoObjects.add(myGeoObject);

            {% endfor %}

        }

    </script>

    <div id="map" class="mb-3 mt-3"></div>

{% endblock %}