{% load i18n static sekizai_tags cms_tags %}
{% get_current_language as LANGUAGE_CODE %}

<div class="djangocms-googlemap js-djangocms-googlemap"
    data-zoom="{{ instance.zoom }}"
    data-style="{{ instance.style }}"
    data-map-id="{{ instance.map_id }}"
    data-lat="{{ instance.lat|stringformat:"f" }}"
    data-lng="{{ instance.lng|stringformat:"f" }}"
    data-zoom-control="{{ instance.zoom_control|lower }}"
    data-street-view-control="{{ instance.street_view_control|lower }}"
    data-rotate-control="{{ instance.rotate_control|lower }}"
    data-scale-control="{{ instance.scale_control|lower }}"
    data-fullscreen-control="{{ instance.fullscreen_control|lower }}"
    data-pan-control="{{ instance.pan_control|lower }}"
    data-double-click-zoom="{{ instance.double_click_zoom|lower }}"
    data-draggable="{{ instance.draggable|lower }}"
    data-keyboard-shortcuts="{{ instance.keyboard_shortcuts|lower }}"
    data-scrollwheel="{{ instance.scrollwheel|lower }}"
    data-map-type-control="{{ instance.map_type_control }}"
    {% if instance.title %} title="{{ instance.title }}"{% endif %}
>
    <div class="djangocms-googlemap-container js-djangocms-googlemap-container"
        style="width:{{ instance.width }};height:{{ instance.height }};"></div>
    {% for plugin in instance.child_plugin_instances %}
        {% render_plugin plugin %}
    {% endfor %}
</div>
{% comment %}
prevents a disaligne bug of the images in the controls,
when the map is redrawn (trigger of the event 'cms-content-refresh'),
taken from googles examples
{% endcomment %}
{% if request.toolbar and request.toolbar.edit_mode_active or request.toolbar and request.toolbar.edit_mode %}
    {% addtoblock "css" %}
        <style type="text/css">
            .gm-control-active>img {
                box-sizing: content-box;
                left: 50%;
                pointer-events: none;
                position: absolute;
                top: 50%;
                transform: translate(-50%,-50%);
            }
            .gm-control-active>img:first-child {
                z-index: 100;
            }
        </style>
    {% endaddtoblock %}
{% endif %}

{% comment %}
cms_js_classes are for injecting and executing javascript code properly,
when the plugin is added to a page for the first time
{% endcomment %}
{% with cms_js_classes="cms-execute-js-to-render cms-trigger-event-window-load" %}
    {% addtoblock "js" %}
        {% spaceless %}
            <script>var djangocms_googlemap = window.djangocms_googlemap || { InitMap: function(){} };</script>
            <script src="https://maps.googleapis.com/maps/api/js?callback=djangocms_googlemap.InitMap&language={{ LANGUAGE_CODE }}{% if googlemap_key %}&key={{ googlemap_key }}{% endif %}"
                {% if request.toolbar and request.toolbar.edit_mode_active or request.toolbar and request.toolbar.edit_mode %}
                    class="{{cms_js_classes}}"
                {% endif %}
            async defer>
            </script>
        {% endspaceless %}
    {% endaddtoblock %}

    {% addtoblock "js" %}
        {% spaceless %}
            <script src="{% static 'djangocms_googlemap/js/djangocms.googlemap.js' %}"
                {% if request.toolbar and request.toolbar.edit_mode_active or request.toolbar and request.toolbar.edit_mode %}
                    class="{{cms_js_classes}}"
                {% endif %}
            async defer>
            </script>
        {% endspaceless %}
    {% endaddtoblock %}
{% endwith %}

{% comment %}
    {{ googlemap_key }}

    {{ instance.title }}
    {{ instance.width }}
    {{ instance.height }}
    {{ instance.zoom }}
    {{ instance.style }}
    {{ instance.map_id }}

    {{ instance.map_type_control }}
    {{ instance.zoom_control }}
    {{ instance.street_view_control }}
    {{ instance.rotate_control }}
    {{ instance.scale_control }}
    {{ instance.fullscreen_control }}
    {{ instance.pan_control }}
    {{ instance.double_click_zoom }}
    {{ instance.draggable }}
    {{ instance.keyboard_shortcuts }}
    {{ instance.scrollwheel }}
{% endcomment %}