{% 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>
{% 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">
          <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>
      {% 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 %}
      {% endfor %}
      {% 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['name'] }}</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_layer = L.polygon([
      ['{{ data['extent']['spatial']['bbox'][0][1] }}', '{{ data['extent']['spatial']['bbox'][0][0] }}'],
      ['{{ data['extent']['spatial']['bbox'][0][3] }}', '{{ data['extent']['spatial']['bbox'][0][0] }}'],
      ['{{ data['extent']['spatial']['bbox'][0][3] }}', '{{ data['extent']['spatial']['bbox'][0][2] }}'],
      ['{{ data['extent']['spatial']['bbox'][0][1] }}', '{{ data['extent']['spatial']['bbox'][0][2] }}']
    ]);

   {# 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'] %}
        L.imageOverlay.ogcapi("{{ data['base_url'] }}", {collection: "{{ data['id'] }}", "opacity": .7, "transparent": true}).addTo(map);
        bbox_layer.setStyle({
            fillOpacity: 0
        });
     {% endif %}
   {% endfor %}

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

    // 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 %}
