{% 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.

Usage Examples:

Basic usage:
<c-ride_card ride=ride />

With custom CSS classes:
<c-ride_card 
    ride=ride
    class="custom-class"
/>

With custom image fallback:
<c-ride_card
    ride=ride
    fallback_gradient="from-red-500 to-blue-600"
/>

Parameters:
- ride: Ride object (required)
- class: Additional CSS classes (optional)
- fallback_gradient: Custom gradient for image fallback (default: "from-blue-500 to-purple-600")

Features:
- 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
- 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
{% endcomment %}

<c-vars 
    ride=""
    class=""
    fallback_gradient="from-blue-500 to-purple-600"
/>

{% if ride %}
<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 {{ class }}">
    <!-- Ride image -->
    <div class="relative h-48 bg-gradient-to-br {{ fallback_gradient }}">
        {% 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' or 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' or ride.operating_status == 'CLOSED_TEMP' %}
                <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' or ride.operating_status == 'CLOSED_PERM' %}
                <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' or 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>
            {% elif ride.operating_status == 'sbno' or ride.operating_status == 'SBNO' %}
                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
                    <i class="fas fa-pause-circle mr-1"></i>
                    SBNO
                </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 grid -->
        <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.track_type or ride.track_type %}
        <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>
            {% elif ride.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.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 and designer -->
        {% if ride.manufacturer or ride.designer %}
        <div class="text-sm text-gray-600 dark:text-gray-400">
            {% if ride.manufacturer %}
            <div class="flex items-center mb-1">
                <i class="fas fa-industry mr-1"></i>
                <span>{{ ride.manufacturer.name }}</span>
            </div>
            {% endif %}
            {% if ride.designer and ride.designer != ride.manufacturer %}
            <div class="flex items-center">
                <i class="fas fa-drafting-compass mr-1"></i>
                <span>Designed by {{ ride.designer.name }}</span>
            </div>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>
{% endif %}