{% extends "_base.html" %}
{% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
{% block crumbs %}{{ super() }}
/ <a href="{{ data['collections_path'] }}">{% trans %}Collections{% endtrans %}</a>
/ <a href="../{{ data['id'] }}">{{ data['title'] }}</a>
/ <a href="../{{ data['id'] }}/tiles">{% trans %}Tiles{% endtrans %}</a>
{% endblock %}
{% block extrahead %}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
    <style>
      .leaflet-popup-content { 
          width: 200px;
          height: 100px;
      }
    </style>
{% endblock %}

{% block body %}
    <section id="collection">
      <h1>{{ data['title'] }}</h1>
      <p>{{ data['description'] }}</p>
      <p>
        {% for kw in data['keywords'] %}
          <span class="badge text-bg-primary bg-primary">{{ kw }}</span>
        {% endfor %}
      </p>
      <h3>Tiles</h3>
      <div class="row">
        <div class="col-md-2 col-sm-12">{% trans %}Tile Matrix Set{% endtrans %}</div>
        <div class="col-md-8">
          <select id="tilingScheme">
            {% for tileset in data['tilesets'] %}
            <option value="{{ tileset }}">{{ tileset }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <br/>
      <div class="row">
        {% if data['format']=='tilejson' %}
          <div class="col-md-2 col-sm-12">{% trans %}Metadata{% endtrans %}</div>
          <div class="col-md-8"><a id="tilejson" href="" target="_blank">Tiles metadata in {{ data['format'] }} format</a></div>
        {% endif %}      </div>
      <script>
        var select = document.getElementById('tilingScheme');
        var tileset = select.value;
        let params = (new URL(document.location)).searchParams;
        var scheme = params.get('scheme');
        if (scheme) {
            select.value = scheme;
        }
        select.addEventListener('change', ev => {
          var scheme = ev.target.value;
          document.location.search = `scheme=${scheme}`;
        });
        if (document.getElementById("tilejson")){
          document.getElementById("tilejson").href = "{{ config['server']['url'] }}/collections/{{ data['id'] }}/tiles/" + tileset + "/metadata";
        }
        </script>
      <br/>
      <div class="row">
        <div class="col-md-2 col-sm-12">Map</div>
        <div class="col-md-8">
          <div id="items-map"></div>
        </div>
      </div>
    </section>
{% endblock %}

{% block extrafoot %}
    <script>
    var map = L.map('items-map').setView([{{ 45 }}, {{ -75 }}], 10);

    map.addLayer(new L.TileLayer(
        '{{ config["server"]["map"]["url"] }}', {
            maxZoom: {{ data['maxzoom'] }},
            attribution: '{{ config["server"]["map"]["attribution"] | safe }}'
        }
    ));

    {% for link in data["links"] %}
      {% if link["rel"] == "item" %}
        var tilesUrl = '{{ link["href"] }}';
      {% endif %}
    {% endfor %}

    var url = tilesUrl.replace('{dataset}', '{{ data["id"] }}').replace('{tileMatrixSetId}', tileset).replace("tileMatrix", "z").replace("tileRow", "x").replace("tileCol", "y");

    var VectorTileOptions = {
        interactive: true,
        rendererFactory: L.canvas.tile,
        maxZoom: {{ data['maxzoom'] }},
        indexMaxZoom: 5,
        getFeatureId: function(feat) {
              return feat.properties["id"]
        }
    };
    
    var highlight;
    var clearHighlight = function() {
      if (highlight) {
        tilesPbfLayer.resetFeatureStyle(highlight);
      }
      highlight = null;
    };

    var tilesPbfLayer = L.vectorGrid.protobuf(url, VectorTileOptions)
      .on('click', function(e) { // The .on method attaches an event handler
          L.popup()
            .setContent("<b>Name</b>: " + e.layer.properties.name +
                        "<br><b>Class</b>: " + e.layer.properties.featureclass)
            .setLatLng(e.latlng)
            .openOn(map);

          clearHighlight();
          highlight = e.layer.properties.id;
          tilesPbfLayer.setFeatureStyle(highlight, {
            weight: 2,
            color: 'red',
            opacity: 1,
            fillColor: 'red',
            fill: false,
            radius: 6,
            fillOpacity: 1
          })

          L.DomEvent.stop(e);
      })
      .addTo(map);

    map.on('click', clearHighlight);
    bounds = L.latLngBounds([[{{ data['bounds'][1] }},{{data['bounds'][0]}}],[{{ data['bounds'][3] }},{{data['bounds'][2]}}]])
    map.fitBounds(bounds, maxZoom={{ data['maxzoom']}});

    </script>
{% endblock %}
