{% if error %}
<div class="p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" role="alert">
    <span class="font-medium">Error:</span> {{ error }}
</div>
{% elif ride_model.id %}
<div class="p-4 mb-4 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800" role="alert">
    <span class="font-medium">Success!</span> Ride model "{{ ride_model.name }}" has been created.
</div>

<script>
    // Update the ride model field in the parent form
    const rideModelId = '{{ ride_model.id }}';
    const rideModelName = '{{ ride_model.name|escapejs }}';
    
    document.getElementById('id_ride_model').value = rideModelId;
    document.getElementById('id_ride_model_search').value = rideModelName;
    
    // Close the modal after a short delay to allow the user to see the success message
    setTimeout(() => {
        document.dispatchEvent(new CustomEvent('close-ride-model-modal'));
        
        // Clear the notification after the modal closes
        setTimeout(() => {
            document.getElementById('ride-model-notification').innerHTML = '';
        }, 300);
    }, 1000);
</script>
{% else %}
<div class="p-4 mb-4 text-sm text-yellow-700 bg-yellow-100 rounded-lg dark:bg-yellow-200 dark:text-yellow-800" role="alert">
    <span class="font-medium">Note:</span> Your submission has been sent for review. You will be notified when it is approved.
</div>

<script>
    // Close the modal after a short delay to allow the user to see the message
    setTimeout(() => {
        document.dispatchEvent(new CustomEvent('close-ride-model-modal'));
        
        // Clear the notification after the modal closes
        setTimeout(() => {
            document.getElementById('ride-model-notification').innerHTML = '';
        }, 300);
    }, 2000);
</script>
{% endif %}