{% extends "slider/Template_slider.html" %}
{% load otree static%}

{% block title %}
{% endblock %}

{% block content %}
    <div class="row">
        <div class="column tleft">
            <b>To exit the slider task, select "Yes" and confirm by clicking the "Next round" button below:</b><br>
            {% formfield player.slider_exit %}
        </div>
        <div class="column tmiddle" align="right">
            Money earned:<br>
            Round:
        </div>
        <div class="column tright" align="left">
            {{ total_payoff }}<br>
            {{ player.round_number }}
        </div>
    </div>


{% if player.treatment == "4" %}
    <div class="card bg-light instructions">
        <h3>Leaderboard</h3>
        <table id="customers">
            <thead>
            <th>Rank</th><th>Player ID</th><th>Fastest round (sec.)</th>
            </thead>
            <tbody id="leaderBoard"></tbody>
        </table>
    </div>
{% endif %}

{% if player.treatment == "2" or player.treatment == "3" %}
    <p>
        <div class="card bg-light instructions">
            <div class="card-body">
                {% include 'slider/Badges.html' %}
            </div>
        </div>
    </p>
{% endif %}

<div class="left">
        <div id="slider1">
            {% formfield player.slider1 %}
        </div>
        </br>
        <div id="slider2">
        {% formfield player.slider2 %}
            </div>
    </br>
    <div id="slider3">
        {% formfield player.slider3 %}
            </div>
    </br>
    <div id="slider4">
        {% formfield player.slider4 %}
            </div>
    </br>
    <div id="slider5">
        {% formfield player.slider5 %}
            </div>
    </br>
    </div>

    <div class="right">
        <div id="slider6">
        {% formfield player.slider6 %}
            </div>
</br>
    <div id="slider7">
        {% formfield player.slider7 %}
            </div>
</br>
    <div id="slider8">
        {% formfield player.slider8 %}
            </div>
</br>
    <div id="slider9">
        {% formfield player.slider9 %}
            </div>
</br>
    <div id="slider10">
        {% formfield player.slider10 %}
            </div>
        </div>
</br>
</br>

    <button value="True" id="proceed" class="btn btn-primary btn-large">Next round</button>
{% endblock %}

{% block styles %}

    <!-- define a style -->
    <style type="text/css">

    #customers {
      border-collapse: collapse;
      width: 100%;
    }

    #customers td, #customers th {
      border: 1px solid #ddd;
      padding: 6px;
    }

    #customers tr:nth-child(even){background-color: #f2f2f2;}

    #customers tr:hover {background-color: #ddd;}

    #customers th {
      padding-top: 6px;
      padding-bottom: 6px;
      text-align: left;
      background-color: #4CAF50;
      color: white;
    }


    td#badges{
        text-align: center;
    }



        div.relative {
  position: relative;
  left: 40px;
  border: 3px solid #73AD21;
}

div.eins {
  position: relative;
  left: 40px;

}
        #informations {
            position: relative;
            left: 800px;
            bottom: 50px;
        }

        test{
            position: absolute
        }


        .verticalTableHeader {
            text-align:middle;
            white-space:nowrap;
            transform-origin:50% 50%;
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);

        }
        .verticalTableHeader:before {
            content:'';
            padding-top:100%;/* takes width as reference, + 10% for faking some extra padding */
            display:inline-block;
            vertical-align:middle;
            padding: 0px 0px;
            }

        .dot {
          height: 25px;
          width: 25px;
          background-color: #33cc00;
          border-radius: 50%;
          display: inline-block;
        }
        .dotgrey {
          height: 25px;
          width: 25px;
          background-color: #C1C1C1;
          border-radius: 50%;
          display: inline-block;
        }
        .bronze {
          height: 25px;
          width: 25px;
          background-color: #cc9966;
          border-radius: 50%;
          display: inline-block;
        }
        .bronzegrey {
          height: 25px;
          width: 25px;
          background-color: #C1C1C1;
          border-radius: 50%;
          display: inline-block;
        }
        .silver {
          height: 25px;
          width: 25px;
          background-color: #999999;
          border-radius: 50%;
          display: inline-block;
        }
        .silvergrey {
          height: 25px;
          width: 25px;
          background-color: #C1C1C1;
          border-radius: 50%;
          display: inline-block;
        }
        .gold {
          height: 25px;
          width: 25px;
          background-color: #ffcc00;
          border-radius: 50%;
          display: inline-block;
        }
        .goldgrey {
          height: 25px;
          width: 25px;
          background-color: #C1C1C1;
          border-radius: 50%;
          display: inline-block;
        }

        .left {
            width: 50%;
            float: left;


        }

        .right {
            width: 50%;
            float: left;
        }


        .slider {
            margin: 0px;
            height: 20px;
            width: 80%;
        }

        #slider1 {
             position: relative;
             left: 40px;
        }

        #slider2 {
             position: relative;
             left: 75px;
        }

        #slider3 {
             position: relative;
             left: 0px;
        }

        #slider4 {
             position: relative;
             left: 70px;
        }

        #slider5 {
             position: relative;
             left: -25px;
        }

        #slider6 {
             position: relative;
             left: 0px;1
        }

        #slider7 {
             position: relative;
             left: 100px;
        }

        #slider8 {
             position: relative;
             left: 50px;
        }

        #slider9 {
             position: relative;
             left: 80px;
        }

        #slider10 {
             position: relative;
             left: 0px;
        }

        #proceed {
            float: right;
            position: relative;
        }




        div.form-control-errors {
         //   display: none;
            position: absolute;
            width: 150px; height: 0px;

         }

        /* Create three unequal columns that floats next to each other */
        .column {
          float: left;
          padding: 10px;
        }

        .tleft {
          width: 40%;
          hyphens: auto;
        }

        .tright {
          width: 15%;
        }

        .tmiddle {
          width: 45%;
        }

        /* Clear floats after the columns */
        .row:after {
          content: "";
          display: table;
          clear: both;
        }

    </style>

{% endblock %}

{% block scripts %}
<!--    <script>
        $("#slider1").on("keydown keypress keyup", false);
        $("#slider2").on("keydown keypress keyup", false);
        $("#slider3").on("keydown keypress keyup", false);
        $("#slider4").on("keydown keypress keyup", false);
        $("#slider5").on("keydown keypress keyup", false);
        $("#slider6").on("keydown keypress keyup", false);
        $("#slider7").on("keydown keypress keyup", false);
        $("#slider8").on("keydown keypress keyup", false);
        $("#slider9").on("keydown keypress keyup", false);
        $("#slider10").on("keydown keypress keyup", false);
    </script>-->
<script>
function leaderboard()
{
	var leaderboardarray = [['a', 20],
                       ['b', 21],
                       ['c', 22],
                       ['d', 23],
                       ['e', 24],
                       ['f', 25],
                       ['g', 26],
                       ['h', 27],
                       ['i', 28],
                       ['j', 29]];
    var listsliderseconds = {{ list_slider_seconds }};
    var fastestround = listsliderseconds[0];
    var append = ['You', fastestround];
    leaderboardarray.push( append );
    var n;
	leaderboardarray.sort(function(a, b){return a[1]-b[1]});
    var myContent = '';
    for (i = 0; i < 10; i++) {
        n = i+1
    	myContent += "<tr><td>" + n + "</td><td>" + leaderboardarray[i][0] + "</td><td>" + leaderboardarray[i][1] + "</td></tr>";
 		document.getElementById("leaderBoard").innerHTML = myContent;
	}
}
leaderboard();
</script>
{% endblock %}