{% extends 'base/base.html' %}
{% load static %}

{% block title %}Search Results - ThrillWiki{% endblock %}

{% block content %}
<div class="container px-4 py-8 mx-auto">
    <!-- Search Header -->
    <div class="mb-8">
        <h1 class="mb-2 text-3xl font-bold">Search Results</h1>
        <p class="text-gray-600 dark:text-gray-400">
            {% if request.GET.q %}
                Results for "{{ request.GET.q }}"
            {% else %}
                Enter a search term above to find parks, rides, and more
            {% endif %}
        </p>
    </div>

    {% if request.GET.q %}
        <!-- Parks Results -->
        <div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
            <h2 class="mb-4 text-xl font-semibold">Theme Parks</h2>
            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                {% for park in parks %}
                    <div class="overflow-hidden rounded-lg bg-gray-50 dark:bg-gray-700">
                        {% if park.photos.exists %}
                            <img src="{{ park.photos.first.image.url }}" 
                                 alt="{{ park.name }}"
                                 class="object-cover w-full h-48">
                        {% else %}
                            <div class="flex items-center justify-center w-full h-48 bg-gray-200 dark:bg-gray-600">
                                <span class="text-gray-400">No image available</span>
                            </div>
                        {% endif %}
                        
                        <div class="p-4">
                            <h3 class="mb-2 text-lg font-semibold">
                                <a href="{% url 'parks:park_detail' park.slug %}" 
                                   class="text-blue-600 hover:underline dark:text-blue-400">
                                    {{ park.name }}
                                </a>
                            </h3>
                            <p class="mb-2 text-gray-600 dark:text-gray-400">{{ park.location }}</p>
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-500 dark:text-gray-400">
                                    {{ park.rides.count }} attractions
                                </span>
                                {% if park.average_rating %}
                                    <div class="flex items-center">
                                        <span class="mr-1 text-yellow-400">★</span>
                                        <span>{{ park.average_rating|floatformat:1 }}/10</span>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% empty %}
                    <div class="py-4 text-center col-span-full">
                        <p class="text-gray-500 dark:text-gray-400">No parks found matching your search.</p>
                    </div>
                {% endfor %}
            </div>
        </div>

        <!-- Rides Results -->
        <div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
            <h2 class="mb-4 text-xl font-semibold">Rides & Attractions</h2>
            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                {% for ride in rides %}
                    <div class="overflow-hidden rounded-lg bg-gray-50 dark:bg-gray-700">
                        {% if ride.photos.exists %}
                            <img src="{{ ride.photos.first.image.url }}" 
                                 alt="{{ ride.name }}"
                                 class="object-cover w-full h-48">
                        {% else %}
                            <div class="flex items-center justify-center w-full h-48 bg-gray-200 dark:bg-gray-600">
                                <span class="text-gray-400">No image available</span>
                            </div>
                        {% endif %}
                        
                        <div class="p-4">
                            <h3 class="mb-2 text-lg font-semibold">
                                <a href="{% url 'rides:ride_detail' ride.park.slug ride.slug %}" 
                                   class="text-blue-600 hover:underline dark:text-blue-400">
                                    {{ ride.name }}
                                </a>
                            </h3>
                            <p class="mb-2 text-gray-600 dark:text-gray-400">
                                at <a href="{% url 'parks:park_detail' ride.park.slug %}" 
                                     class="hover:underline">{{ ride.park.name }}</a>
                            </p>
                            <div class="flex flex-wrap gap-2 mb-2">
                                <span class="px-2 py-1 text-xs text-blue-800 bg-blue-100 rounded-full">
                                    {{ ride.get_category_display }}
                                </span>
                                {% if ride.average_rating %}
                                    <div class="flex items-center">
                                        <span class="mr-1 text-yellow-400">★</span>
                                        <span>{{ ride.average_rating|floatformat:1 }}/10</span>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% empty %}
                    <div class="py-4 text-center col-span-full">
                        <p class="text-gray-500 dark:text-gray-400">No rides found matching your search.</p>
                    </div>
                {% endfor %}
            </div>
        </div>

        <!-- Companies Results -->
        <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
            <h2 class="mb-4 text-xl font-semibold">Companies</h2>
            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                {% for company in companies %}
                    <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700">
                        <h3 class="mb-2 text-lg font-semibold">
                            <a href="{% url 'companies:company_detail' company.slug %}" 
                               class="text-blue-600 hover:underline dark:text-blue-400">
                                {{ company.name }}
                            </a>
                        </h3>
                        {% if company.headquarters %}
                            <p class="mb-2 text-gray-600 dark:text-gray-400">{{ company.headquarters }}</p>
                        {% endif %}
                        <div class="text-sm text-gray-500 dark:text-gray-400">
                            {{ company.parks.count }} parks owned
                        </div>
                    </div>
                {% empty %}
                    <div class="py-4 text-center col-span-full">
                        <p class="text-gray-500 dark:text-gray-400">No companies found matching your search.</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}