{% include "header.html" %}

{% set show_prev_link = false %}
{% set show_next_link = false %}
{% for link in response.links %}
  {% if link.rel == "alternate" %}{% set json_link = link %}{% endif %}
  {% if link.rel == "prev" %}{% set prev_link = link %}{% set show_prev_link = true %}{% endif %}
  {% if link.rel == "next" %}{% set next_link = link %}{% set show_next_link = true %}{% endif %}
{% endfor %}

<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-light">
    <li class="breadcrumb-item"><a href="{{ template.api_root }}?f=html{{ template.extra_params }}">Home</a></li>
    <li class="breadcrumb-item"><a href="{{ template.api_root }}/collections?f=html{{ template.extra_params }}">Collections</a></li>
    <li class="breadcrumb-item"><a href="{{ template.api_root }}/collections/{{ response.collection.id }}?f=html{{ template.extra_params }}">{{ response.collection.title }}</a></li>
    <li class="breadcrumb-item active" aria-current="page">items</li>
    <li class="ms-auto json-link"><a target="_blank" href="{{ json_link.href }}">JSON</a></li>
  </ol>
</nav>

<h1>{{ template.title }} - Collection Items: {{ response.collection.title }}</h1>

<div id="map" class="rounded" style="width:100%; height:400px;">Loading...</div>

<p>
  <b>Number of matching items:</b> {{ response.numberMatched }}<br/>
  <b>Number of returned items:</b> {{ response.numberReturned }}<br/>
  <b>Page:</b> <span id="current_page"></span> of <span id="total_pages"></span><br/>
</p>

<div class="row g-2 mb-2" id="controls">
  {% if show_prev_link == true %}
  <div class="col-auto"><a class="btn btn-secondary" title="previous page" href="{{ prev_link.href }}">prev</a></div>
  {% endif %}
  <div class="col-auto">
    <select class="form-control" id="limit"> <!-- TODO: dynamically populate the values based on oga_max_limit -->
      <option value="10">page size</option>
      <option>10</option>
      <option>100</option>
      <option>1000</option>
      <option>10000</option>
    </select>
  </div>
  {% if show_next_link == true %}
  <div class="col-auto"><a class="btn btn-secondary" title="next page" href="{{ next_link.href }}">next</a></div>
  {% endif %}
</div>
<div class="table-responsive">
<table class="table">
  <thead class="table-light">
  <tr>
    <th>ID</th>
{% if response.features %}
{% for key, value in response.features.0.properties %}
    <th>{{ key }}</th>
{% endfor %} 
{% endif %}
  </tr>
  </thead>
  <tbody>
{% for feature in response.features %}
    <tr>
      <td><a target="_blank" href="{{ template.api_root }}/collections/{{ response.collection.id }}/items/{{ feature.id }}?f=html{{ template.extra_params }}">{{ feature.id }}</a></td>
  {% for key, value in feature.properties %}
      <td>{{ value }}</td>
  {% endfor %}
    </tr>
{% endfor %}
  </tbody>
</table>
</div>

<script>
function changePageSize() {
    const limitSelect = document.getElementById("limit");
    const url = "{{ template.api_root }}/collections/{{ response.collection.id }}/items?limit=" + limitSelect.value + "{{ template.extra_params }}";
    window.location.href = url;
}
document.addEventListener("DOMContentLoaded", function () {
  //
  // mapping
  //
  const geojson = {{ response.features }};
  const map = L.map('map').setView([0, 0], 1);
  map.addLayer(new L.TileLayer(
    'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
    }
  ));
  const features = L.geoJSON(geojson).addTo(map);
  map.fitBounds(features.getBounds());

  //
  // paging
  //
  let offset = 0; // defaults
  let limit = 10;

  {% if existsIn(template.params, "offset") %}
  offset = {{ template.params.offset }};
  {% endif %}
  {% if existsIn(template.params, "limit") %}
  limit = {{ template.params.limit }};
  {% endif %}

  document.getElementById("current_page").textContent = (offset + limit) / limit;
  document.getElementById("total_pages").textContent = Math.ceil({{ response.numberMatched }}/limit);

  //
  // event handling
  //
  document.getElementById("limit").addEventListener("change", changePageSize);
});
</script>

{% include "footer.html" %}
