{{ block title }}
Willingness to pay for using the Artificial Intelligence system
{{ endblock }}

{{ block content }}

{{ block global_styles  }}
    <link rel="stylesheet" href="{{ static 'global/style_sheet.css' }}">
    <link href= "{{static 'global/noUiSlider/dist/nouislider.css'}}" rel="stylesheet">
    <script src="{{static 'global/noUiSlider/dist/nouislider.js'}}"></script>
{{ endblock  }}
    <!-- ------------------------------------------ -->

<script>
    $(document).ready(function() {
        var slider1 = document.getElementById('BDM_1');

        var range = {
            'min': 0,
            'max': 2500
        };

        noUiSlider.create(slider1, {
            range: range,
            start: 0,
            step: 50,
            format:{
                    to: (v) => v | 0,
                    from: (v) => v | 0
                    },
            tooltips: true,
            pips: {
                mode: 'count',
                values: 11,
                density: 1
            }

        });
        // show slider value
        var rangeSlider1Val = document.getElementById("slider1_value");

        slider1.noUiSlider.on("update", function (values, handle) {
            rangeSlider1Val.innerHTML = values[handle];
        });

        // write slider result into form field for data export
        document.getElementById("next-button").addEventListener("click", function () {
            document.getElementById("BDM_full").value = parseInt(slider1.noUiSlider.get(true))
        });

        slider1.noUiSlider.on("slide", function () {
            moved_bdm = true;
            check_inputs();
        });

        var moved_bdm = false;
        function check_inputs() {
            if (moved_bdm == true) {
                document.getElementById("next-button").disabled = false;
            }
        }

    });

</script>



<br>
<p>
   <b>Using the AI system to filter suitable lotteries will cost you a certain amount of points.</b>
</p>
<p>
    <b>You will now receive an amount of {{ player.spec_endowment_baseline }} points.</b>
    You can use the amount (or part of it) to increase the chance that the AI will filter the lotteries for you.
    <br>Alternatively, you can also keep this amount. This amount will then be paid out to you at the end of the experiment together with your payouts from the lottery.

 </p>
<p>
    <b>Using the slider below, please indicate the maximum amount you are willing to pay for the use of the AI system</b>.
 </p>
<p>
    <b>After you place your bid, a threshold between 0 and {{ player.spec_endowment_baseline }} is drawn randomly.</b>
</p>
 <p>
     If your bid is <b>above</b> this threshold, you may use the AI system.
     The randomly drawn threshold - not your bid - will then be subtracted from your extra amount of {{ player.spec_endowment_baseline }} points.
     The remaining points of the extra amount will be added to your final payout.
</p>
 <p>
     If your bid is <b>below</b> this threshold, you may <b>not</b> use the AI system.
     Consequently, you <b>do not</b> have to pay your stated bid; you can keep the full extra amount of {{ player.spec_endowment_baseline }} points.
</p>
 <p>
     <b>In any case, you will pay no more than what you were willing to pay.</b>
</p>
<div class="Grey_Background">

<br>
 <p>
     <b>Example 1:</b> Your willingness to pay is 1800 points, the randomly drawn threshold is 1400 points.
     Therefore, you can use the AI system and the remaining 1100 points (2500 - 1400) of the extra amount will be added to your final payout.
</p>
 <p>
     <b>Example 2:</b> Your willingness to pay is 1200 points, the randomly drawn threshold is 1800 points.
     Therefore, you can <b>not</b> use the AI system. The full {{ player.spec_endowment_baseline }} points of the extra amount will be added to your final payout.
</p>
<br>
</div>
<br>



<br>
<p><b>Please indicate how many points of the extra amount of {{ player.spec_endowment_baseline }} points you are willing to pay for the AI system:</b></p>
<br>
<div id='BDM_1' ></div>
<input type="hidden" name="BDM_baseline" id="BDM_full" />
<br>
<br>
<br>
    Your maximum willingness to pay: <b><span id="slider1_value" > </span></b> points.
<br>
<br>
<p>
    <i style="color: red;">Please move the slider, before continuing</i>
</p>

<button disabled id="next-button" class="otree-btn-next btn btn-primary">
    Next
</button>

{{ endblock }}