thrillwiki_django_no_react/templates/search_results.html

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

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

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

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

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