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

{% block styles %}

<style>

.container_box {
    border: 1px solid white;
    height: 500px;
    margin: auto;
    position: relative;
    width: 900px;
}

.timer_box {
    border: 1px solid black;
    height: 50px;
    position: absolute;
    top: 0px;
    width: 900px;
}

.matrix_box {
    border: 1px solid white;
    height: 450px;
    position: absolute;
    top: 50px;
    width: 900px;
}

.answer_box {
    border: 1px solid black;
    height: 150px;
    margin: auto;
    position: relative;
    width: 900px;
}

.tg {
    height: 50px;
    table-layout: fixed;
    width: 350px;
}

.tg td {
    height: 25px;
    text-align: center;
    vertical-align: middle;
}

input[type=radio] {
    margin-left: -20px;
    margin-top: 6px;
}

.otree-timer {
    display: none;
}

</style>

{% endblock %}

{% block title %}

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

{% endblock %}

{% block content %}

<!-- Container -->

<div class="container_box">

<!-- Timer -->

<div class="timer_box">

<p align="center" style="margin-top: 12px">
Time: <b> <label id="minutes">--</label>:<label id="seconds">--</label> </b>
</p>

</div>

<!-- -->

<!-- Matrix -->

<div class="matrix_box">

<center>

<img src="{% static player.problem %}" height="400px" style="margin-top: 25px"/>

</center>

</div>

<!-- -->

</div>

<!-- -->

<br />

<!-- Answer -->

<div class="answer_box">

<p align="center" style="margin-top: 12px">
<b> Which element do you choose? </b> <br />
<i> Select the corresponding button and press "Next". </i>
</p>

<center>

<table class="tg">
  <tr>
    <td style="width: 80px"> {{ form.submitted_choice.0.tag }} 1 </td>
    <td style="width: 10px"> </td>
    <td style="width: 80px"> {{ form.submitted_choice.1.tag }} 2 </td>
    <td style="width: 10px"> </td>
    <td style="width: 80px"> {{ form.submitted_choice.2.tag }} 3 </td>
    <td style="width: 10px"> </td>
    <td style="width: 80px"> {{ form.submitted_choice.3.tag }} 4 </td>
  </tr>
  <tr>
    <td style="width: 80px"> {{ form.submitted_choice.4.tag }} 5 </td>
    <td style="width: 10px"> </td>
    <td style="width: 80px"> {{ form.submitted_choice.5.tag }} 6 </td>
    <td style="width: 10px"> </td>
    <td style="width: 80px"> {{ form.submitted_choice.6.tag }} 7 </td>
    <td style="width: 10px"> </td>
    <td style="width: 80px"> {{ form.submitted_choice.7.tag }} 8 </td>
  </tr>
</table>

</center>

</div>

<!-- -->

<br />

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

<input id="submitted_time" name="submitted_time" type="hidden" value=""/>

{% endblock %}

{% block scripts %}

<script>

var startTime = new Date().getTime();

var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);

function setTime() {

    ++totalSeconds;
    secondsLabel.innerHTML = pad(totalSeconds%60);
    minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));

}

function pad(val) {

    var valString = val + "";
    if (valString.length < 2) {
        return "0" + valString;
    }
    else {
        return valString;
    }

}

function saveData() {

    var newTime = (new Date().getTime() - startTime) / 1000.;
    document.getElementById("submitted_time").value = newTime;

}

</script>

{% endblock %}