<!-- Active filters display (mobile and desktop) -->
{% if has_filters %}
<div class="mb-6">
  <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
    <div class="flex items-center justify-between mb-2">
      <h3 class="text-sm font-medium text-blue-900 dark:text-blue-100">
        <i class="fas fa-filter mr-2"></i>
        Active Filters ({{ active_filters|length }})
      </h3>
      <button hx-get="{% url 'rides:global_ride_list' %}{% if park %}?park={{ park.id }}{% endif %}"
              hx-target="#filter-results" 
              hx-push-url="true"
              class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors">
        <i class="fas fa-times mr-1"></i>
        Clear All
      </button>
    </div>
    
    <div class="flex flex-wrap gap-2">
      {% for filter_key, filter_info in active_filters.items %}
        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
          {{ filter_info.label }}: {{ filter_info.value }}
          <button hx-get="{{ filter_info.remove_url }}" 
                  hx-target="#filter-results" 
                  hx-push-url="true"
                  class="ml-1 text-blue-600 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-100">
            <i class="fas fa-times text-xs"></i>
          </button>
        </span>
      {% endfor %}
    </div>
  </div>
</div>
{% endif %}

<!-- Results header with count and sorting -->
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
  <div class="mb-4 sm:mb-0">
    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
      {% if filtered_count == total_rides %}
        All {{ total_rides }} ride{{ total_rides|pluralize }}
      {% else %}
        {{ filtered_count }} of {{ total_rides }} ride{{ total_rides|pluralize }}
      {% endif %}
      {% if park %}
        at {{ park.name }}
      {% endif %}
    </h2>
    {% if query %}
    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
      <i class="fas fa-search mr-1"></i>
      Searching for: "{{ query }}"
    </p>
    {% endif %}
  </div>
  
  <!-- Sort options -->
  <div class="flex items-center space-x-2">
    <label for="sort-select" class="text-sm font-medium text-gray-700 dark:text-gray-300">Sort by:</label>
    <select id="sort-select" 
            name="sort" 
            hx-get="{% url 'rides:global_ride_list' %}"
            hx-target="#filter-results" 
            hx-include="[name='q'], [name='category'], [name='manufacturer'], [name='designer'], [name='min_height'], [name='max_height'], [name='min_speed'], [name='max_speed'], [name='min_capacity'], [name='max_capacity'], [name='min_duration'], [name='max_duration'], [name='opened_after'], [name='opened_before'], [name='closed_after'], [name='closed_before'], [name='operating_status'], [name='has_inversions'], [name='has_launches'], [name='track_type'], [name='min_inversions'], [name='max_inversions'], [name='min_launches'], [name='max_launches'], [name='min_top_speed'], [name='max_top_speed'], [name='min_max_height'], [name='max_max_height']{% if park %}, [name='park']{% endif %}"
            hx-push-url="true"
            class="form-select text-sm">
      <option value="name" {% if current_sort == 'name' %}selected{% endif %}>Name (A-Z)</option>
      <option value="-name" {% if current_sort == '-name' %}selected{% endif %}>Name (Z-A)</option>
      <option value="-opened_date" {% if current_sort == '-opened_date' %}selected{% endif %}>Newest First</option>
      <option value="opened_date" {% if current_sort == 'opened_date' %}selected{% endif %}>Oldest First</option>
      <option value="-height" {% if current_sort == '-height' %}selected{% endif %}>Tallest First</option>
      <option value="height" {% if current_sort == 'height' %}selected{% endif %}>Shortest First</option>
      <option value="-max_speed" {% if current_sort == '-max_speed' %}selected{% endif %}>Fastest First</option>
      <option value="max_speed" {% if current_sort == 'max_speed' %}selected{% endif %}>Slowest First</option>
      <option value="-capacity_per_hour" {% if current_sort == '-capacity_per_hour' %}selected{% endif %}>Highest Capacity</option>
      <option value="capacity_per_hour" {% if current_sort == 'capacity_per_hour' %}selected{% endif %}>Lowest Capacity</option>
      <option value="relevance" {% if current_sort == 'relevance' %}selected{% endif %}>Most Relevant</option>
    </select>
  </div>
