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

{% block title %}

{% endblock %}

{% block styles %}
<style>
.otree-btn-next {
    float: right;
    display: none;
}
.form-check-input {
    position: relative;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto
}
.col-form-label {
    font-weight:bold;
}
p{
    text-align: justify;
    text-justify: inter-word;
}
.info {
    padding: 15px 15px 0px 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.slider:hover {
  opacity: 1;
}
input[type="range"] {
  width:100%;
}
.sliderticks {
  display: flex;
  justify-content: space-between;
  padding: 2px 2px 2px 0px;
}
.sliderticks p {
  font: 15px sans-serif;
  position: relative;
  display: flex;
  justify-content: center;
  width: 2px;
  background: #D3D3D3;
  height: 7.5px;
  line-height: 40px;
  margin: 0 0 10px 0;
}

.sliderticks span {
  font: 15px sans-serif;
  display: flex;
  height: 7.5px;
  line-height: 0px;
  margin: 0 0 10px 0;
}

.myclass::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #007afe;
    border: 1px solid #000000;
    height: 25px !important;
    width: 10px !important;
    border-radius: 0px !important;
    background: #ffffff !important;
    cursor: pointer !important !important;
    -webkit-appearance: none !important;
    margin-top: -7px !important;
    }
input {
    -webkit-appearance: none;
    margin: 0px 0;
    width: 100%;
}
input:focus {
    outline: none;
}
input::-webkit-slider-runnable-track {
    width: 100%;
    height: 15px;
    cursor: pointer;
    animate: 0.2s;
    {#box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;#}
    background: #007afe;
    border-radius: 10px;
    border: 0.0px solid #ffffff;
}
input::-webkit-slider-thumb {
    border: 0px;
    height: 0px;
    width: 0px;
    border-radius: 0px;
    -webkit-appearance: none;
}
.inputbox{
    border-radius: 5px;
    text-align: center;
    border: 1px gray;
    padding: 5px 5px;
    background-color: #AED6F1;
    display: inline-block;
    width: 60px;
    height: 35px;
}
</style>
{% endblock %}

{% block content %}

<div class="card info">
    <p>
        What rank (between 1 and 20) do you think {{ team }} will achieve <b> at the end of the season </b>? Click on the slider to indicate your choice.
    </p>
    <div style="text-align:center;">
        Team: <b> {{ team }} </b>  &nbsp &nbsp &nbsp &nbsp
        Most likely rank at the end of the season: <span id="chelsea_rank_show" class="inputbox"> Value </span>
    </div>
    <div class="range" style="padding: 15px 15px 15px 15px; height: 50px">
        <input type="range" name="chelsea_rank" id="chelsea_rank" min="1" max="20" step="1" oninput="update_slider_rank(this.value)">
        <div class="sliderticks">
            <p>1</p> <p></p> <p></p> <p></p> <p>5</p> <p></p> <p></p> <p></p> <p></p> <p>10</p>
            <p></p> <p></p> <p></p> <p></p> <p>15</p> <p></p> <p></p> <p></p> <p></p> <p>20</p>
        </div>
    </div>

    <br><br>

    <p>
        How certain are you about the likely ranking of {{ team }}?
        <i> Use a scale of 1 (=very uncertain) to 5 (=completely certain) to indicate how certain you are. </i>
    </p>
    <div style="text-align:center;">
    </div>
    <div class="range" style="padding: 15px 15px 15px 15px; height: 50px">
        <input type="range" name="chelsea_certain" id="chelsea_certain" min="1" max="5" step="1" oninput="update_slider_certain(this.value)">
        <div class="sliderticks">
            <p></p> <p></p> <p></p> <p></p> <p></p>
        </div>
        <div class="sliderticks">
            <span style="justify-content: left;">Very uncertain</span> <span style="justify-content: right;">Completely certain</span>
        </div>
    </div>
    <br><br>
</div>
<br><br>
<div style="display:inline-block; margin:0; float: left;"> </div> <button onclick="endPage()" class="otree-btn-next btn btn-primary"> Next </button>
<br><br>
<input type="hidden" name="chelsea_rank_time" id="chelsea_rank_time" step="0.000001">

{% endblock %}

{% block scripts %}
<script>
var startTime;
var rank_clicked = 0;
var certain_clicked = 0;

$(document).ready(function() {
    startpage_time = Date.now();
});

function endPage() {
    var endpage_time = Date.now();
    page_time = (endpage_time - startpage_time)/1000;
    document.getElementById('chelsea_rank_time').value=page_time;
};

function update_slider_rank(val) {
    choice = parseFloat(val);
    rank_clicked = 1;
    document.getElementById('chelsea_rank_show').innerHTML = choice;
    if (rank_clicked && certain_clicked) {
        $('.otree-btn-next').show();
    }
    $('input[name=chelsea_rank]').addClass('myclass');
};

function update_slider_certain(val) {
    choice = parseFloat(val);
    certain_clicked = 1;
    if (rank_clicked && certain_clicked) {
        $('.otree-btn-next').show();
    }
    $('input[name=chelsea_certain]').addClass('myclass');
};

</script>
{% endblock %}