{% if suggestions %}
  <div id="search-suggestions" class="search-suggestions bg-white rounded-lg shadow-lg overflow-hidden">
    {% for suggestion in suggestions %}
      <div class="suggestion px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer flex items-center gap-2"
           data-type="{{ suggestion.type }}"
           data-suggestion="{{ suggestion.text|escape }}"
           role="option">
        {% if suggestion.type == 'ride' %}
          <span class="icon text-xl">🎢</span>
          <span class="text flex-grow text-gray-900 dark:text-white">{{ suggestion.text }}</span>
          <span class="count text-sm text-gray-500 dark:text-gray-400">({{ suggestion.count }} rides)</span>
        {% elif suggestion.type == 'park' %}
          <span class="icon text-xl">🎪</span>
          <span class="text flex-grow text-gray-900 dark:text-white">{{ suggestion.text }}</span>
          {% if suggestion.location %}
            <span class="location text-sm text-gray-500 dark:text-gray-400">{{ suggestion.location }}</span>
          {% endif %}
        {% elif suggestion.type == 'category' %}
          <span class="icon text-xl">📂</span>
          <span class="text flex-grow text-gray-900 dark:text-white">{{ suggestion.text }}</span>
          <span class="count text-sm text-gray-500 dark:text-gray-400">({{ suggestion.count }} rides)</span>
        {% endif %}
      </div>
    {% endfor %}
  </div>
{% endif %}