</div>

<!-- Results grid -->
{% if rides %}
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
  {% for ride in rides %}
  <div class="ride-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-lg transition-all duration-300">
    <!-- Ride image -->
    <div class="relative h-48 bg-gradient-to-br from-blue-500 to-purple-600">
      {% if ride.image %}
        <img src="{{ ride.image.url }}" 
             alt="{{ ride.name }}" 
             class="w-full h-full object-cover">
      {% else %}
        <div class="flex items-center justify-center h-full">
          <i class="fas fa-rocket text-4xl text-white opacity-50"></i>
        </div>
      {% endif %}
      
      <!-- Status badge -->
      <div class="absolute top-3 right-3">
        {% if ride.operating_status == 'operating' %}
          <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
            <i class="fas fa-play-circle mr-1"></i>
            Operating
          </span>
        {% elif ride.operating_status == 'closed_temporarily' %}
          <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
            <i class="fas fa-pause-circle mr-1"></i>
            Temporarily Closed
          </span>
        {% elif ride.operating_status == 'closed_permanently' %}
          <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
            <i class="fas fa-stop-circle mr-1"></i>
            Permanently Closed
          </span>
        {% elif ride.operating_status == 'under_construction' %}
          <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
            <i class="fas fa-hard-hat mr-1"></i>
            Under Construction
          </span>
        {% endif %}
      </div>
    </div>
    
    <!-- Ride details -->
    <div class="p-5">
      <!-- Name and category -->
      <div class="mb-3">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">
          <a href="{% url 'rides:ride_detail' ride.id %}" 
             class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            {{ ride.name }}
          </a>
        </h3>
        <div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
          <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 mr-2">
            {{ ride.category|default:"Ride" }}
          </span>
          {% if ride.park %}
          <span class="flex items-center">
            <i class="fas fa-map-marker-alt mr-1"></i>
            {{ ride.park.name }}
          </span>
          {% endif %}
        </div>
      </div>
      
      <!-- Key stats -->
      <div class="grid grid-cols-2 gap-3 mb-4">
        {% if ride.height %}
        <div class="text-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
          <div class="text-lg font-semibold text-gray-900 dark:text-white">{{ ride.height }}ft</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">Height</div>
        </div>
        {% endif %}
        
        {% if ride.rollercoaster_stats.max_speed %}
        <div class="text-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
          <div class="text-lg font-semibold text-gray-900 dark:text-white">{{ ride.rollercoaster_stats.max_speed }}mph</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">Top Speed</div>
        </div>
        {% elif ride.max_speed %}
        <div class="text-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
          <div class="text-lg font-semibold text-gray-900 dark:text-white">{{ ride.max_speed }}mph</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">Max Speed</div>
        </div>
        {% endif %}
        
        {% if ride.capacity_per_hour %}
        <div class="text-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
          <div class="text-lg font-semibold text-gray-900 dark:text-white">{{ ride.capacity_per_hour }}</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">Capacity/Hr</div>
        </div>
        {% endif %}
        
        {% if ride.duration %}
        <div class="text-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
          <div class="text-lg font-semibold text-gray-900 dark:text-white">{{ ride.duration }}s</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">Duration</div>
        </div>
        {% endif %}
      </div>
      
      <!-- Special features -->
      {% if ride.has_inversions or ride.has_launches or ride.rollercoaster_stats %}
      <div class="flex flex-wrap gap-1 mb-3">
        {% if ride.has_inversions %}
        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
          <i class="fas fa-sync-alt mr-1"></i>
          {% if ride.rollercoaster_stats.number_of_inversions %}
            {{ ride.rollercoaster_stats.number_of_inversions }} Inversion{{ ride.rollercoaster_stats.number_of_inversions|pluralize }}
          {% else %}
            Inversions
          {% endif %}
        </span>
        {% endif %}
        
        {% if ride.has_launches %}
        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
          <i class="fas fa-rocket mr-1"></i>
          {% if ride.rollercoaster_stats.number_of_launches %}
            {{ ride.rollercoaster_stats.number_of_launches }} Launch{{ ride.rollercoaster_stats.number_of_launches|pluralize }}
          {% else %}
            Launched
          {% endif %}
        </span>
        {% endif %}
        
        {% if ride.rollercoaster_stats.track_type %}
        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
          {{ ride.rollercoaster_stats.track_type|title }}
        </span>
        {% endif %}
      </div>
      {% endif %}
      
      <!-- Opening date -->
      {% if ride.opened_date %}
      <div class="text-sm text-gray-600 dark:text-gray-400 mb-3">
        <i class="fas fa-calendar mr-1"></i>
        Opened {{ ride.opened_date|date:"F j, Y" }}
      </div>
      {% endif %}
      
      <!-- Manufacturer -->
      {% if ride.manufacturer %}
      <div class="text-sm text-gray-600 dark:text-gray-400">
        <i class="fas fa-industry mr-1"></i>
        {{ ride.manufacturer.name }}
        {% if ride.designer and ride.designer != ride.manufacturer %}
          • Designed by {{ ride.designer.name }}
        {% endif %}
      </div>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>

