Refactor park and ride detail templates to utilize Alpine.js for state management in photo galleries and upload modals. Enhanced photo handling and initialization logic for improved user experience.

templates/rides/ride_detail.html

@@ -149,7 +149,16 @@
 
     <!-- Rest of the content remains unchanged -->
     {% if ride.photos.exists %}
-        <div class="p-6 mb-8 bg-white rounded-lg shadow dark:bg-gray-800">
+        <div class="p-6 mb-8 bg-white rounded-lg shadow dark:bg-gray-800"
+             x-data="{ 
+                selectedPhoto: null,
+                showGallery: false,
+                currentIndex: 0,
+                photos: {{ ride.photos.all|length }},
+                init() {
+                    // Photo gallery initialization
+                }
+             }">
             <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Photos</h2>
             {% include "media/partials/photo_display.html" with photos=ride.photos.all content_type="rides.ride" object_id=ride.id %}
         </div>
@@ -435,7 +444,7 @@
 <!-- Photo Upload Modal -->
 {% if perms.media.add_photo %}
     <div x-cloak
-         x-data="{ show: false }"
+         x-data="photoUploadModal"
          @show-photo-upload.window="show = true"
          x-show="show"
          class="fixed inset-0 z-[60] flex items-center justify-center bg-black/50"
@@ -454,5 +463,15 @@
 {% endblock content %}
 
 {% block extra_js %}
-<script src="{% static 'js/photo-gallery.js' %}"></script>
+<script>
+document.addEventListener('alpine:init', () => {
+    // Photo Upload Modal Component
+    Alpine.data('photoUploadModal', () => ({
+        show: false,
+        init() {
+            // Modal initialization
+        }
+    }));
+});
+</script>
 {% endblock %}