Standardize park and ride cards with django-cotton component

Updates CSS with new Tailwind classes and refactors ride card template to use django-cotton, implementing park-specific URL generation and graceful handling of missing slugs.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0bdea3fb-49ea-4863-b501-fa6f5af0cbf0
Replit-Commit-Checkpoint-Type: intermediate_checkpoint

templates/cotton/ride_card.html

@@ -1,45 +1,61 @@
 {% comment %}
 Ride Card Component - Django Cotton Version
 
-A comprehensive ride card component with image handling, status badges, and feature displays.
-Includes all ride statistics, special features, and manufacturer information.
+A comprehensive ride card component with image handling, status badges, feature displays,
+and robust URL generation that supports both global and park-specific URL patterns.
+Includes graceful handling of missing slugs to prevent 500 errors.
 
 Usage Examples:
 
-Basic usage:
+Basic usage (default global URL pattern):
 <c-ride_card ride=ride />
 
+Park-specific URL pattern:
+<c-ride_card ride=ride url_variant="park" />
+
 With custom CSS classes:
 <c-ride_card 
     ride=ride
+    url_variant="global"
     class="custom-class"
 />
 
 With custom image fallback:
 <c-ride_card
     ride=ride
+    url_variant="park"
     fallback_gradient="from-red-500 to-blue-600"
 />
 
 Parameters:
 - ride: Ride object (required)
+- url_variant: URL pattern type - 'global' (default) or 'park' (optional)
 - class: Additional CSS classes (optional)
 - fallback_gradient: Custom gradient for image fallback (default: "from-blue-500 to-purple-600")
 
+URL Pattern Logic:
+- If url_variant='global' and ride.slug exists: uses rides:ride_detail with ride.slug
+- If url_variant='park' and both ride.park.slug and ride.slug exist: uses parks:rides:ride_detail with ride.park.slug, ride.slug
+- If no valid URL can be generated: renders ride name as plain text (no link)
+
 Features:
+- Graceful handling of missing slugs (prevents NoReverseMatch errors)
+- Support for both global and park-specific URL patterns
 - Image handling with gradient fallback backgrounds
 - Status badges with proper color coding (operating, closed_temporarily, closed_permanently, under_construction)
-- Ride name with link to detail page
+- Ride name with conditional linking based on slug availability
 - Category and park information display
 - Statistics grid for height, speed, capacity, duration
 - Special features badges (inversions, launches, track_type)
 - Opening date and manufacturer/designer information
 - Responsive design with hover effects
 - Modern Tailwind styling and animations
+- Backwards compatibility with existing usage
 {% endcomment %}
 
 <c-vars 
     ride=""
+    url_variant="global"
     class=""
     fallback_gradient="from-blue-500 to-purple-600"
 />
@@ -94,10 +110,21 @@ Features:
         <!-- 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.slug %}" 
-                   class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+                {% comment %}Robust URL generation with missing slug handling{% endcomment %}
+                {% if url_variant == 'park' and ride.park and ride.park.slug and ride.slug %}
+                    <a href="{% url 'parks:rides:ride_detail' ride.park.slug ride.slug %}" 
+                       class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+                        {{ ride.name }}
+                    </a>
+                {% elif url_variant == 'global' and ride.slug %}
+                    <a href="{% url 'rides:ride_detail' ride.slug %}" 
+                       class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+                        {{ ride.name }}
+                    </a>
+                {% else %}
+                    {% comment %}No valid URL can be generated - render as plain text{% endcomment %}
                     {{ ride.name }}
-                </a>
+                {% endif %}
             </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">