{% extends "_base.html" %}
{% set ptitle = data['properties'][data['title_field']] or data['id'] | string %}
{% block desc %}{{ data.get('properties',{}).get('description', {}) | string | truncate(250) }}{% endblock %}
{% block tags %}{{ data['properties'].get('themes', [{}])[0].get('concepts', []) | join(',') }}{% endblock %}
{# Optionally renders an img element, otherwise standard value or link rendering #}
{% macro render_item_value(v, width) -%}
    {% set val = v | string | trim %}
    {% if val|length and val.lower().endswith(('.jpg', '.jpeg', '.png', '.gif', '.bmp')) %}
        {# Ends with image extension: render img element with link to image #}
        <a href="{{ val }}"><img src="{{ val }}" alt="{{ val.split('/') | last }}" width="{{ width }}"/></a>
    {% elif v is string or v is number %}
        {{ val | urlize() }}
    {% elif v is mapping %}
      {% for i,j in v.items() %}
        <i>{{ i }}:</i> {{ render_item_value(j, 60) }}<br/>
      {% endfor %}
    {% elif v is iterable %}
      {% for i in v %}
        {{ render_item_value(i, 60) }}
      {% endfor %}
    {% else %}
      {{ val | urlize() }}
    {% endif %}
{%- endmacro %}
{% block title %}{{ ptitle }}{% endblock %}
{% block crumbs %}{{ super() }}
/ <a href="{{ data['collections_path'] }}">{% trans %}Collections{% endtrans %}</a>
{% for link in data['links'] %}
  {% if link.rel == 'collection' %}
/  <a href="{{ link['href'] }}">{{ link['title'] | truncate( 25 ) }}</a>
  {% endif %}
{% endfor %}
/ <a href="../items">{% trans %}Items{% endtrans %}</a>
/ <a href="./{{ data['id'] }}">{{ ptitle | 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="item">
      <div class="row">
        <div class="col-sm">
          <h1>{{ ptitle }}</h1>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 col-sm-12">
          <div class="row">
            <div class="col-sm-12">
              <div id="items-map"></div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              {% if data['prev'] or data['next'] %}
              <div class="row">
                <div class="col-sm-12">
                  {% for link in data['links'] %}
                  {% if link['rel'] == 'prev' %}
                  <a role="button" href="./{{ data['prev'] }}">{% trans %}Prev{% endtrans %}</a>
                  {% elif link['rel'] == 'next' %}
                  <a role="button" href="./{{ data['next'] }}">{% trans %}Next{% endtrans %}</a>
                  {% endif %}
                  {% endfor %}
                </div>
              </div>
              {% endif %}
            </div>
          </div>
        </div>
        <div class="col-md-6 col-sm-12">
            <table class="table table-striped table-bordered">
              <thead>
              <tr>
                <th>{% trans %}Property{% endtrans %}</th>
                <th>{% trans %}Value{% endtrans %}</th>
              </tr>
            </thead>
            <tbody>
            {% if data.uri_field %}
              <tr>
                <td>{{ data.uri_field }}</td>
                <td><a href="{{ data['properties'].get(data.uri_field) }}" title="{{ data['properties'].get(data.uri_field) }}">{{ data['properties'].pop(data.uri_field) }}</a></td>
              </tr>
              {% endif %}
              <tr>
                <td>id</td>
                <td>{{ data.id }}</td>
              </tr>
              {% for k, v in data['properties'].items() %}
                {% if k != data['id_field'] %}
                <tr>
                  <td>{{ k | striptags }}</td>
                  <td>{{ render_item_value(v, 80) }}</td>
                </tr>
                {% endif %}
              {% endfor %}
                <tr>
                  <td>{% trans %}Links{% endtrans %}</td>
                  <td>
                    <ul>
                      {% for l in data['links'] %}
                      {% if l['href'] %}
                        <li><a href="{{ l['href'] }}" title="{{ l['title'] or l['href'].split('/') }}">{{ l['title'] or (l['href'].split('/') | last) | truncate( 25 ) }}</a>
                        {% if l['type'] %}
                          ({{ l['type'] }})
                        {% endif %}
                        </li>
                      {% endif %}
                      {% endfor %}
                    </ul>
                  </td>
                </tr>
            </tbody>
            </table>
        </div>
      </div>
    </section>
{% endblock %}

{% block extrafoot %}
    <script>
    var map = L.map('items-map').setView([{{ 45 }}, {{ -75 }}], 10);
    map.addLayer(new L.TileLayer(
        '{{ config['server']['map']['url'] }}', {
            maxZoom: 18,
            attribution: '{{ config['server']['map']['attribution'] | safe }}'
        }
    ));
    var geojson_data = {{ data | to_json | safe }};
    var items = new L.GeoJSON(geojson_data);

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