{{ block title }}Test Case {{ endblock }}
{{ block content }}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const inputElement = document.getElementById('data_1');
        const nextButton = document.getElementById('id_submit_button');
        const minLimit = 50; // Set your minimum limit here

        inputElement.addEventListener('input', function () {
            const inputValue = parseFloat(inputElement.value);

            if (isNaN(inputValue) || inputValue < minLimit) {
                nextButton.disabled = true;
                alert('Please enter a number greater than or equal to ' + minLimit);
            } else {
                nextButton.disabled = false;
            }
        });

        // Set the minimum attribute for additional validation
        inputElement.setAttribute('min', minLimit);
    });
</script>

<p>
    You have a chance to do a test run before the real experiment. 
    This test case is not exactly your listing and the neighbors but it gives you an idea of the experiment.
</p>

<ul>
    <li>Your listing has 1 bedrooms and 4.6 ratings.</li>
    
    <li>The cost of cleaning and utilities
        for each day someone stays at your place is <strong><u>$50</u></strong>. 
        Your set price should be greater than this.</li>
    <li>You want to price your listing <strong><u>Monday, January 11th</u></strong>. </li>    
</ul>
<P><img src="https://priceselectionmodel-294dcf7a2bae.herokuapp.com/static/test_1.JPG" alt="neighbors' prices"></P>

<p>Please enter your price in dollars $ amount</p>
<div class="container">
    <div class="form-group">
        <label for="data_test1">Mon Jan 11th</label>
        <input type="number" id="data_test1" name="data_test1" required>
    </div>

    
</div>

{{ next_button id="id_submit_button" }}
{{ endblock }}