<div
  id="nearby-results"
  class="mt-3 max-h-60 overflow-y-auto rounded-lg border bg-surface"
>
  {% if cafes.is_empty() %}
    <p class="px-3 py-2 text-sm text-text-muted">No nearby cafes found.</p>
  {% else %}
    <h3
      class="px-3 py-2 text-xs font-semibold text-text-muted uppercase tracking-wide"
    >
      Nearby
    </h3>
    {% for cafe in cafes %}
      <button
        type="button"
        class="w-full px-3 py-2 text-left text-sm hover:bg-surface-alt transition"
        data-cafe-name="{{ cafe.name }}"
        data-cafe-city="{{ cafe.city }}"
        data-cafe-country="{{ cafe.country }}"
        data-cafe-lat="{{ cafe.latitude }}"
        data-cafe-lng="{{ cafe.longitude }}"
        data-cafe-website="{{ cafe.website }}"
        data-on:click="$_cafeId = ''; $_cafeName = el.dataset.cafeName; $_cafeCity = el.dataset.cafeCity; $_cafeCountry = el.dataset.cafeCountry; $_cafeLat = parseFloat(el.dataset.cafeLat); $_cafeLng = parseFloat(el.dataset.cafeLng); $_cafeWebsite = el.dataset.cafeWebsite; $_reviewingCafe = true"
      >
        <span class="font-medium text-text">{{ cafe.name }}</span>
        <span class="ml-2 text-xs text-text-muted"
          >{{ cafe.location }} &middot; {{ cafe.distance }}</span
        >
      </button>
    {% endfor %}
  {% endif %}
</div>
