{% extends "base.html" %}

{% block title %}
  {%- if result.commons_cat %}{{ result.commons_cat.title }}
  {%- elif result.wikidata %}{{ result.wikidata }}
  {%- else %}{{ lat }}, {{ lon }}
  {%- endif %} — Geocode
{% endblock %}

{% block link %}
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
{% endblock %}

{% block script %}
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>

<script>
  var map = L.map('map').setView([{{ lat }}, {{ lon }}], 13);
  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(map);

  var marker = L.marker([{{ lat }}, {{ lon }}]).addTo(map);

{% if geojson %}
  L.geoJSON({{ geojson | safe }}).addTo(map);
{% endif %}
</script>
{% endblock %}

{% block style %}
<style>
#map {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
}

#main {
  width: 48%;
}

.tag-key {
  color: #6c757d;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  line-height: 1.2;
}

.element-card {
  border-left: 3px solid #dee2e6 !important;
}

.element-card.matched {
  border-left-color: #0d6efd !important;
  background-color: #f8f9ff;
}

details > summary {
  cursor: pointer;
  user-select: none;
}

details > summary:hover {
  color: #0d6efd;
}

{{ css | safe }}
</style>
{% endblock %}

{% block content %}
<div id="map"></div>
<div class="px-3 py-3" id="main">

  <h2 class="mb-0">
    {%- if result.commons_cat %}{{ result.commons_cat.title }}
    {%- elif result.wikidata %}{{ result.wikidata }}
    {%- else %}<span class="text-muted">No result</span>
    {%- endif %}
  </h2>
  <p class="text-muted mb-3" style="font-family:monospace;font-size:0.85em">{{ "%.5f"|format(lat) }}, {{ "%.5f"|format(lon) }}</p>

  <div class="card mb-3">
    <div class="card-body py-2 px-3">
      <div class="row g-2">
        {% if result.wikidata %}
        <div class="col-auto">
          <span class="tag-key">Wikidata</span>
          <a href="https://www.wikidata.org/wiki/{{ result.wikidata }}">{{ result.wikidata }}</a>
        </div>
        {% endif %}
        {% if result.commons_cat %}
        <div class="col-auto">
          <span class="tag-key">Commons category</span>
          <a href="{{ result.commons_cat.url }}">{{ result.commons_cat.title }}</a>
        </div>
        {% endif %}
        {% if result.admin_level %}
        <div class="col-auto">
          <span class="tag-key">Admin level</span>
          {{ result.admin_level }}
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="d-flex flex-wrap gap-2 mb-3">
    <a href="{{ url_for('index') }}" class="btn btn-sm btn-outline-secondary">Home</a>
    <a href="{{ url_for('index', lat=lat, lon=lon) }}{% if not needs_commons %}&needs_commons=false{% endif %}" class="btn btn-sm btn-outline-secondary">API endpoint</a>
    <a href="https://www.openstreetmap.org/#map=17/{{ lat }}/{{ lon }}" class="btn btn-sm btn-outline-secondary">OpenStreetMap</a>
    {% if result.commons_cat %}
    <a href="{{ result.commons_cat.url }}" class="btn btn-sm btn-outline-secondary">Commons category</a>
    {% endif %}
    {% if result.wikidata %}
    <a href="https://www.wikidata.org/wiki/{{ result.wikidata }}" class="btn btn-sm btn-outline-secondary">{{ result.wikidata }}</a>
    {% endif %}
    <a href="{{ url_for('detail_page', lat=lat, lon=lon) }}" class="btn btn-sm btn-outline-secondary">#</a>
    {% if needs_commons %}
    <a href="{{ url_for('detail_page', lat=lat, lon=lon) }}&needs_commons=false" class="btn btn-sm btn-outline-primary">Try without Commons Category</a>
    {% else %}
    <a href="{{ url_for('detail_page', lat=lat, lon=lon) }}" class="btn btn-sm btn-outline-primary">Require Commons Category</a>
    {% endif %}
  </div>

  <details class="mb-3">
    <summary class="text-muted small">API response</summary>
    <pre class="mt-2 p-2 bg-light rounded small">{{ result | tojson(indent=2) }}</pre>
  </details>

  {% if elements %}
  {% set elem_count = elements.count() %}
  <h6 class="text-muted mb-2">{{ elem_count }} surrounding OSM element{{ 's' if elem_count != 1 }}</h6>
  {% for element in elements %}
  {% set tags = element.tags %}
  <div class="card mb-2 element-card{% if element_id == element.osm_id %} matched{% endif %}">
    <div class="card-body py-2 px-3">
      <div class="d-flex align-items-start justify-content-between mb-1">
        <span class="fw-semibold">
          {{ tags.name or ('relation' if element.osm_id < 0 else 'way') ~ ' ' ~ element.osm_id|abs }}
        </span>
        <div class="d-flex gap-2 ms-2 flex-shrink-0">
          {% if tags.wikidata %}
          <a href="https://www.wikidata.org/wiki/{{ tags.wikidata }}" class="badge bg-secondary text-decoration-none small">{{ tags.wikidata }}</a>
          {% endif %}
          <a href="{{ element.osm_url }}" class="badge bg-light text-secondary border text-decoration-none small">OSM</a>
        </div>
      </div>
      <div class="row row-cols-auto g-2 small">
        {% for key, value in tags.items() if not (key == "way_area" or "name:" in key or key.startswith("source") or key == "name" or key == "wikidata") %}
        <div class="col">
          <span class="tag-key">{{ key }}</span>{{ value }}
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endfor %}
  {% else %}
  <p class="text-muted small">No surrounding elements found.</p>
  {% endif %}

  {% if query %}
  <details class="mt-3">
    <summary class="text-muted small">SPARQL geosearch query
      <a href="https://query.wikidata.org/#{{ query | urlencode }}" class="ms-2 small" onclick="event.stopPropagation()">run on Wikidata ↗</a>
    </summary>
    <div class="mt-2">{{ query | highlight_sparql | safe }}</div>
  </details>
  {% endif %}

</div>
{% endblock %}