<div class="absolute z-50 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 not manufacturer_id %}
        <div class="px-4 py-2 text-gray-700 dark:text-gray-300">
            Please select a manufacturer first
        </div>
    {% else %}
        {% if ride_models %}
            {% for ride_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="selectRideModel('{{ ride_model.id }}', '{{ ride_model.name|escapejs }}')">
                    {{ ride_model.name }}
                    {% if ride_model.manufacturer %}
                        <div class="text-sm text-gray-700 dark:text-gray-300">
                            by {{ ride_model.manufacturer.name }}
                        </div>
                    {% endif %}
                </button>
            {% endfor %}
        {% else %}
            <div class="px-4 py-2 text-gray-700 dark:text-gray-300">
                {% if search_term %}
                    No matches found. You can still submit this name.
                {% else %}
                    Start typing to search...
                {% endif %}
            </div>
        {% endif %}
    {% endif %}
</div>

<script>
function selectRideModel(id, name) {
    document.getElementById('id_ride_model').value = id;
    document.getElementById('id_ride_model_search').value = name;
    document.getElementById('ride-model-search-results').innerHTML = '';
}
</script>
