<div class="absolute z-10 w-full bg-white border rounded-lg shadow-lg dark:bg-gray-700 dark:border-gray-600">
    {% for country in countries %}
    <div class="px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"
         hx-post="{% url 'parks:select_country' %}"
         hx-target="#country-input"
         hx-swap="value"
         hx-vals='{"country": "{{ country.name }}"}'>
        {{ country.name }}
    </div>
    {% empty %}
    <div class="px-4 py-2 text-gray-500 dark:text-gray-400">
        No countries found
    </div>
    {% endfor %}
</div>
