{% extends "_base.html" %}
{% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
{% block desc %}{{ data.get('description','') | truncate(250) }}{% endblock %}
{% block tags %}{{ data.get('keywords',[]) | join(',') }}{% endblock %}
{% block crumbs %}{{ super() }}
/ <a href="{{ data['collections_path'] }}">{% trans %}Collections{% endtrans %}</a>
/ <a href="./{{ data['id'] }}">{{ data['title'] | truncate( 25 ) }}</a>
{% endblock %}

{% block extrahead %}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-imageoverlay-ogcapi@0.1.0/Leaflet.ImageOverlay.OGCAPI.js"></script>
    <script src="{{ config['server']['url'] }}/static/js/default.js"></script>
{% endblock %}

{% block body %}
    <section id="collection">
      <div class="row">
        <div class="col-sm">
          <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>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 mb-2">
          <div id="collection-map"></div>
        </div>
      </div>

      {% set ns = namespace(header_printed=false) %}
      {% for link in data['links'] %}
          {% if link['rel'] == 'license' %}
          {% if not ns.header_printed %}
          <h3>{% trans %}License{% endtrans %}</h3>
          {% set ns.header_printed = true %}
          {% endif %}
          <ul>
            <li>
              <div>
                <a title="{{ link['title'] }}" href="{{ link['href'] }}">{{ link['title'] or link['href'] }}<a>
            </li>
          </ul>
          {% endif %}
      {% endfor %}

      {% if data['itemType'] == 'feature' or data['itemType'] == 'record' %}
      <h3>{% trans %}Browse{% endtrans %}</h3>
      <ul>
        <li>
          <div>
            <a title="{% trans %}Browse Items{% endtrans %}" href="{{ data['collections_path'] }}/{{ data['id'] }}/items">
              {% trans %}Browse through the items of{% endtrans %} "{{ data['title'] }}"</a></div>
        </li>
      </ul>
      <h3>{% trans %}Queryables{% endtrans %}</h3>
      <ul>
        <li>
          <div>
            <a title="{% trans %}Display Queryables{% endtrans %}" href="{{ data['collections_path'] }}/{{ data['id'] }}/queryables">
              {% trans %}Display Queryables of{% endtrans %} "{{ data['title'] }}"</a></div>
        </li>
      </ul>
      <h3>{% trans %}Schema{% endtrans %}</h3>
      <ul>
        <li>
          <div>
            <a title="{% trans %}Display Schema{% endtrans %}" href="{{ data['collections_path'] }}/{{ data['id'] }}/schema">
              {% trans %}Display Schema of{% endtrans %} "{{ data['title'] }}"</a></div>
        </li>
      </ul>
      {% endif %}

      {% for provider in config['resources'][data['id']]['providers'] %}
        {% if 'tile' in provider['type'] %}
          <h3>{% trans %}Tiles{% endtrans %}</h3>
          <ul>
            <li>
              <div>
                <a title="{% trans %}Display Tiles{% endtrans %}" href="{{ data['collections_path'] }}/{{ data['id'] }}/tiles">{% trans %}Display Tiles of{% endtrans %} "{{ data['title'] }}"</a>
              </div>
            </li>
          </ul> 
        {% endif  %}

        {% if 'coverage' in provider['type'] %}
        <h3>{% trans %}Coverage{% endtrans %}</h3>
        <ul>
          <li>
            <div>
              <a title="{% trans %}Display Coverage{% endtrans %}" href="{{ data['collections_path'] }}/{{ data['id'] }}/coverage">
                {% trans %}Display Coverage of{% endtrans %} "{{ data['title'] }}"</a></div>
          </li>
        </ul>
        <h3>{% trans %}Schema{% endtrans %}</h3>
        <ul>
          <li>
            <div>
              <a title="{% trans %}Display Schema{% endtrans %}" href="{{ data['collections_path'] }}/{{ data['id'] }}/schema">
                {% trans %}Display Schema of{% endtrans %} "{{ data['title'] }}"</a></div>
          </li>
        </ul>
        {% endif %}

      {% endfor %}
      {%- if data['data_queries'] -%}
        <h3>Data Queries</h3>
        <table class="table table-striped table-bordered">
        <tr>
            <th>Query Name</th>
            <th>Query Location</th>
        </tr>
        {% for query_name, query in data['data_queries'].items() %}
        <tr>
            <td>{{ query_name }}</td>
            <td><a title="{{ query_name }}" href="{{ query['link']['href'] }}">{{ query['link']['href'] }}</a></td>
        </tr>
        {% endfor %}
        <caption><em>Note: EDR Queries may require query parameters not provided in the Query Location.</em></caption>
        </table>
      {%- endif -%}

      {% if 'parameter_names' in data %}
      <h3>Parameters</h3>
      <table class="table table-striped table-bordered">
        <tr>
          <th>id</th>
          <th>name</th>
          <th>units</th>
        </tr>
        {% for parameter in data['parameter_names'].values() %}
        <tr>
          <td>{{ parameter['id'] }}</td>
          <td>{{ parameter['observedProperty']['label'].values()|first }}{% if parameter['observedProperty']['description'] %}<br/><i>{{ parameter['observedProperty']['description'].values()|first }}</i>{% endif %}</td>
          <td>{{ parameter['unit']['symbol']['value'] }}</td>
        </tr>
        {% endfor %}
      </table>
      {% endif %}

      <h3>{% trans %}Links{% endtrans %}</h3>
      <ul>
      {% for link in data['links'] %}
          <li>
            <a title="{{ link['rel'] }}" href="{{ link['href'] }}">
            <span>{{ link['title'] }}</span> (<span>{{ link['type'] }}</span>)
            </a></li>
      {% endfor %}
      </ul>
      {% if data['itemType'] == 'feature' %}
      <h3>{% trans %}Reference Systems{% endtrans %}</h3>
      <ul>
      {% for crs in data['crs'] %}
          <li>
            <a title="{{ crs }}" href="{{ crs }}"><span>{{ crs }}</span></a>
            </li>
      {% endfor %}
      </ul>
      <h3>{% trans %}Storage CRS{% endtrans %}</h3>
      <ul>
          <li>
            {% trans %}CRS{% endtrans %}: <a title="{{ data['storageCrs'] }}" href="{{ data['storageCrs'] }}"><span>{{ data['storageCrs'] }}</span></a>
          </li>
        <li>
          {% trans %}Epoch{% endtrans %}: <a><span>{{ data['storageCrsCoordinateEpoch'] or '_(not specified)' }}</span></a>
        </li>
      </ul>
     {% endif %}

    </section>
{% endblock %}

{% block extrafoot %}
    <script>
    var map = L.map('collection-map').setView([{{ 0 }}, {{ 0 }}], 1);

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

    var bbox = gen_safe_bbox({{ data['extent']['spatial']['bbox'][0] }});

    var bbox_layer = L.polygon([
      [bbox[1], bbox[0]],
      [bbox[3], bbox[0]],
      [bbox[3], bbox[2]],
      [bbox[1], bbox[2]]
    ]);

    var lbounds = bbox_layer.getBounds();

    // Make sure that we pass valid coordinates to the imageOverlay
    function clampLat(lat) {
        return Math.max(-85.0511, Math.min(lat, 85.0511));
    }

    var sw = lbounds.getSouthWest();
    var ne = lbounds.getNorthEast();
    var clampedSw = L.latLng(clampLat(sw.lat), sw.lng);
    var clampedNe = L.latLng(clampLat(ne.lat), ne.lng);
    var clampedBounds = L.latLngBounds(clampedSw, clampedNe);

    var ogcapi_layer = null;
    var image_overlay = null;

    {# if this collection has a map representation, add it to the map #}
    {% for link in data['links'] %}
      {% if link['rel'] == 'http://www.opengis.net/def/rel/ogc/1.0/map' and link['href'] %}
        ogcapi_layer = L.imageOverlay.ogcapi("{{ data['base_url'] }}", {
            collection: "{{ data['id'] }}",
            "opacity": .7, 
            "transparent": true, 
            "bounds": clampedBounds 
        });
        image_layer = L.imageOverlay("{{ link['href'] }}", clampedBounds, {opacity: 0.7, transparent: true});
         bbox_layer.setStyle({
             fillOpacity: 0
         });
        bbox_layer.setStyle({
            fillOpacity: 0
        });
      {% endif %}
    {% endfor %}

    // Check bounds and toggle the visibility of the imageOverlay, accordingly
    function toggleOverlayVisibility() {

      if (ogcapi_layer) {
        var currentBounds = map.getBounds();
        var west = currentBounds.getWest();
        var east = currentBounds.getEast();
        var centerLng = map.getCenter().lng;
        
        var viewWidth = east - west;

        var isWithinBounds = (viewWidth <= 360) && (centerLng >= -180 && centerLng <= 180);

         if (isWithinBounds) {
            if (!map.hasLayer(ogcapi_layer)) {
              map.addLayer(ogcapi_layer);
            }
            map.removeLayer(image_layer);
         } else {
            if (map.hasLayer(ogcapi_layer)) {
              map.removeLayer(ogcapi_layer); 
            }
            map.addLayer(image_layer);
         }
     }
    }

    map.on('moveend', toggleOverlayVisibility);

    map.addLayer(bbox_layer);
    
    map.fitBounds(clampedBounds, {maxZoom: 10});

    // Run the initial visibility check
    toggleOverlayVisibility();

    // Allow to get bbox query parameter of a rectangular area specified by
    // dragging the mouse while pressing the Ctrl key
    var firstCorner;
    var secondCorner;
    var currentBoundingBox;
    var boundingBox;
    var drawingBoundingBox = false;

    map.on('mousedown', setFirstCorner);
    map.on('mouseup', setSecondCorner);
    map.on('mousemove', drawCurrentBoundingBox);
    map.on('click', boundingBoxInfo);

    function boundingBoxInfo(e) {
        if (map.hasLayer(boundingBox)) {
            var bboxCoords = boundingBox.getBounds().toBBoxString();
            L.popup({maxWidth:"auto"})
            .setLatLng(boundingBox.getBounds().getCenter())
            .setContent(`bbox=${bboxCoords}`)
            .addTo(map);
        }
    }

    function setFirstCorner(e) {
        if (e.originalEvent.ctrlKey) {
            if (map.hasLayer(boundingBox)) {
                map.removeLayer(boundingBox);
            }
            map.dragging.disable();
            firstCorner = e.latlng;
            drawingBoundingBox = true;
        } else if (map.hasLayer(boundingBox) && !boundingBox.getBounds().contains(e.latlng)) {
        map.removeLayer(boundingBox);
        }
    }

    function setSecondCorner(e) {
        if (map.hasLayer(currentBoundingBox)) {
             map.removeLayer(currentBoundingBox);
        }
        if (e.originalEvent.ctrlKey) {
            if (drawingBoundingBox) {
                drawingBoundingBox = false;
                secondCorner = e.latlng;
                var bounds = [firstCorner, secondCorner];
                boundingBox = L.rectangle(bounds, {color:"#ff7800", weight:1});
                boundingBox.addTo(map);
            }
        }
        drawingBoundingBox = false;
        map.dragging.enable();
    }

    function drawCurrentBoundingBox(e) {
        if (drawingBoundingBox) {
            if (map.hasLayer(currentBoundingBox)) {
                map.removeLayer(currentBoundingBox);
            }
            secondCorner = e.latlng;
            var bounds = [firstCorner, secondCorner];
            currentBoundingBox = L.rectangle(bounds, {dashArray:"4 1", weight:0.4});
            currentBoundingBox.addTo(map);
        }
    }
    </script>
{% endblock %}