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

{% block styles %}

<style>

.bordered_large {
    width: 480px;
    height: 298px;
    border: 1px solid black;
    border-radius: 5px;
    padding: 25px 0px 25px 0px;
}

</style>

{% endblock %}

{% block title %}

Practice Period

{% endblock %}

{% block content %}

<p align="center" style="height: 50px; border: 1px solid black; border-radius: 5px; line-height: 50px">
Time: <b> <label id="minutes">--</label>:<label id="seconds">--</label> </b>
</p>

<br />

<p align="center">
{% if player.perceived_similarity == 1 %} <img src="{% static 'GMTA1/IOS_A.jpg' %}" height="75"/> {% endif %}
{% if player.perceived_similarity == 2 %} <img src="{% static 'GMTA1/IOS_B.jpg' %}" height="75"/> {% endif %}
{% if player.perceived_similarity == 3 %} <img src="{% static 'GMTA1/IOS_C.jpg' %}" height="75"/> {% endif %}
{% if player.perceived_similarity == 4 %} <img src="{% static 'GMTA1/IOS_D.jpg' %}" height="75"/> {% endif %}
{% if player.perceived_similarity == 5 %} <img src="{% static 'GMTA1/IOS_E.jpg' %}" height="75"/> {% endif %}
{% if player.perceived_similarity == 6 %} <img src="{% static 'GMTA1/IOS_F.jpg' %}" height="75"/> {% endif %}
{% if player.perceived_similarity == 7 %} <img src="{% static 'GMTA1/IOS_G.jpg' %}" height="75"/> {% endif %}
</p>

<br />

<center>
<div class="bordered_large">
    <center>
    <b> You: Same Label </b> <br />
    <br />
        {% if player.position == 1 %}
        <img src="{% static 'GMTA1/Happy.jpg' %}" width="150" height="150" style="border: 1px solid black; border-radius: 5px" /> <span style="display: inline-block; width: 50px;"> </span>
        {% endif %}
        {% if player.position == 2 %}
        <img src="{% static 'GMTA1/Sad.jpg' %}" width="150" height="150" style="border: 1px solid black; border-radius: 5px" /> <span style="display: inline-block; width: 50px;"> </span>
        {% endif %}
        {% if player.position == 1 %}
        <img src="{% static 'GMTA1/Sad.jpg' %}" width="150" height="150" style="border: 1px solid black; border-radius: 5px" /> <br />
        {% endif %}
        {% if player.position == 2 %}
        <img src="{% static 'GMTA1/Happy.jpg' %}" width="150" height="150" style="border: 1px solid black; border-radius: 5px" /> <br />
        {% endif %}
    <br />
    <b> Other: Different Label </b>
    </center>
</div>
</center>

<br />
<br />

<p align="center">
Which label do you choose against <i> CHOICE-other</i>?
</p>

<center>
<table class="w3-table">
    <tr>
        <td style="width: 150px; text-align: center"> Left Label </td>
        <td style="width: 150px; text-align: center"> Right Label </td>
    </tr>
    <tr>
        {% for choice in form.practice_submitted_choice %}
        <td style="text-align: center"> &emsp; &ensp; {{ choice.tag }} </td>
        {% endfor %}
    </tr>
</table>
</center>

<br />
<br />

<input type="hidden" name="new_practice_time_choice" value="0"/>
<input type="hidden" name="new_practice_time_choice_rounded" value="0"/>

<center> <button class="btn btn-primary btn-large" onclick="myFunction()"> Next </button> </center>

{% endblock %}

{% block scripts %}

<script>

startTime = new Date;

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 myFunction() {
    var local_time = new Date - startTime;
    document.getElementsByName("new_practice_time_choice")[0].value = parseFloat(local_time/1000);
    document.getElementsByName("new_practice_time_choice_rounded")[0].value = parseInt(Math.round(local_time/1000));
}

</script>

{% endblock %}