{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}

{% block scripts %}
<script language="JavaScript">
    var sec = 0;

    var timer = setInterval(function () {
    document.getElementById("decision_time").value = ((sec+=100)/1000);}, 100);

    function checkwork(autosubmit){

        var indpoints = Number(document.getElementById("form").elements["individual_points"].value);
        var duopoints = Number(document.getElementById("form").elements["duo_points"].value);
        var firmpoints = Number(document.getElementById("form").elements["firm_points"].value);
        var totalpoints = indpoints + duopoints + firmpoints;

        if (totalpoints > 50) {
            alert("Your total token allocations must add up to 50.");
        } else if (totalpoints < 50) {
            alert("Your total token allocations must add up to 50.");
        } else {
            document.getElementById("form").submit();
        }

    }

</script>
{% endblock %}

{% block title %}


    Resource Allocation Task
{% endblock %}

{% block content %}
    <hr>
  <span class="resultlabelsm">
        {% if condition < 5 %}
            Recall that for this task, you are paired with the same Manager {% if type == 1 %}B{% else %}A{% endif %} {% if condition > 2 %}and Company Owner {% endif %}with whom you most recently completed the cost reporting task. You will not need to communicate with them or
            “wait” for them.
        {% else %}
            Recall that for this task, you are paired with the same Manager {% if type == 1 %}B{% else %}A{% endif %} and Company Owner with whom you completed all periods of the cost reporting task. You will not need to communicate with them or
            “wait” for them.
        {% endif %}
    </span>
    </p>
    <p>
        You have 50 tokens, which can be allocated in any amounts you choose to the projects described to you previously:
    </p>
        <table class="tabmarg" width="80%" border="0">
        <tbody>
            <tr>
                <td valign="top"></td>
                <td valign="top">Project 1: A project that returns $0.04 to you for each token allocated. </td>
            </tr>
            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
            <tr>
                <td valign="top"></td>
                <td valign="top">Project 2: A project that returns $0.03 to you, and $0.03 to Manager {% if type == 1 %}B{% else %}A{% endif %}, for each token allocated. </td>
            </tr>
            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
            <tr>
                <td valign="top"></td>
                {% if condition > 2 %}
                    <td valign="top">Project 3: A project that returns $0.02 to you, $0.02 to Manager {% if type == 1 %}B{% else %}A{% endif %}, and $0.02 to the
                    Company Owner, for each token allocated. </td>
                {% else %}
                    <td valign="top">Project 3: A project that returns any token allocated to the Company, and so returns $0.00 to you and $0.00 to Manager {% if type == 1 %}B{% else %}A{% endif %}. </td>
                {% endif %}
            </tr>
        </tbody>
        </table>
        <hr>

    <p>
        Please enter your allocations below, and then click "Next."
    </p>

    <p class="indented">
        <table class="tabmarg" width="70%" border="0">
        <tbody>
            <tr>
                <td valign="middle" width="17%">Project 1:</td>
                <td align="left">{% formfield player.individual_points %}</td>
            </tr>

            <tr>
                <td valign="middle" width="17%">Project 2:</td>
                <td align="left">{% formfield player.duo_points %}</td>
            </tr>

            <tr>
                <td valign="middle" width="17%">Project 3:</td>
                <td align="left">{% formfield player.firm_points %}</td>
            </tr>
        </tbody>
        </table>
    </p>

    <hr>


    <button type="button" class="btn btn-primary" onclick="checkwork(0)">Next</button>
    <input type="hidden" id="decision_time" name="decision_time">


{% endblock %}
{% block styles %}
    <STYLE TYPE="text/css">
        .indented { padding-left: 50pt; padding-right: 50pt; font-weight: normal !important;}
        .tabmarg {margin-left: 80px}
        .res{
            font-size: large;}
        .resultlabel{
            color: #1B232F;
            font-size: large;
            font-weight: bold;
            background-color: #FFDDD8;
        }
        .resultlabelsm{
            color: #1B232F;
            font-weight: bold;
            background-color: #FFDDD8;
        }
        .norm{
            font-size: medium;
        }

    </STYLE>
{% endblock %}