{% load static %}

{% if error %}
<div class="p-4" data-testid="park-list-error">
    <div class="inline-flex items-center px-4 py-2 rounded-md bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-800">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
        </svg>
        {{ error }}
    </div>
</div>
{% else %}
{% for park in object_list|default:parks %}
    {% if view_mode == 'list' %}
        {# Enhanced List View Item #}
        <article class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-[1.02] overflow-hidden">
            <div class="p-6">
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
                    {# Main Content Section #}
                    <div class="flex-1 min-w-0">
                        <div class="flex items-start justify-between mb-3">
                            <h2 class="text-xl lg:text-2xl font-bold">
                                <a href="{% url 'parks:park_detail' park.slug %}"
                                   class="bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 bg-clip-text text-transparent hover:from-blue-600 hover:to-purple-600 dark:hover:from-blue-400 dark:hover:to-purple-400 transition-all duration-300">
                                    {{ park.name }}
                                </a>
                            </h2>
                            
                            {# Status Badge #}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border
                                       {% if park.status == 'operating' %}bg-green-50 text-green-700 border-green-200 dark:bg-green-900/20 dark:text-green-400 dark:border-green-800
                                       {% elif park.status == 'closed' %}bg-red-50 text-red-700 border-red-200 dark:bg-red-900/20 dark:text-red-400 dark:border-red-800
                                       {% elif park.status == 'seasonal' %}bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-800
                                       {% else %}bg-gray-50 text-gray-700 border-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600{% endif %}">
                                {{ park.get_status_display }}
                            </span>
                        </div>
                        
                        {% if park.operator %}
                            <div class="text-base font-medium text-gray-600 dark:text-gray-400 mb-3">
                                {{ park.operator.name }}
                            </div>
                        {% endif %}
                        
                        {% if park.description %}
                            <p class="text-gray-600 dark:text-gray-400 line-clamp-2 mb-4">
                                {{ park.description|truncatewords:30 }}
                            </p>
                        {% endif %}
                    </div>
                    
                    {# Stats Section #}
                    {% if park.ride_count or park.coaster_count %}
                        <div class="flex items-center space-x-6 text-sm">
                            {% if park.ride_count %}
                                <div class="flex items-center space-x-2 px-4 py-2 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-lg border border-blue-200/50 dark:border-blue-800/50">
                                    <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                                    </svg>
                                    <span class="font-semibold text-blue-700 dark:text-blue-300">{{ park.ride_count }}</span>
                                    <span class="text-blue-600 dark:text-blue-400">rides</span>
                                </div>
                            {% endif %}
                            {% if park.coaster_count %}
                                <div class="flex items-center space-x-2 px-4 py-2 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg border border-purple-200/50 dark:border-purple-800/50">
                                    <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                    </svg>
                                    <span class="font-semibold text-purple-700 dark:text-purple-300">{{ park.coaster_count }}</span>
                                    <span class="text-purple-600 dark:text-purple-400">coasters</span>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </article>
    {% else %}
        {# Enhanced Grid View Item #}
        <article class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 hover:-rotate-1 overflow-hidden">
            {# Card Header with Gradient #}
            <div class="h-2 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500"></div>
            
            <div class="p-6">
                <div class="flex items-start justify-between mb-4">
                    <h2 class="text-xl font-bold line-clamp-2 flex-1 mr-3">
                        <a href="{% url 'parks:park_detail' park.slug %}"
                           class="bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 bg-clip-text text-transparent hover:from-blue-600 hover:to-purple-600 dark:hover:from-blue-400 dark:hover:to-purple-400 transition-all duration-300">
                            {{ park.name }}
                        </a>
                    </h2>
                    
                    {# Status Badge #}
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold border shrink-0
                               {% if park.status == 'operating' %}bg-green-50 text-green-700 border-green-200 dark:bg-green-900/20 dark:text-green-400 dark:border-green-800
                               {% elif park.status == 'closed' %}bg-red-50 text-red-700 border-red-200 dark:bg-red-900/20 dark:text-red-400 dark:border-red-800
                               {% elif park.status == 'seasonal' %}bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-800
                               {% else %}bg-gray-50 text-gray-700 border-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600{% endif %}">
                        {{ park.get_status_display }}
                    </span>
                </div>
                
                {% if park.operator %}
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-3 truncate">
                        {{ park.operator.name }}
                    </div>
                {% endif %}
                
                {% if park.description %}
                    <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-3 mb-4">
                        {{ park.description|truncatewords:15 }}
                    </p>
                {% endif %}
                
                {# Stats Footer #}
                {% if park.ride_count or park.coaster_count %}
                    <div class="flex items-center justify-between pt-4 border-t border-gray-200/50 dark:border-gray-600/50">
                        <div class="flex items-center space-x-4 text-sm">
                            {% if park.ride_count %}
                                <div class="flex items-center space-x-1 text-blue-600 dark:text-blue-400">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                                    </svg>
                                    <span class="font-semibold">{{ park.ride_count }}</span>
                                </div>
                            {% endif %}
                            {% if park.coaster_count %}
                                <div class="flex items-center space-x-1 text-purple-600 dark:text-purple-400">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                    </svg>
                                    <span class="font-semibold">{{ park.coaster_count }}</span>
                                </div>
                            {% endif %}
                        </div>
                        
                        {# View Details Arrow #}
                        <div class="text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200">
                            <svg class="w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </div>
                    </div>
                {% endif %}
            </div>
        </article>
    {% endif %}
{% empty %}
    <div class="{% if view_mode == 'list' %}w-full{% else %}col-span-full{% endif %} p-12 text-center" data-testid="no-parks-found">
        <div class="mx-auto w-24 h-24 text-gray-300 dark:text-gray-600 mb-6">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
            </svg>
        </div>
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">No parks found</h3>
        <div class="text-gray-600 dark:text-gray-400">
            {% if search_query %}
                <p class="mb-4">No parks found matching "{{ search_query }}". Try adjusting your search terms.</p>
            {% else %}
                <p class="mb-4">No parks found matching your criteria. Try adjusting your filters.</p>
            {% endif %}
            {% if user.is_authenticated %}
                <p>You can also <a href="{% url 'parks:park_create' %}" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-semibold">add a new park</a>.</p>
            {% endif %}
        </div>
    </div>
{% endfor %}
{% endif %}