{% extends "global/Page.html" %}
{% load otree %}




{% block app_styles %}

<style>

    .slidecontainer {
        margin: auto;
        outline: dodgerblue;
        border-style: none;
        width:80%;

    }


    .slider {
        -webkit-appearance: slider-horizontal;  /*change the default horizontal bar to vertical bar*/
        width: 100%;
        height: 125px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }

    .slider:hover {
        opacity: 1;
    }



    .slider::-moz-range-thumb {
        width: 50px;
        height: 3px;
        background: #4CAF50;
        cursor: pointer;
    }

    h1,p,td {
        text-align:center;
    }

    table {
        margin:auto;  /*set the table in the center*/
    }

</style>

{% endblock %}

{%block content%}


<h1 style="font-size: 20px;">Practice</h1>
<p>This is the practice to use the slider bar. The outcome of this practice won't affect your payoff.</p>
<p>Your decision<b style="color: tomato;" id="own_identity"></b></p>

<div class="slidecontainer">
    <table>
        <td>Recipient 1<br>
            amount: $<span id="amount_1"> </span>
        </td>
        <td style="width:60%;">
            <input type="range"  min="0" max="10" value="5" step="1" class="slider" id="myRange1">
        </td>
        <td>Recipient 2<br>

            amount: $<span id="amount_2"> </span>
        </td>
    </table>
    <button type="button" class="button" onclick="checkresult()" id="submit"> Submit </button>
    <button type="submit" value="Submit" id="next_page" class="button"> Next </button>
</div>


{%endblock%}


{% block scripts %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    document.getElementById("next_page").disabled = true;

    let own_boss = js_vars.boss;
    var rcp1_boss;

    // console.log("selection:", selection);
    // //check type of selection, it may not be string, since it comes from a choice
    // console.log("type of selection:", typeof(selection));
    // console.log("own_top:", own_top);
    // console.log("own_prize:", own_prize);
    // console.log("reci1_top:", reci1_top);
    // console.log("reci2_top:", reci2_top);
    // console.log("reci1_prize:", reci1_prize);
    // console.log("reci2_prize:", reci2_prize);


    //use step to change the step of the range slider
    var slider1 = document.getElementById("myRange1");
    var output11 = document.getElementById("amount_1");
    var output12 = document.getElementById("amount_2");
    output12.innerHTML = slider1.value; // Display the default slider value
    output11.innerHTML = 10 - slider1.value;
    // Update the current slider value (each time you drag the slider handle)
    slider1.oninput = function() {
        output12.innerHTML = this.value;
        output11.innerHTML = 10-this.value;
    }

    function checkresult(){
        document.getElementById("submit").disabled = true;//can only submit once
        document.getElementById("next_page").disabled = false; // the button go to next page
    }

</script>

{% endblock %}