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

{% block title %}
  {% if park %}
    {{ park.name }} - Rides
  {% else %}
    All Rides
  {% endif %}
{% endblock %}

{% block extra_css %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
/* Custom styles for the ride filtering interface */
.filter-sidebar {
  width: 320px;
  min-width: 320px;
  max-height: calc(100vh - 4rem);
  position: sticky;
  top: 4rem;
}

@media (max-width: 1024px) {
  .filter-sidebar {
    width: 280px;
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .filter-sidebar {
    width: 100%;
    min-width: auto;
    position: relative;
    top: auto;
    max-height: none;
  }
}

.filter-toggle {
  transition: all 0.2s ease-in-out;
}

.filter-toggle:hover {
  background-color: rgba(59, 130, 246, 0.05);
}

.filter-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.filter-content.open {
  max-height: 1000px;
}

/* Custom form styling */
.form-input, .form-select, .form-textarea {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm 
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
         dark:bg-gray-700 dark:border-gray-600 dark:text-white 
         dark:focus:ring-blue-400 dark:focus:border-blue-400;
}

.form-checkbox {
  @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 
         focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 
         dark:bg-gray-700 dark:border-gray-600;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
}

/* Ride card animations */
.ride-card {
  transition: all 0.3s ease-in-out;
}

.ride-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Loading spinner */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: block;
}

.htmx-request.htmx-indicator {
  display: block;
}

/* Mobile filter overlay */
@media (max-width: 768px) {
  .mobile-filter-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
  }
  
  .mobile-filter-panel {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 320px;
    background: white;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
  }
  
  .mobile-filter-panel.open {
    transform: translateX(0);
  }
}
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
  <!-- Mobile filter overlay -->
  <div id="mobile-filter-overlay" class="mobile-filter-overlay hidden lg:hidden"></div>
  
  <!-- Header -->
  <div class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
    <div class="max-w-full px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <!-- Title and breadcrumb -->
        <div class="flex items-center space-x-4">
          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
            {% if park %}
              <i class="fas fa-map-marker-alt mr-2 text-blue-600 dark:text-blue-400"></i>
              {{ park.name }} - Rides
            {% else %}
              <i class="fas fa-rocket mr-2 text-blue-600 dark:text-blue-400"></i>
              All Rides
            {% endif %}
          </h1>
          
          <!-- Mobile filter toggle -->
          <button id="mobile-filter-toggle" 
                  class="lg:hidden 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-filter mr-2"></i>
            Filters
            {% if has_filters %}
            <span class="ml-1 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
              {{ active_filters|length }}
            </span>
            {% endif %}
          </button>
        </div>
        
        <!-- Results summary -->
        <div class="hidden sm:flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
          <span>
            <i class="fas fa-list mr-1"></i>
            {{ filtered_count }} of {{ total_rides }} rides
          </span>
          
          <!-- Loading indicator -->
          <div class="htmx-indicator">
            <i class="fas fa-spinner fa-spin text-blue-600"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Main content area -->
  <div class="flex">
    <!-- Desktop filter sidebar -->
    <div class="hidden lg:block">
      {% include "rides/partials/filter_sidebar.html" %}
    </div>
    
    <!-- Mobile filter panel -->
    <div id="mobile-filter-panel" class="mobile-filter-panel lg:hidden dark:bg-gray-900">
      <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Filters</h3>
        <button id="mobile-filter-close" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
          <i class="fas fa-times"></i>
        </button>
      </div>
      {% include "rides/partials/filter_sidebar.html" %}
    </div>

    <!-- Results area -->
    <div class="flex-1 min-w-0">
      <div id="filter-results" class="p-4 lg:p-6">
        {% include "rides/partials/ride_list_results.html" %}
      </div>
    </div>
  </div>
</div>

<!-- AlpineJS Mobile Filter Component (HTMX + AlpineJS Only) -->
<div x-data="{ 
  mobileFilterOpen: false,
  openMobileFilter() {
    this.mobileFilterOpen = true;
    document.body.style.overflow = 'hidden';
  },
  closeMobileFilter() {
    this.mobileFilterOpen = false;
    document.body.style.overflow = '';
  }
}" 
@keydown.escape="closeMobileFilter()" 
style="display: none;">
  <!-- Mobile filter functionality handled by AlpineJS -->
</div>
{% endblock %}