{% extends "_base.html" %}
{% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
{% block crumbs %}{{ super() }}
/ <a href="{{ data['collections_path'] }}">{% trans %}Collections{% endtrans %}</a>
{% for link in data['links'] %}
  {% if link.rel == 'collection' %} /
    <a href="{{ data['dataset_path'] }}">{{ link['title'] | truncate( 25 ) }}</a>
    {% set col_title = link['title'] %}
  {% endif %}
{% endfor %}
/ <a href="{{ data['items_path']}}">{% trans %}Items{% endtrans %}</a>
{% endblock %}
{% block extrahead %}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet-coverage@0.7/leaflet-coverage.css">
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
    <script src="https://unpkg.com/covutils@0.6/covutils.min.js"></script>
    <script src="https://unpkg.com/covjson-reader@0.16/covjson-reader.src.js"></script>
    <script src="https://unpkg.com/leaflet-coverage@0.7/leaflet-coverage.min.js"></script>
{% endblock %}

{% block body %}
  <section id="coverage">
    <div id="items-map"></div>
  </section>
{% endblock %}

{% block extrafoot %}
{% if data %}
    <script>
    var map = L.map('items-map').setView([{{ 45 }}, {{ -75 }}], 5);
    map.addLayer(new L.TileLayer(
        '{{ config['server']['map']['url'] }}', {
            maxZoom: 18,
            attribution: '{{ config['server']['map']['attribution'] | safe }}'
        }
    ));

    var layers = L.control.layers(null, null, {collapsed: false}).addTo(map)

    CovJSON.read(JSON.parse('{{ data | to_json | safe }}')).then(function (cov) {
      cov.parameters.forEach((p) => {
          var layer = C.dataLayer(cov, {parameter: p.key})
            .on('afterAdd', function () {
              C.legend(layer).addTo(map)
              map.fitBounds(layer.getBounds())
            })
            .addTo(map)
          layers.addOverlay(layer, p.observedProperty.label?.en)
          map.setZoom(5)
      })

    })

    map.on('click', function (e) {
      new C.DraggableValuePopup({
        layers: [layer]
      }).setLatLng(e.latlng).openOn(map)
    })

</script>
{% endif %}
{% endblock %}
