{% include "header.html" %}

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

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

<div class="row">
  <div class="col-sm">
    <h2>Properties</h2>
    <ul>
      <li><strong>ID:</strong> {{ response.id }}</li>
      {% for key, value in response.properties %}
      <li><strong>{{ key }}:</strong> {{ value }}</li>
      {% endfor %}
    </ul>
  </div>
  <div class="col-sm">
    <div id="map" class="rounded" style="width:100%;height:400px;">Loading...</div>
  </div>
</div>

<script>
  var geojson = {{ response }};
  var 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>'
    }
  ));
  var features = L.geoJSON(geojson).addTo(map);
  map.fitBounds(features.getBounds());
</script>

{% include "footer.html" %}