{% load static %}
{% load i18n %}
{% load crispy_forms_tags %}

{% block head %}
<!-- Map imports -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin="">
  </script>
<script src="{% static 'leaflet.markercluster-src.js' %}"></script>
<link rel="stylesheet" href="{% static 'MarkerCluster.css' %}" />
<link rel="stylesheet" href="{% static 'MarkerCluster.Default.css' %}" />
<!--Leaflet FullScreen-->
<script src="https://unpkg.com/lerc@1.0.1/LercDecode.js"></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css'
  rel='stylesheet' />
<!-- static leaflet additional import-->
<link rel="stylesheet" href="{% static 'leaflet.measure.css' %}" />
<script src="{% static 'leaflet.measure.js' %}"></script>
<script type="text/javascript" src="{% static 'leaflet.coor.js' %}"></script>
<link rel="stylesheet" href="{% static 'leaflet.coor.css' %}" />

<link rel="stylesheet" href="{% static 'leaflet-search.css' %}"/>
<script src="{% static 'leaflet-search.js' %}"></script>
{% endblock %}

{% block content %}
<div class="row">
  <div class="col-sm-12">
    <span class="app-divider-label">{% trans "dokument.templates.coor_doc.mapDivider.text" %}</span>
    <hr class="mt-0" />
  </div>
  <div class="form-group col-sm-2">
    {{ formExtraData.zeme|as_crispy_field }}
    {{ formExtraData.region|as_crispy_field }}
    {{ formExtraData.visible_x1|as_crispy_field }}
    {{ formExtraData.visible_x2|as_crispy_field }}
    {{ formExtraData.coordinate_wgs84_x1|as_crispy_field }}
    {{ formExtraData.coordinate_wgs84_x2|as_crispy_field }}
  </div>
  <div class="col-12 col-sm-10">
    {% include "map.html" %}
  </div>
</div>

{% endblock %}

{% block script %}
<script>
  var global_csrftoken = '{{ csrf_token }}';
</script>
<script >
  var static_url = "{% get_static_prefix %}";
</script>
<script>
  var map_translations = {
    Library3D: '{%trans "mapa.Library3D" %}',
    Location3D: '{%trans "mapa.Location3D" %}',
    CurrentLocation: '{%trans "mapa.CurrentLocation" %}',
    CurrentLocationError: '{%trans "mapa.CurrentLocationError" %}',
    cuzkKatastralniMapa: '{%trans "mapa.cuzkKatastralniMapa" %}',
    cuzkKatastralniUzemi: '{%trans "mapa.cuzkKatastralniUzemi" %}',
    cuzkOrtofotomapa: '{%trans "mapa.cuzkOrtofotomapa" %}',
    cuzkStinovanyeelief5G: '{%trans "mapa.cuzkStinovanyeelief5G" %}',
    cuzkzakladniMapyCr: '{%trans "mapa.cuzkzakladniMapyCr" %}',
    FullscreenTitle: '{%trans "mapa.FullscreenTitle" %}',
    FullscreenTitleClose: '{%trans "mapa.FullscreenTitleClose" %}',
    MeasureTitle: '{%trans "mapa.MeasureTitle" %}',
    openStreetMap: '{%trans "mapa.openStreetMap" %}',
    openStreetMapSeda: '{%trans "mapa.openStreetMapSeda" %}',
    SearchText: '{%trans "mapa.SearchText" %}',
    SearchTextCancel: '{%trans "mapa.SearchTextCancel" %}',
    SearchTextError: '{%trans "mapa.SearchTextError" %}',
    zoomInTitle: '{%trans "mapa.zoomInTitle" %}',
    zoomOutTitle: '{%trans "mapa.zoomOutTitle" %}'          
  };
</script>
<script src="{% static 'mapa_pins.js' %}"></script>
<script src="{% static 'coor_precision.js' %}"></script>
<script src="{% static 'spin/spin.min.js' %}"></script>
<script src="{% static 'leaflet.spin.min.js' %}"></script>
<script src="{% static 'mapa_basic_grey.js' %}"></script>
<script src="{% static 'mapa_doc.js' %}"></script>
<script>
  $(document).ready(function () {
        {% if coordinate_wgs84_x1 is not None %}
        let [cor_x1, cor_x2] = amcr_static_coordinate_precision_wgs84([{{ coordinate_wgs84_x1 }}, {{ coordinate_wgs84_x2 }}]);

        document.getElementById('id_visible_x1').value = cor_x1;
        document.getElementById('id_visible_x2').value = cor_x2;
        replace_coor();

        $('[readonly]').prop("disabled", true);
        {% if global_map_can_edit %}
        addUniquePointToPoiLayer([cor_x2,cor_x1]);
        {% else  %}
        global_map_can_edit = false
        addReadOnlyUniquePointToPoiLayer([cor_x2,cor_x1]);
        {% endif %}
        {% else  %}
        if(window.location.href.includes("/detail/")){
          global_map_can_edit = false
        }
        {% endif %}
      })

</script>


{% endblock %}