{% if suggestions %}
    <div class="py-2">
        {% for suggestion in suggestions %}
            <button class="block w-full px-4 py-2 text-left text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 focus:outline-hidden focus:bg-gray-100 dark:focus:bg-gray-700"
                    @click="selectSuggestion('{{ suggestion.text }}')"
                    @keydown.enter="selectSuggestion('{{ suggestion.text }}')"
                    @keydown.esc="showSuggestions = false"
                    data-text="{{ suggestion.text }}"
                    tabindex="0">
                <div class="flex items-center">
                    {% if suggestion.type == 'park' %}
                        <i class="w-6 mr-2 text-gray-400 fa fa-map-marker-alt"></i>
                    {% elif suggestion.type == 'category' %}
                        <i class="w-6 mr-2 text-gray-400 fa fa-ticket-alt"></i>
                    {% else %}
                        <i class="w-6 mr-2 text-gray-400 fa fa-search"></i>
                    {% endif %}
                    <span>{{ suggestion.text }}</span>
                    {% if suggestion.subtext %}
                        <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">{{ suggestion.subtext }}</span>
                    {% endif %}
                </div>
            </button>
        {% endfor %}
    </div>
{% endif %}