{% extends "_base.html" %}
{% block title %}{{ data.get('properties',{}).get('title',data['id']) }} - {{ super() }}{% endblock %}
{% block extrahead %}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <style>
        #records-map {
            height: 350px;
        }
    </style>

{% endblock %}

{% block crumbs %}
{{ super() }} /
<a href="{{ config['server']['url'] }}/collections">Collections</a> /
<a href="{{ config['server']['url'] }}/collections/{{ data['collection'] }}">{{ data['title'] }}</a> /
<a href="{{ config['server']['url'] }}/collections/{{ data['collection'] }}/items">Items</a> /
<a href="{{ config['server']['url'] }}/collections/{{ data['collection'] }}/items/{{ data['id'] }}">{{ data['id'] }}</a>
{% endblock %}
{% block body %}

<section id="item">
<div class="container-fluid">
  <div class="row pb-3">
    <div class="col-lg-12">
      <small class="text-primary fw-bold">{{ (data.get('properties',{}).get('type') or '').split('/').pop() | capitalize }}</small>
      <h2>{{ data.get('properties',{}).get('title',data['id']) }}</h2>
      <p>{{ data.get('properties',{}).get('description','') | urlize }}</p>
    </div>
  </div>

  <div class="row pb-5">
    <div class="col-lg-6">
      <div id="records-map"></div>
    </div>
    <div class="col-lg-6">
      <table class="table table-striped table-hover" id="items-table-table">
        <thead>
          <tr>
            <th>Property</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          {% if 'properties' in data %}
            {% for key, value in data['properties'].items() %}
              <tr>
                <td>{{ key | capitalize }}</td>
                {% if key == 'keywords' or key == 'formats' %}
                  <td>
                    <ul>
                    {% for keyword in value %}
                      <li>{{ keyword }}</li>
                    {% endfor %}
                    </ul>
                  </td>
                {% elif key == 'themes' %}
                  <td>
                  {% for theme in value %}
                    <b>{{ theme['scheme'] }}</b>
                    <ul>
                    {% for concept in theme['concepts'] %}
                      <li>
                        {% if concept['url'] %}
                          <a href="{{ concept['url'] }}">{{ concept['name'] or concept['url'] }}</a>
                        {% else %}
                          {{ concept['name'] }}
                        {% endif %}
                      </li>
                    {% endfor %}
                    </ul>
                  {% endfor %}
                  </td>
                {% elif key == 'externalIds' %}
                  <td>
                    <ul>
                      {% for id in value %}
                      <li>{{ id['scheme'] | urlize }} {{ id['value'] | urlize }}</li>
                      {% endfor %}
                    </ul>
                  </td>
                {% elif key == 'providers' %}
                  <td>
                    {% for cnt in data['properties']['providers'] %}
                      {% if 'name' in cnt and cnt['name'] not in [None,''] %}
                        {{ cnt['name'] }} <br/>
                      {% endif %}
                      {% if 'roles' in cnt and cnt['roles'] is not string %}
                      Role: {{ cnt['roles'] | map(attribute='name') | join(',') }} <br/>
                      {% endif %}
                      {% if 'positionName' in cnt and cnt['positionName'] not in [None,''] %}
                      Position: {{ cnt['positionName'] }})<br/>
                      {% endif %}
                      {% if 'contactInfo' in cnt and cnt['contactInfo'] is not string %}
                        {% for k,e in cnt['contactInfo'].get('phone',{}).items() %}
                          {% if e %}{{ k }}: {{ e }}<br/>{% endif %}
                        {% endfor %}
                        {% for k,e in cnt['contactInfo'].get('email',{}).items() %}
                          {% if e not in [None,''] %}{{ k }}: {{ e | urlize }}<br/>{% endif %}
                        {% endfor %}
                        {% for k,e in cnt['contactInfo'].get('address',{}).items() %}
                          {{ k }}: {% for a,b in e.items() %}{% if b %}{{ b }}, {% endif %}{% endfor %}<br/>
                        {% endfor %}
                        {% if cnt['contactInfo']['url'] %}
                          {{ cnt['contactInfo']['url'].get('href','') | urlize }}
                        {% endif %}
                      {% endif %}
                    {% endfor %}
                  </td>
                {% else %}
                  {% if key in ['title','description'] %}
                    <td>{{ value | truncate(80, False, '...') }}</td>
                  {% else %}
                    <td>{{ value | urlize }}</td>
                  {% endif %}
                {% endif %}
              </tr>
            {% endfor %}
          {% endif %}
          {% if data['time'] %}
          <tr>
            <td>Temporal</td>
            <td>
              <ul>
                {% if data['time'] is string  %}
                  <li>{{ data['time'] }}</li>
                {% else %}
                  {% for d in data['time'] %}
                    <li>{{ d }}</li>
                  {% endfor %}
                {% endif %}
              </ul>
            </td>
          </tr>
          {% endif %}
          <tr>
            <td>Links</td>
            <td>
              <ul>
                {% for link in data['links'] %}
                  {% if link['name'] %}
                    {% if link['description'] %}
                      <li><a href="{{ link['href'] }}" title="{{ link['description'] }}">{{ link['name'] }}</a></li>
                    {% else %}
                      <li><a href="{{ link['href'] }}" title="{{ link['name'] }}">{{ link['name'] }}</a></li>
                    {% endif %}
                  {% elif link['description'] %}
                    <li><a href="{{ link['href'] }}" title="{{ link['description'] }}">{{ link['description'] }}</a></li>
                  {% else %}
                    <li><a href="{{ link['href'] }}" title="{{ link['rel'] }}">{{ link['rel'] }}</a></li>
                  {% endif %}
                {% endfor %}
              </ul>
          </tr>
          {% if 'assets' in data %}
          <tr>
            <td>Assets</td>
            <td>
              <ul>
                {% for key, value in data['assets'].items() %}
                  {% if value['title'] %}
                    <li><a href="{{ value['href'] }}" title="{{ value['title'] }}">{{ key }}</a></li>
                  {% else %}
                    <li><a href="{{ value['href'] }}" title="{{ key }}">{{ key }}</a></li>
                  {% endif %}
                {% endfor %}
              </ul>
          </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</div>

</section>

{% endblock %}

{% block extrafoot %}
<script>
var map = L.map('records-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 geojson_data = {{ data | to_json }};
var items = new L.GeoJSON(geojson_data);

map.addLayer(items);
var bounds = items.getBounds();
if (bounds.isValid() === true) {
    map.fitBounds(bounds);
}

var highlightStyle = {
    color: 'red',
    dashArray: '',
    fillOpacity: 0.5
}

$(document).ready(function() {
    $('#items-table-table tr').on('mouseenter', function(e){
        id_ = $(this).find('[id]').attr('id');
        layer = items.getLayer(id_); //your feature id here
        if (layer) {
            layer.setStyle(highlightStyle);
        }
    }).on('mouseout', function(e){
        id_ = $(this).find('[id]').attr('id');
        layer = items.getLayer(id_); //your feature id here
        items.resetStyle(layer);
    });
});
</script>
{% endblock %}