{% load i18n l10n static cms_tags sekizai_tags %}

{% addtoblock "css" %}<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>{% endaddtoblock %}
{% addtoblock "css" %}<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />{% endaddtoblock %}
{% addtoblock "css" %}<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />{% endaddtoblock %}

{% addtoblock "js" %}<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>{% endaddtoblock %}
{% addtoblock "js" %}<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>{% endaddtoblock %}
{% addtoblock "js" %}<script type="text/javascript" async src='https://api.mapy.cz/js/panorama/v1/panorama.js'></script>{% endaddtoblock %}
{% addtoblock "js" %}<script src="{% static "djangocms_mapycz_markers/js/leaflet.js" %}"></script>{% endaddtoblock %}

<div class="mapycz-markers-map-frame">
    <div class="mapycz-markers-map"
        data-map_id="{{ instance.pk|unlocalize }}"
        data-apikey="{{ mapycz_markers_api_key|default_if_none:"" }}"
        data-map_width="{{ instance.map_width|default_if_none:""|unlocalize }}"
        data-map_height="{{ instance.map_height|default_if_none:""|unlocalize }}"
        data-map_latitude="{{ instance.map_latitude|unlocalize }}"
        data-map_longitude="{{ instance.map_longitude|unlocalize }}"
        data-map_zoom="{{ instance.map_zoom|unlocalize }}"
        data-controls="{{ instance.controls }}"
        data-no_zoom="{{ instance.no_zoom }}"
        data-clusterer="{{ instance.clusterer }}"
        data-panorama="{{ instance.panorama }}"
        data-open_popup_id="{{ instance.open_popup_id|unlocalize }}"
        style="{% if instance.map_width %}width: {{ instance.map_width }}; {% endif %}height: {{ instance.map_height|default:"600px"|unlocalize }} "
        >
        {% for plugin in instance.child_plugin_instances %}
            {% render_plugin plugin %}
        {% endfor %}
    </div>
    <div class="panorama-content-frame" style="display: none">
        <div class="panorama-content" style="height: {{ instance.map_height|default:"600px"|unlocalize }}"></div>
        <a href="#">{% translate "Close" %}</a>
    </div>
</div>