{% 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>
{% 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>
      {% 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  %}
      <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>
            CRS: <a title="{{ data['storageCRS'] }}" href="{{ data['storageCRS'] }}"><span>{{ data['storageCRS'] }}</span></a>
          </li>
        <li>
          Epoch: <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] }}']
    ]);

    map.addLayer(bbox_layer);
    map.fitBounds(bbox_layer.getBounds(), {maxZoom: 10});
    </script>
{% endblock %}