<!-- Pagination -->
{% if is_paginated %}
<div class="mt-8 flex items-center justify-between">
  <div class="flex items-center text-sm text-gray-700 dark:text-gray-300">
    <p>
      Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ filtered_count }} results
    </p>
  </div>
  
  <div class="flex items-center space-x-2">
    {% if page_obj.has_previous %}
      <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.previous_page_number }}"
         hx-get="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.previous_page_number }}"
         hx-target="#filter-results"
         hx-push-url="true"
         class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-600">
        <i class="fas fa-chevron-left mr-1"></i>
        Previous
      </a>
    {% endif %}
    
    <!-- Page numbers -->
    <div class="hidden sm:flex items-center space-x-1">
      {% for num in page_obj.paginator.page_range %}
        {% if page_obj.number == num %}
          <span class="inline-flex items-center px-3 py-2 border border-blue-500 bg-blue-50 text-blue-600 rounded-md text-sm font-medium dark:bg-blue-900 dark:text-blue-200 dark:border-blue-700">
            {{ num }}
          </span>
        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
          <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ num }}"
             hx-get="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ num }}"
             hx-target="#filter-results"
             hx-push-url="true"
             class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-600">
            {{ num }}
          </a>
        {% endif %}
      {% endfor %}
    </div>
    
    {% if page_obj.has_next %}
      <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.next_page_number }}"
         hx-get="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.next_page_number }}"
         hx-target="#filter-results"
         hx-push-url="true"
         class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-600">
        Next
        <i class="fas fa-chevron-right ml-1"></i>
      </a>
    {% endif %}
  </div>
</div>
{% endif %}

{% else %}
<!-- No results state -->
<div class="text-center py-12">
  <div class="mx-auto h-24 w-24 text-gray-400 dark:text-gray-600 mb-4">
    <i class="fas fa-search text-6xl"></i>
  </div>
  <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No rides found</h3>
  <p class="text-gray-600 dark:text-gray-400 mb-6">
    {% if has_filters %}
      Try adjusting your filters to see more results.
    {% else %}
      No rides match your current search criteria.
    {% endif %}
  </p>
  {% if has_filters %}
  <button hx-get="{% url 'rides:global_ride_list' %}{% if park %}?park={{ park.id }}{% endif %}"
          hx-target="#filter-results" 
          hx-push-url="true"
          class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-colors">
    <i class="fas fa-times mr-2"></i>
    Clear All Filters
  </button>
  {% endif %}
</div>
{% endif %}

<!-- HTMX loading indicator -->
<div class="htmx-indicator fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 z-50">
  <div class="flex items-center space-x-3">
    <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
    <span class="text-sm font-medium text-gray-900 dark:text-white">Loading results...</span>
  </div>
</div>
