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

{% block title %}
    Alternative Selection
    <p>Round {{ subsession.round_number }} of {{ Constants.num_rounds }}</p>
{% endblock %}

{% block content %}
    <div style="font-weight:bold"><p style="font-size:30px">Time left to make your decision: <span id="time">01:00</span></p></div>
    The below table lists both your and your group members' payoffs for selecting the various alternatives, as well as how
    many votes each has been allocated this round. Your player number, votes, and payoffs are highlighted in yellow:
    <br>
    <br>
       <table class="table">
        <tr>
            <th>Player:</th> {% for p in players %}<td {% if p.id_in_group == player.id_in_group %} style="background-color:yellow"
        {% endif %}>{{p.id_in_group}} {% if p.id_in_group == player.id_in_group %} (You) {% endif %}</td>{% endfor %}
        </tr>
        <tr>
            <th>Votes:</th> {% for p in players %} <td {% if p.id_in_group == player.id_in_group %} style="background-color:yellow"
        {% endif %}>{{ p.votes }}</td>
            {% endfor %}
        </tr>
        <tr>
        <th>Alternatives</th>
        <th colspan="3">Players' Payoffs</th>
        </tr>
       <tr><td></td><td></td><td></td><td></td></tr>
        <tr>
            <td>A</td> {% for p in players %}<td {% if p.id_in_group == player.id_in_group %} style="background-color:yellow"
        {% endif %}>{{ p.player_payoff_1_ir }}</td>{% endfor %}
        </tr>
        <tr>
            <td>B</td> {% for p in players %}<td {% if p.id_in_group == player.id_in_group %} style="background-color:yellow"
        {% endif %}>{{ p.player_payoff_2_ir }}</td>{% endfor %}
        </tr>
        <tr>
            <td>C</td> {% for p in players %}<td {% if p.id_in_group == player.id_in_group %} style="background-color:yellow"
        {% endif %}>{{ p.player_payoff_3_ir }}</td>{% endfor %}
        </tr>
        <tr>
            <td>D</td> {% for p in players %}<td {% if p.id_in_group == player.id_in_group %} style="background-color:yellow"
        {% endif %}>{{ p.player_payoff_4_ir }}</td>{% endfor %}
        </tr>
    </table>
    <br>
    <br>
    Please indicate your ranking of the above alternatives from highest (1) to lowest (4):
    <br>
    <br>
    <table class="table">
        <tr>
            <td>{% formfield player.IR_A label="A:" %}</td> <td>{% formfield player.IR_B label="B:" %}</td>
            <td>{% formfield player.IR_C label="C:" %}</td> <td>{% formfield player.IR_D label="D:" %}</td>
        </tr>
    </table>
    <br>
    <br>
    <br>
    {% next_button %}

{% endblock %}

{% block scripts %}

<script>
    function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    var blink_speed = 1000;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = 0;
            document.getElementById("time").style.color = 'red';
            var t = setInterval(function () {
                var ele = document.getElementById("time");
                ele.style.color = (ele.style.color == 'black' ? 'red' : 'black');
            }, blink_speed);
                }
                    }, 1000);
                        }

    window.onload = function () {
        var oneMinute = 30 * 2,
            display = document.querySelector('#time');
        startTimer(oneMinute, display);
};
    </script>

{% endblock %}