{% load i18n l10n %}

<div id="{{ id }}_div_map" class="{% block map_wrapper_class %}dj_map_wrapper{% endblock map_wrapper_class %}">
  {% block map_wrapper %}
    {# RemovedInDjango51Warning: when the deprecation ends, remove data-width and data-height attributes. #}
    <div id="{{ id }}_map" class="dj_map" data-width="{{ map_width }}" data-height="{{ map_height }}"></div>
    <div class="osm-widget-actions">
      {% block map_actions %}
        {% if not disabled %}
          <button type="button" class="osm-widget-action-btn clear_features_btn">{% block clear_features_label %}{{ widget.attrs.clear_features_label|default:"Delete all Features" }}{% endblock %}</button>
        {% endif %}
      {% endblock map_actions %}
    </div>
  {% endblock map_wrapper %}
  {% if display_raw %}<p>{% translate "Debugging window (serialized value)" %}</p>{% endif %}
  <textarea id="{{ id }}" class="vSerializedField required" cols="150" rows="10" name="{{ name }}"
            {% if not display_raw %} hidden{% endif %}>{{ serialized }}</textarea>
  <script>
    {% block base_layer %}
      var base_layer = new ol.layer.Tile({
        source: new ol.source.XYZ({
          attributions: "NASA Worldview",
          maxZoom: 8,
          url: "https://map1{a-c}.vis.earthdata.nasa.gov/wmts-webmerc/" +
          "BlueMarble_ShadedRelief_Bathymetry/default/%7BTime%7D/" +
          "GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpg"
        })
      });
    {% endblock %}
    {% block options %}var options = {
      base_layer: base_layer,
      geom_name: '{{ geom_type }}',
      id: '{{ id }}',
      map_id: '{{ id }}_map',
      map_srid: {{ map_srid|unlocalize }},
      name: '{{ name }}'
    };
    {% endblock %}
    var {{ module }} = new MapWidget(options);
    {% block extra_js %}{% endblock extra_js %}
  </script>
</div>