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

{% block styles %}

<style>

input[type=range] {
    width: 300px;
    height: 10px;
    -webkit-appearance: none;
}

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

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 10px;
    border: 1px solid #DCDCDC;
    border-radius: 5px;
    background: #DCDCDC;
}

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

.myclass::-webkit-slider-thumb {
    width: 10px !important;
    height: 30px !important;
    border: 1px solid black;
    border-radius: 5px !important;
    background: #306EFF !important;
    box-shadow: 1px 1px 1px black;
    cursor: pointer !important !important;
    margin-top: -15px !important;
    -webkit-appearance: none !important;
}

.bordered_small {
    width: 50px;
    height: 25px;
    border: 1px solid #DCDCDC;
    border-radius: 5px;
}

.bordered_box {
    width: 600px;
    height: 100px;
    border: 1px solid white;
    border-radius: 5px;
}

</style>

{% endblock %}

{% block title %}

Statement {{ player.round_number }} of {{ Constants.num_rounds }}

{% endblock %}

{% block content %}

<p align="justify">
    Consider the following statement:
</p>

<p align="center">
    <b> "{{ player.statement }}" </b>
</p>

<p align="justify">
{% formfield player.submitted_answer label="1. Do you agree or disagree with this statement?" %}
</p>

<p align="justify">
    2. How important is the topic of this statement to you?
</p>

<div id="formfields" style="display: none">
    {% formfield player.submitted_importance %}
</div>

<center>
<div class="bordered_box">

<div class="value" style="color: transparent"> - </div>

<center>
Not Important &emsp;
<input type="range" min="0" max="10" step="1" value="0" id="id_submitted_importance">
&emsp; Very Important
</center>

<center>
(0) &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; (10)
</center>

<center>
<div class="bordered_small">
<span class="current_value" id="current_value"> </span>
</div>
</center>

</div>
</center>

<br />
<br />

<center> {% next_button %} </center>

{% endblock %}

{% block scripts %}

<script>

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

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

var rangeValue = function(){
    var newValue = elem.value;
    document.querySelector('.value').innerHTML = newValue;
    var current_value = newValue;
    document.querySelector("#current_value").innerHTML = current_value;
    document.getElementsByName("submitted_importance")[0].value = current_value;
}

elem.addEventListener("input", rangeValue);

</script>

{% endblock %}