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


{{block of scripts}}
<script>
    let slider = document.getElementById("slider");

    let selectValue = document.getElementById("select_value")
    let selectValue2 = document.getElementById("selectValue2")
    let final_value = document.getElementById("final_value")
    selectValue.innerHTML = slider.value


    slider.oninput = function (){
        selectValue.innerHTML = slider.value + " CZK"
        selectValue2.innerHTML = 100-slider.value + " CZK"
        final_value.innerHTML = slider.value
        liveSend({'t':'final','final_value': slider.value });
            this.blur();

        }


    $("button.otree-btn-next").on("click",function (){
            liveSend({'t':'final','final_value': slider.value });
            this.blur();

        });

</script>
{{endblock}}
{% block of styles %}
<style>
.text {
    font-family: Calibri;
    font-style: Normal;
    font-size: large;
    line-height: 1.7;
    text-align: justify;

}
.title {
    font-size: xx-large;
    font-weight: bold;
    font-family: Serif;
}
.text_b {
    font-family: Serif;
    font-style: Normal;
    font-size: large;
    line-height: 1.7;
    text-align: justify;
    font-weight: bold;
}

.positioningava{
    width: 5%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.positioningava1{
    width: 10%;
    position: relative;



}
#slider{
        width: 70%;
        height: 70px;
        outline: none;
        border-radius: 3px;
}
.positioning1{
    float: left; width: 15%; margin-right: 35%; margin-bottom: 0.5em



}
.positioning2{
     float: left; text-align: center; width: 15%; margin-right: 35%; margin-bottom: 0.5em;
    font-family: Serif;
    font-style: Normal;
    font-size: large;
    line-height: 1.7;
    text-align: justify;
    font-weight: bold;



}
</style>
{% endblock %}
{{ block content }}
<br>

<div class="text">
<img class="positioningava" src="{{ava_pic}}">
</div>







<div class="title">
    Stage 5
</div>
<br>
<div class="text">
Decision 1: Please select how to distribute CZK 100 between Beneficiary 1 and Beneficiary 2 by clicking anywhere on the slider. Note that both beneficiaries are actual participants in this session and your decision will contribute toward their earnings from this study.




</div>

<br>

    <input type="range" min="0" max="100" value="200" id="slider">
<br>




        <img class="positioning1" src="{{ben1}}">
<img class="positioning1" src="{{ben2}}">

<p style="clear: both;">
<div class="positioning2">Beneficiary 1 receives:<div id="select_value"></div>
</div>

<div class="positioning2">Beneficiary 2 receives:<div id="selectValue2"></div>
</div>
<br>
<p style="clear: both;">
    {{ next_button }}

{{ endblock }}