{% load static %}

{% if parks %}
<div class="py-2">
    {% for park in parks %}
    <button class="w-full text-left px-4 py-2 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:hover:bg-gray-700 dark:focus:bg-gray-700"
            role="option"
            @click="$dispatch('search-selected', '{{ park.name }}')"
            value="{{ park.id }}">
        <div class="flex justify-between items-center">
            <div>
                <div class="font-medium">{{ park.name }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">
                    {% if park.formatted_location %}
                    {{ park.formatted_location }}
                    {% endif %}
                </div>
            </div>
            <div class="text-sm text-gray-500 dark:text-gray-400">
                {{ park.get_status_display }}
            </div>
        </div>
    </button>
    {% endfor %}
</div>
{% else %}
<div class="px-4 py-2 text-sm text-gray-500 dark:text-gray-400">
    No parks found matching "{{ query }}"
</div>
{% endif %}