{% if result.commons_cat %}
<h5 class="mb-0 mt-1">{{ result.commons_cat.title }}</h5>
{% elif result.wikidata %}
<h5 class="mb-0 mt-1">{{ result.wikidata }}</h5>
{% else %}
<h5 class="mb-0 mt-1 text-muted">No result</h5>
{% endif %}
<p class="text-muted mb-3" style="font-family:monospace;font-size:0.85em">{{ lat }}, {{ 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('detail_page', lat=lat, lon=lon) }}{% if not needs_commons %}&needs_commons=false{% endif %}" class="btn btn-sm btn-outline-secondary">Detail page</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 %}
</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 %}