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

{% block styles %}

<style>

.slider_box {
    border: none;
    height: 100px;
    margin: auto;
    position: relative;
    width: 750px;
}

input[type=range] {
    height: 10px;
    left: 225px;
    position: absolute;
    top: 45px;
    width: 300px;
    -webkit-appearance: none;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    background: silver;
    height: 10px;
    width: 300px;
}

input[type=range]::-moz-range-track {
    background: silver;
    height: 10px;
    width: 300px;
}

input[type=range]::-webkit-slider-thumb {
    height: 0px;
    width: 0px;
    -webkit-appearance: none;
}

input[type=range]::-moz-range-thumb {
    height: 0px;
    width: 0px;
    -webkit-appearance: none;
}

.myclass1::-webkit-slider-thumb {
    background: black !important;
    border: 1px solid black !important;
    border-radius: 0px !important;
    height: 30px !important;
    margin-top: -12.5px !important;
    width: 10px !important;
}

.myclass2::-moz-range-thumb {
    background: black !important;
    border: 1px solid black !important;
    border-radius: 0px !important;
    height: 30px !important;
    margin-top: -12.5px !important;
    width: 10px !important;
}

.symbol_left {
    height: 25px;
    left: 150px;
    position: absolute;
    text-align: center;
    top: 12.5px;
    vertical-align: middle;
    width: 50px;
}

.symbol_right {
    height: 25px;
    left: 550px;
    position: absolute;
    text-align: center;
    top: 12.5px;
    vertical-align: middle;
    width: 50px;
}

.container_left {
    border: 1px solid silver;
    height: 25px;
    left: 150px;
    position: absolute;
    text-align: center;
    top: 37.5px;
    vertical-align: middle;
    width: 50px;
}

.container_right {
    border: 1px solid silver;
    height: 25px;
    left: 550px;
    position: absolute;
    text-align: center;
    top: 37.5px;
    vertical-align: middle;
    width: 50px;
}

.line_left {
    background: black;
    height: 50px;
    left: 225px;
    position: absolute;
    top: 25px;
    width: 1px;
}

.line_right {
    background: black;
    height: 50px;
    left: 525px;
    position: absolute;
    top: 25px;
    width: 1px;
}

.text_left {
    height: 25px;
    left: 175px;
    position: absolute;
    text-align: center;
    top: 75px;
    vertical-align: middle;
    width: 100px;
}

.text_right {
    height: 25px;
    left: 475px;
    position: absolute;
    text-align: center;
    top: 75px;
    vertical-align: middle;
    width: 100px;
}

</style>

{% endblock %}

{% block title %}

Decision Situation {{ player.round_number }} of {{ Constants.num_rounds }}: Estimate

{% endblock %}

{% block content %}

<br />
<br />

<p align="center">
<b> What is your best estimate of your interaction partner's choice? </b> <br />
<i> Click on the slider to report an estimate. </i>
</p>

<div class="slider_box">

<div id="formfields" style="display: none"> {% formfield player.submitted_belief %} </div>
<input id="id_submitted_belief" max="100" min="0" step="1" type="range" value="">
<div class="value" style="display: none"> </div>

<div class="symbol_left"> <b> {% if player.roles_reversed == 0 %} U {% endif %} {% if player.roles_reversed == 1 %} L {% endif %} </b> </div>
<div class="symbol_right"> <b> {% if player.roles_reversed == 0 %} D {% endif %} {% if player.roles_reversed == 1 %} R {% endif %} </b> </div>

<div class="container_left"> <span class="left" id="left"> </span>% </div>
<div class="container_right"> <span class="right" id="right"> </span>% </div>

<div class="line_left"> </div>
<div class="line_right"> </div>

<div class="text_left"> <i> Certainly {% if player.roles_reversed == 0 %} U {% endif %} {% if player.roles_reversed == 1 %} L {% endif %} </i> </div>
<div class="text_right"> <i> Certainly {% if player.roles_reversed == 0 %} D {% endif %} {% if player.roles_reversed == 1 %} R {% endif %} </i> </div>

</div>

<br />
<br />

<button class="btn btn-primary btn-large" style="float: right"> Next </button>

{% endblock %}

{% block scripts %}

<script>

$(document).ready(function() {
    $('input[type=range]').on('input change', function() {
        $('input[type=range]').addClass('myclass1');
        $('input[type=range]').addClass('myclass2');
    });
});

var elem = document.querySelector('input[type="range"]');

var rangeValue = function() {
    var newValue = elem.value;
    document.querySelector('.value').innerHTML = newValue;
    var left = 100 - newValue;
    var right = newValue;
    document.querySelector("#left").innerHTML = left;
    document.querySelector("#right").innerHTML = right;
    document.getElementsByName("submitted_belief")[0].value = right;
}

elem.addEventListener("input", rangeValue);

</script>

{% endblock %}