{% load static %}

<div id="ride-search-results" class="mt-4" role="listbox" aria-label="Search results">
    {% if rides %}
        <div class="space-y-4">
            <div class="text-sm text-gray-600 dark:text-gray-400" aria-live="polite">
                Found {{ rides|length }} ride{{ rides|length|pluralize }}
            </div>

            {% for ride in rides %}
                <div id="ride-option-{{ forloop.counter0 }}"
                     role="option"
                     aria-selected="false"
                     tabindex="-1"
                     class="bg-white dark:bg-gray-800 rounded-lg shadow-xs border border-gray-200 dark:border-gray-700 p-4 hover:shadow-md transition-shadow cursor-pointer">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                <a href="{% url 'parks:rides:ride_detail' park_slug=ride.park.slug ride_slug=ride.slug %}"
                                   class="hover:text-blue-600 dark:hover:text-blue-400">
                                    {{ ride.name }}
                                </a>
                            </h3>

                            <div class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                                at <a href="{% url 'parks:park_detail' slug=ride.park.slug %}"
                                      class="text-blue-600 dark:text-blue-400 hover:underline">
                                    {{ ride.park.name }}
                                </a>
                            </div>

                            {% if ride.description %}
                                <p class="mt-2 text-sm text-gray-700 dark:text-gray-300 line-clamp-2">
                                    {{ ride.description|truncatewords:20 }}
                                </p>
                            {% endif %}

                            <div class="mt-2 flex flex-wrap gap-2">
                                {% if ride.get_category_display %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                        {{ ride.get_category_display }}
                                    </span>
                                {% endif %}

                                {% if ride.status %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                        {% if ride.status == 'OPERATING' %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                                        {% elif ride.status == 'CLOSED_TEMP' %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200
                                        {% else %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200{% endif %}">
                                        {{ ride.get_status_display }}
                                    </span>
                                {% endif %}
                            </div>
                        </div>

                        {% if ride.photos.exists %}
                            <div class="ml-4 shrink-0">
                                {% with ride.photos.first as photo %}
                                    <img src="{{ photo.image.url }}"
                                         alt="{{ ride.name }}"
                                         class="w-16 h-16 rounded-lg object-cover">
                                {% endwith %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="text-center py-8" role="status" aria-live="polite">
            <div class="text-gray-500 dark:text-gray-400">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No rides found</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Try adjusting your search criteria.
                </p>
            </div>
        </div>
    {% endif %}
</div>
