{{define "photo-upload-header"}}
<style>
.photo-upload-area {
	border: 2px dashed #ccc;
	border-radius: 8px;
	padding: 20px;
	text-align: center;
	margin-bottom: 20px;
	background-color: #f9f9f9;
}

.photo-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 15px;
}

.photo-preview img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
}
</style>
<script>
/**
 * Handle photo selection and preview
 */
function handlePhotoSelection() {
	const photoInput = document.getElementById('photos');
	const photoPreviewContainer = document.getElementById('photoPreviewContainer');

	// Clear previous previews
	photoPreviewContainer.innerHTML = '';

	// Check if files were selected
	if (photoInput.files && photoInput.files.length > 0) {
		// Loop through selected files
		Array.from(photoInput.files).forEach((file, index) => {
			console.log("Handling", index, file);
			if (!file.type.match('image.*')) {
				console.log("Skipping non-image file", file.type);
				return; // Skip non-image files
			}
			
			// Create preview container
			const previewContainer = document.createElement('div');
			previewContainer.className = 'position-relative m-1';
			
			// Create image preview
			const img = document.createElement('img');
			img.className = 'img-thumbnail';
			img.style.width = '100px';
			img.style.height = '100px';
			img.style.objectFit = 'cover';
			
			// Read file and set preview
			const reader = new FileReader();
			reader.onload = (e) => {
				img.src = e.target.result;
			};
			reader.readAsDataURL(file);
			
			// Create remove button
			const removeBtn = document.createElement('button');
			removeBtn.type = 'button';
			removeBtn.className = 'btn btn-sm btn-danger position-absolute top-0 end-0';
			removeBtn.innerHTML = '&times;';
			removeBtn.style.fontSize = '10px';
			removeBtn.style.padding = '0 5px';
			
			// Handle remove button click
			removeBtn.addEventListener('click', function() {
				// Create a new FileList without this file
				// Since FileList is immutable, we need to reset the input
				// This is a bit tricky and requires recreating the input
				previewContainer.remove();
				
				// If this was the last image, clear the input entirely
				if (photoPreviewContainer.children.length === 0) {
				photoInput.value = '';
				}
				// Note: Unfortunately, selectively removing files from a FileList isn't straightforward
				// In a real implementation, we might track selected files in an array and recreate the input
			});
			
			// Add elements to the preview container
			previewContainer.appendChild(img);
			previewContainer.appendChild(removeBtn);
			photoPreviewContainer.appendChild(previewContainer);
		});
	}
}

document.addEventListener('DOMContentLoaded', function() {
	// Elements
	const photoInput = document.getElementById('photos');

	// Handle photo selection
	photoInput.addEventListener('change', handlePhotoSelection);

	// Handle drag and drop
	const photoDropArea = document.getElementById('photoDropArea');
	
	photoDropArea.addEventListener('dragover', function(e) {
		e.preventDefault();
		photoDropArea.style.backgroundColor = '#e9ecef';
	});
	
	photoDropArea.addEventListener('dragleave', function() {
		photoDropArea.style.backgroundColor = '#f8f9fa';
	});
	
	photoDropArea.addEventListener('drop', function(e) {
		e.preventDefault();
		photoDropArea.style.backgroundColor = '#f8f9fa';
		
		if (e.dataTransfer.files.length) {
			handleFiles(e.dataTransfer.files);
		}
	});
	
});
</script>
{{end}}