{% 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'] | string | 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"/>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css"/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css"/>
    <script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
{% endblock %}

{% block body %}
  <section id="items"></section>
  <section id="collection">
    <h1>{% for l in data['links'] if l.rel == 'collection' %} {{ l['title'] }} {% endfor %}</h1>
    <p>{% trans %}Items in this collection{% endtrans %}.</p>
  </section>
  <section id="items">
    {% if data['features'] %}
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <div class="row">
          <div class="col-sm-12">
            <div id="items-map"></div>
          </div>
          <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-12">
                  {% trans %}Warning: Higher limits not recommended!{% endtrans %}
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                  {% trans %}Limit{% endtrans %}:
                  <select id="limits">
                    <option value="{{ config['server']['limit'] }}">{{ config['server']['limit'] }} ({% trans %}default{% endtrans %})</option>
                    <option value="100">100</option>
                    <option value="1000">1,000</option>
                    <option value="2000">2,000</option>
                  </select>
                  <script>
                    var select = document.getElementById('limits');
                    var defaultValue = select.getElementsByTagName('option')[0].value;
                    let params = (new URL(document.location)).searchParams;
                    select.value = params.get('limit') || defaultValue;
                    select.addEventListener('change', ev => {
                      var limit = ev.target.value;
                      document.location.search = `limit=${limit}`;
                    });
                  </script>
                </div>
            </div>
            <div class="row">
              <div class="col-sm-12">
                {% for link in data['links'] %}
                {% if link['rel'] == 'prev' and data['offset'] > 0 %}
                <a role="button" href="{{ link['href'] }}">{% trans %}Prev{% endtrans %}</a>
                {% elif link['rel'] == 'next' and data['features'] %}
                <a role="button" href="{{ link['href'] }}">{% trans %}Next{% endtrans %}</a>
                {% endif %}
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-sm-12 col-md-6" style="overflow-x: scroll;">
        {% set props = [] %}
        <table class="table table-striped table-bordered">
          <thead>
            <tr>
              {% if data.get('uri_field') %}
                {% set uri_field = data.uri_field %}
                <th>{{ uri_field }}</th>
              {% elif data.get('title_field') %}
                {% set title_field = data.title_field %}
                <th>{{ title_field }}</th>
              {% else %}
                <th>id</th>
              {% endif %}

              {% for k in data['features'][0]['properties'].keys() %}
                {% if k not in [data.id_field, data.title_field, data.uri_field, 'extent'] %}
                  {% set props = props.append(k) %}
                  <th>{{ k }}</th>
                {% endif %}
              {% endfor %}
            </tr>
          </thead>
          <tbody>
            {% for ft in data.features %}
              <tr>
                {% if data.get('uri_field') %}
                  {% set uri_field = data.uri_field %}
                  <td data-label="{{ uri_field }}">
                    <a href="{{ ft.properties.get(uri_field) }}" title="{{ ft.properties.get(uri_field) }}">
                      {{ ft.properties.get(uri_field) }}
                    </a>
                  </td>
                {% elif data.get('title_field') %}
                  {% set title_field = data.title_field %}
                  <td data-label="{{ title_field }}">
                    <a href="{{ data.items_path }}/{{ ft['id'] }}" title="{{ ft.properties.get(title_field) }}">
                      {{ ft.properties.get(title_field) | string | truncate( 35 ) }}
                    </a>
                  </td>
                {% else %}
                  <td data-label="id">
                    <a href="{{ data.items_path }}/{{ ft.id }}" title="{{ ft.id }}">
                      {{ ft.id | string | truncate( 12 )  }}
                    </a>
                  </td>
                {% endif %}

                {% for prop in props %}
                  <td data-label="{{ prop }}">
                    {{ ft.properties.get(prop, '') | string | truncate( 35 ) }}
                  </td>
                {% endfor %}

              </tr>
            {% endfor %}
          </tbody>
          </table>
      </div>
    </div>
    {% else %}
    <div class="row col-sm-12">
        <p>{% trans %}No items{% endtrans %}</p>
    </div>
    {% endif %}
    </section>
{% endblock %}

{% block extrafoot %}
{% if data['features'] %}
    <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 geojson_data = {{ data['features'] | to_json | safe }};

    var items = new L.GeoJSON(geojson_data, {
        onEachFeature: function (feature, layer) {
            var url = '{{ data['items_path'] }}/' + feature.id + '?f=html';
            var html = '<span><a href="' + url + '">' + {% if data['title_field'] %} feature['properties']['{{ data['title_field'] }}'] {% else %} feature.id {% endif %} + '</a></span>';
            layer.bindPopup(html);
        }
    });
    {% if data['features'][0]['geometry']['type'] == 'Point' %}
    var markers = L.markerClusterGroup({
        disableClusteringAtZoom: 9,
        chunkedLoading: true,
        chunkInterval: 500,
    });
    markers.clearLayers().addLayer(items);
    map.addLayer(markers);
    {% else %}
    map.addLayer(items);
    {% endif %}

    map.fitBounds(items.getBounds());
    </script>
{% endif %}
{% endblock %}
