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/parks/park_detail.html

@@ -12,14 +12,6 @@
 {% endblock %}
 
 {% block content %}
-<script nonce="{{ request.csp_nonce }}">
-    document.addEventListener('alpine:init', () => {
-        Alpine.data('photoUploadModal', () => ({
-            show: false,
-            editingPhoto: { caption: '' }
-        }))
-    })
-</script>
 
 <div class="container px-4 mx-auto sm:px-6 lg:px-8">
     <!-- Action Buttons - Above header -->
@@ -141,7 +133,16 @@
 
     <!-- Rest of the content remains unchanged -->
     {% if park.photos.exists %}
-        <div class="p-optimized mb-8 bg-white rounded-lg shadow dark:bg-gray-800">
+        <div class="p-optimized mb-8 bg-white rounded-lg shadow dark:bg-gray-800"
+             x-data="{ 
+                selectedPhoto: null,
+                showGallery: false,
+                currentIndex: 0,
+                photos: {{ park.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=park.photos.all content_type="parks.park" object_id=park.id %}
         </div>
@@ -188,10 +189,12 @@
                     <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Location</h2>
                     {% with location=park.location.first %}
                     {% if location.latitude is not None and location.longitude is not None %}
-                    <div id="park-map" class="relative rounded-lg" style="z-index: 0;"
-                         data-latitude="{{ location.latitude|default_if_none:'' }}"
-                         data-longitude="{{ location.longitude|default_if_none:'' }}"
-                         data-park-name="{{ park.name|escape }}"></div>
+                    <div x-data="parkMap" 
+                         x-init="initMap({{ location.latitude }}, {{ location.longitude }}, '{{ park.name|escapejs }}')"
+                         id="park-map" 
+                         class="relative rounded-lg h-64" 
+                         style="z-index: 0;">
+                    </div>
                     {% else %}
                     <div class="relative rounded-lg p-4 text-center text-gray-500 dark:text-gray-400">
                         <i class="fas fa-map-marker-alt text-2xl mb-2"></i>
@@ -239,13 +242,7 @@
 <!-- Photo Upload Modal -->
 {% if perms.media.add_photo %}
     <div x-cloak
-         x-data="{
-            show: false,
-            editingPhoto: null,
-            init() {
-                this.editingPhoto = { caption: '' };
-            }
-         }"
+         x-data="photoUploadModal"
          @show-photo-upload.window="show = true; init()"
          x-show="show"
          class="fixed inset-0 z-[60] flex items-center justify-center bg-black/50"
@@ -266,27 +263,39 @@
 {% endblock %}
 
 {% block extra_js %}
-<!-- Photo Gallery Script -->
-<script src="{% static 'js/photo-gallery.js' %}"></script>
-
-<!-- Map Script (if location exists) -->
+<!-- External libraries only (Leaflet for maps) -->
 {% if park.location.exists %}
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-<script src="{% static 'js/park-map.js' %}"></script>
+{% endif %}
 
-<script nonce="{{ request.csp_nonce }}">
-document.addEventListener('DOMContentLoaded', function() {
-    var mapElement = document.getElementById('park-map');
-    if (mapElement && mapElement.dataset.latitude && mapElement.dataset.longitude) {
-        var latitude = parseFloat(mapElement.dataset.latitude);
-        var longitude = parseFloat(mapElement.dataset.longitude);
-        var parkName = mapElement.dataset.parkName;
-        
-        if (!isNaN(latitude) && !isNaN(longitude) && parkName) {
-            initParkMap(latitude, longitude, parkName);
+<script>
+document.addEventListener('alpine:init', () => {
+    // Photo Upload Modal Component
+    Alpine.data('photoUploadModal', () => ({
+        show: false,
+        editingPhoto: null,
+        init() {
+            this.editingPhoto = { caption: '' };
         }
-    }
+    }));
+
+    // Park Map Component
+    {% if park.location.exists %}
+    Alpine.data('parkMap', () => ({
+        map: null,
+        initMap(lat, lng, parkName) {
+            if (typeof L !== 'undefined') {
+                this.map = L.map(this.$el).setView([lat, lng], 15);
+                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                    attribution: '© OpenStreetMap contributors'
+                }).addTo(this.map);
+                L.marker([lat, lng]).addTo(this.map)
+                    .bindPopup(parkName)
+                    .openPopup();
+            }
+        }
+    }));
+    {% endif %}
 });
 </script>
-{% endif %}
 {% endblock %}