<div class="w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-700 dark:border-gray-600" style="max-height: 240px; overflow-y: auto;">
    {% if ride_models %}
        {% for model in ride_models %}
            <button type="button"
                    class="w-full px-4 py-2 text-left text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
                    onclick="selectRideModelForSubmission('{{ model.id }}', '{{ model.name|escapejs }}', '{{ submission_id }}')">
                {{ model.name }}
            </button>
        {% endfor %}
    {% else %}
        <div class="px-4 py-2 text-gray-700 dark:text-gray-300">
            {% if search_term %}
                No ride models found
            {% else %}
                Start typing to search...
            {% endif %}
        </div>
    {% endif %}
</div>

<script>
function selectRideModelForSubmission(id, name, submissionId) {
    // Debug logging
    console.log('Selecting ride model:', {id, name, submissionId});
    
    // Find elements
    const modelInput = document.querySelector(`#ride-model-input-${submissionId}`);
    const searchInput = document.querySelector(`#ride-model-search-${submissionId}`);
    const resultsDiv = document.querySelector(`#ride-model-search-results-${submissionId}`);
    
    // Debug logging
    console.log('Found elements:', {
        modelInput: modelInput?.id,
        searchInput: searchInput?.id,
        resultsDiv: resultsDiv?.id
    });
    
    // Update hidden input
    if (modelInput) {
        modelInput.value = id;
        console.log('Updated ride model input value:', modelInput.value);
    }
    
    // Update search input
    if (searchInput) {
        searchInput.value = name;
        console.log('Updated search input value:', searchInput.value);
    }
    
    // Clear results
    if (resultsDiv) {
        resultsDiv.innerHTML = '';
        console.log('Cleared results div');
    }
}

// Close search results when clicking outside
document.addEventListener('click', function(e) {
    const searchResults = document.querySelectorAll('[id^="ride-model-search-results-"]');
    searchResults.forEach(function(resultsDiv) {
        const searchInput = document.querySelector(`#ride-model-search-${resultsDiv.id.split('-').pop()}`);
        if (!resultsDiv.contains(e.target) && e.target !== searchInput) {
            resultsDiv.innerHTML = '';
        }
    });
});
</script>
