{{ block title }}
<center>
    Decision-making task: Round {{ round }} out of {{ C.NUM_ROUNDS_PART_B }}
</center>
{{ endblock }}
{{ block content }}

<br>
<p>Allocate points to the <font color="blue"><b>BLUE</b></font> or <font color="red"><b>RED</b></font> account. </p>

<p><b>Maximal number</b> of <font color="blue"><b>BLUE</b></font> points: <b>{{ player.intercept_BLUE }}</b> <br><br>
   <b>Maximal number</b> of <font color="red"><b>RED</b></font> points: <b>{{ player.intercept_RED }}</b> <br><br>
   <b>Exchange rate</b> of <font color="red"><b>RED</b></font> to <font color="blue"><b>BLUE</b></font> points:
    <b>{{ player.intercept_RED }}/{{ player.intercept_BLUE }}</b> (approximately {{ price }}). <br> <i>That is, one point assigned
        to the <font color="blue">BLUE</font> account is exchanged for {{ player.intercept_RED }}/{{ player.intercept_BLUE }}
        (approximately {{ price }}) points assigned to the <font color="red">RED</font> account.
    </i><br><br>
    <b>Payoff</b>: Once you commit to your choice, the computer will randomly select one of the accounts
    (<font color="blue"><b>BLUE</b></font> or <font color="red"><b>RED</b></font>) with equal probability (50/50). Your payoff
    will be equal to the number of points allocated to the account that was selected.
</p>

<br>

<style>

    .not-visible{
        visibility: hidden;
    }

    table{
    width: 60%;
    margin: 0 auto;
    }

    .blue_box{
        width: 100px;
        height: 100px;
        background-color: blue;
        margin: 0 auto;
        color: white;
    }

    .red_box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 0 auto;
        color: white;
    }

    .slider_input {
        -webkit-appearance: none;
        margin-right: 15px;
        width: 100%;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 5px;
        background-image: linear-gradient(grey, gray);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .slider_input::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: grey;
        cursor: ew-resize;
        transition: background .3s ease-in-out;
    }

    .slider_input_thumb::-webkit-slider-thumb {
        border: 1px solid #FFFFFF;
        box-shadow: 0 0 0 1px #fff;
    }

    .slider_input::-webkit-slider-runnable-track  {
        -webkit-appearance: none;
        box-shadow: none;
        border: none;
        background: transparent;
    }

    td{
        width: 50%;
        padding: 10px;
    }

    td button{
        width: 180px;
        height: 50px;
        margin: 0 auto;
        align-items: center;
    }

</style>

<center>
      <table>
        <tr>
            <td>
                <div class="blue_box">
                    <center>
                        <h3>BLUE</h3>
                        <span id="calculatedVal">N/A</span>
                    </center>
                </div>
            </td>
            <td>
                <div class="red_box">
                    <center>
                        <h3>RED</h3>
                        <span id="field_val">N/A</span>
                    </center>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2"><input type="range" min="0" max="100" value="50" class="slider_input"></td>
        </tr>
      </table>
</center>



<center>
<p>
    <script>
        var sliderMin = 0;
        var sliderMax = js_vars.intercept_2;
        var sliderValue = 0;
        var sliderStep = 0.01;
        var income = sliderMax;
        var price = js_vars.price;

                initSlider();

        let slider = document.querySelector('.slider_input');
        //on change of slider
        slider.addEventListener('change',function(){
            var slider = document.querySelector('.slider_input');
            var field_val = document.querySelector('#field_val');
            sliderValue = (1*slider.value).toFixed(2);
            field_val.innerHTML = sliderValue;
            var calculatedVal = document.querySelector('#calculatedVal');
            x = ((income - slider.value) / price);
            x = x.toFixed(2);
            calculatedVal.innerHTML = x;

            slider.oninput = function() {
              field_val.innerHTML = (1*this.value).toFixed(2);
              calculatedVal.innerHTML =  ((income - this.value) / price).toFixed(2);
              }

            //check slider has class
            if(!slider.classList.contains('slider_input_thumb')){
                slider.classList.add('slider_input_thumb');
            }
        });
        function initSlider(){
            let slider = document.querySelector('.slider_input');
            slider.min = sliderMin;
            slider.max = sliderMax;
            slider.value = sliderValue;
            slider.step = sliderStep;
        }

        function sendChoice() {
            liveSend({'value': slider.value});
            document.getElementById("msg").innerHTML = "You allocated " + ((income - (slider.value)) / price).toFixed(2)
                + " tokens to the BLUE account and " + (1*slider.value).toFixed(2) + " to the RED.";
            document.getElementById("nextbtn").style.visibility = "visible"
            document.getElementById("nextcomment").style.visibility = "visible"
        }

    </script>
</p>
    <p>
<button type = "button" onclick = "sendChoice()">Approve choice</button>
           </p>
<br>
<p id="msg"></p>
</center>

<div id = "nextbtn" class = "not-visible">{{ next_button }}</div>


{{ endblock }}