{{ block title }}
<center>
    Slider
</center>
{{ endblock }}

{{ block content }}


<p> Here's the slider. Intercept 1 is {{ intercept_1 }}. Intercept 2 is {{ intercept_2 }}. Price is approximately
    {{ price }}.
</p>


<br>

<style>
    table{
        width: 40%;
        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;
    }

    .not-visible {
        visibility: hidden;
    }

    .slider_input{
        width: 100%;
        margin: 0px;
    }

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

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

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

    </table>




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

        initSlider();

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

        });
        function initSlider(){
            let slider = document.querySelector('.slider_input');
            slider.min = sliderMin;
            slider.max = sliderMax;
            slider.value = sliderValue;
        }

        let btn_decrement = document.querySelector('.btn_decrement');
        let btn_increment = document.querySelector('.btn_increment');

        btn_decrement.addEventListener('click',function(){
            let slider = document.querySelector('.slider_input');
            let sliderValue = slider.value;
            if(sliderValue > sliderMin){
                slider.value = parseFloat(sliderValue) - sliderStep;
                let field_val = document.querySelector('#field_val');
                field_val.innerHTML = slider.value;
                let calculatedVal = document.querySelector('#calculatedVal');
                calculatedVal.innerHTML = (income - slider.value) / price;
            }
        });

        btn_increment.addEventListener('click',function(){
            let slider = document.querySelector('.slider_input');
            let sliderValue = slider.value;
            if(sliderValue < sliderMax){
                slider.value = parseFloat(sliderValue) + sliderStep;
                let field_val = document.querySelector('#field_val');
                field_val.innerHTML = slider.value;
                let calculatedVal = document.querySelector('#calculatedVal');
                calculatedVal.innerHTML = (income - slider.value) / price;
            }
        });

        function sendChoice() {
            liveSend({'value': slider.value * sliderStep});
            document.getElementById("msg").innerHTML = "You allocated " + ((income - (slider.value * sliderStep)) / price).toFixed(2)
                + " tokens to the BLUE account and " + (slider.value * sliderStep).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 }}