<div class="bg-white rounded-lg shadow-md p-6 mb-6">
    <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-gray-900">Manage Photos</h3>
        
        <div>
            @if (!$reordering)
                <button 
                    wire:click="startReordering"
                    class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
                    </svg>
                    Reorder Photos
                </button>
            @else
                <div class="flex space-x-2">
                    <button 
                        wire:click="saveOrder"
                        class="inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        Save Order
                    </button>
                    
                    <button 
                        wire:click="cancelReordering"
                        class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                        Cancel
                    </button>
                </div>
            @endif
        </div>
    </div>
    
    @if ($isLoading)
        <div class="flex justify-center items-center py-12">
            <svg class="animate-spin h-8 w-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
        </div>
    @elseif ($error)
        <div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded relative" role="alert">
            <span class="block sm:inline">{{ $error }}</span>
        </div>
    @elseif (count($photos) === 0)
        <div class="text-center py-12 text-gray-500">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
            <p class="text-lg font-medium">No photos yet</p>
            <p class="mt-1">Upload photos to showcase this park.</p>
        </div>
    @else
        <div class="space-y-4">
            @foreach ($photoOrder as $index => $photoId)
                @php
                    $photo = collect($photos)->firstWhere('id', $photoId);
                @endphp
                @if ($photo)
                    <div 
                        wire:key="photo-order-{{ $photo['id'] }}"
                        class="flex items-center bg-gray-50 rounded-lg overflow-hidden"
                    >
                        <div class="w-20 h-20 flex-shrink-0">
                            <img 
                                src="{{ asset('storage/' . $photo['file_path']) }}" 
                                alt="{{ $photo['alt_text'] ?? $photo['title'] ?? 'Park photo' }}" 
                                class="w-full h-full object-cover"
                            >
                        </div>
                        
                        <div class="flex-1 min-w-0 px-4 py-2">
                            <p class="text-sm font-medium text-gray-900 truncate">
                                {{ $photo['title'] ?? 'Untitled Photo' }}
                            </p>
                            @if ($photo['description'])
                                <p class="text-xs text-gray-500 truncate">
                                    {{ $photo['description'] }}
                                </p>
                            @endif
                        </div>
                        
                        @if ($photo['is_featured'])
                            <div class="px-2">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                    Featured
                                </span>
                            </div>
                        @endif
                        
                        @if ($reordering)
                            <div class="flex items-center space-x-1 px-4">
                                <button 
                                    wire:click="moveUp({{ $index }})"
                                    class="p-1 text-gray-400 hover:text-gray-500 {{ $index === 0 ? 'opacity-50 cursor-not-allowed' : '' }}"
                                    {{ $index === 0 ? 'disabled' : '' }}
                                >
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                                    </svg>
                                </button>
                                
                                <button 
                                    wire:click="moveDown({{ $index }})"
                                    class="p-1 text-gray-400 hover:text-gray-500 {{ $index === count($photoOrder) - 1 ? 'opacity-50 cursor-not-allowed' : '' }}"
                                    {{ $index === count($photoOrder) - 1 ? 'disabled' : '' }}
                                >
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                    </svg>
                                </button>
                            </div>
                        @endif
                    </div>
                @endif
            @endforeach
        </div>
    @endif
</div>