<!-- Add Ride Modal -->
<div id="add-ride-modal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-center justify-center min-h-screen p-4">
        <!-- Background overlay -->
        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" aria-hidden="true"></div>

        <!-- Modal panel -->
        <div class="relative w-full max-w-3xl p-6 mx-auto bg-white rounded-lg shadow-xl dark:bg-gray-800">
            <div class="mb-6">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
                    Add Ride at {{ park.name }}
                </h2>
            </div>

            <div id="modal-content">
                {% include "rides/partials/ride_form.html" with modal=True %}
            </div>
        </div>
    </div>
</div>

<!-- Modal Toggle Button -->
<button type="button" 
        onclick="openModal('add-ride-modal')"
        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">
    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
    </svg>
    Add Ride
</button>

<script>
function openModal(modalId) {
    document.getElementById(modalId).classList.remove('hidden');
}

function closeModal() {
    document.getElementById('add-ride-modal').classList.add('hidden');
}

// Close modal when clicking outside
document.getElementById('add-ride-modal').addEventListener('click', function(event) {
    if (event.target === this) {
        closeModal();
    }
});
</script>
