From b8891fc65f2894925c394d93fc31bf5510aea60c Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Mon, 22 Sep 2025 15:03:15 +0000
Subject: [PATCH] Add binding to card components to display data correctly

Update various HTML templates to use Vue.js binding syntax (':') for passing data to custom components like `c-park_card` and `c-ride_card`, resolving issues with data not being displayed.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0bdea3fb-49ea-4863-b501-fa6f5af0cbf0
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/0bdea3fb-49ea-4863-b501-fa6f5af0cbf0/DkyJkDK
---
 templates/cotton/park_card.html                 | 2 +-
 templates/cotton/ride_card.html                 | 2 +-
 templates/home.html                             | 8 ++++----
 templates/parks/park_detail.html                | 2 +-
 templates/partials/homepage/featured_parks.html | 2 +-
 templates/partials/homepage/featured_rides.html | 2 +-
 templates/rides/partials/ride_list_results.html | 2 +-
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/templates/cotton/park_card.html b/templates/cotton/park_card.html
index e09be47b..c17a397f 100644
--- a/templates/cotton/park_card.html
+++ b/templates/cotton/park_card.html
@@ -41,7 +41,7 @@ Features:
 {% endcomment %}
 
 <c-vars 
-    park=""
+    park
     view_mode="grid"
     class=""
 />
diff --git a/templates/cotton/ride_card.html b/templates/cotton/ride_card.html
index 826e60bf..c56edf62 100644
--- a/templates/cotton/ride_card.html
+++ b/templates/cotton/ride_card.html
@@ -54,7 +54,7 @@ Features:
 {% endcomment %}
 
 <c-vars 
-    ride=""
+    ride
     url_variant="global"
     class=""
     fallback_gradient="from-blue-500 to-purple-600"
diff --git a/templates/home.html b/templates/home.html
index 70aa62dd..afdb92b6 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -72,7 +72,7 @@
         </h2>
         <div class="space-y-4">
             {% for park in popular_parks %}
-                <c-park_card park=park view_mode="grid" class="h-48" />
+                <c-park_card :park="park" view_mode="grid" class="h-48" />
             {% empty %}
                 <div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
                     <div class="mb-4 text-4xl">🎢</div>
@@ -90,7 +90,7 @@
         </h2>
         <div class="space-y-4">
             {% for ride in popular_rides %}
-                <c-ride_card ride=ride class="h-48" url_variant="park" />
+                <c-ride_card :ride="ride" class="h-48" url_variant="park" />
             {% empty %}
                 <div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
                     <div class="mb-4 text-4xl">🎠</div>
@@ -110,10 +110,10 @@
             {% for item in highest_rated %}
                 {% if item.park %}
                     <!-- This is a ride -->
-                    <c-ride_card ride=item class="h-48" url_variant="park" />
+                    <c-ride_card :ride="item" class="h-48" url_variant="park" />
                 {% else %}
                     <!-- This is a park -->
-                    <c-park_card park=item view_mode="grid" class="h-48" />
+                    <c-park_card :park="item" view_mode="grid" class="h-48" />
                 {% endif %}
             {% empty %}
                 <div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
diff --git a/templates/parks/park_detail.html b/templates/parks/park_detail.html
index 96086821..1883cc64 100644
--- a/templates/parks/park_detail.html
+++ b/templates/parks/park_detail.html
@@ -171,7 +171,7 @@
                 {% if park.rides.exists %}
                     <div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
                         {% for ride in park.rides.all|slice:":6" %}
-                            <c-ride_card ride=ride url_variant="park" />
+                            <c-ride_card :ride="ride" url_variant="park" />
                         {% endfor %}
                     </div>
                 {% else %}
diff --git a/templates/partials/homepage/featured_parks.html b/templates/partials/homepage/featured_parks.html
index 5a7a87b6..d3a2110c 100644
--- a/templates/partials/homepage/featured_parks.html
+++ b/templates/partials/homepage/featured_parks.html
@@ -2,7 +2,7 @@
 
 <!-- Featured Parks Grid -->
 {% for park in featured_parks %}
-<c-park_card park=park view_mode="grid" class="h-full" />
+<c-park_card :park="park" view_mode="grid" class="h-full" />
 {% empty %}
 <div class="col-span-full text-center py-12">
     <svg class="w-16 h-16 text-muted-foreground mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/templates/partials/homepage/featured_rides.html b/templates/partials/homepage/featured_rides.html
index 7235341e..f447e213 100644
--- a/templates/partials/homepage/featured_rides.html
+++ b/templates/partials/homepage/featured_rides.html
@@ -2,7 +2,7 @@
 
 <!-- Featured Rides Grid -->
 {% for ride in featured_rides %}
-    <c-ride_card ride=ride url_variant="global" class="h-full" />
+    <c-ride_card :ride="ride" url_variant="global" class="h-full" />
 {% empty %}
 <div class="col-span-full text-center py-12">
     <svg class="w-16 h-16 text-muted-foreground mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/templates/rides/partials/ride_list_results.html b/templates/rides/partials/ride_list_results.html
index f7265b21..ddea572e 100644
--- a/templates/rides/partials/ride_list_results.html
+++ b/templates/rides/partials/ride_list_results.html
@@ -85,7 +85,7 @@
 {% if rides %}
 <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
   {% for ride in rides %}
-  <c-ride_card ride=ride />
+  <c-ride_card :ride="ride" />
   {% endfor %}
 </div>