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

{% block title %}
    Decision
{% endblock %}

{% block content %}

<div id="main">
    <img src="{% static 'Game.PNG' %}"; align="center"/><br><br>

    {% if power_role_abb == 'man_con' %}

    <b>You are player 1</b> in your team.

    {% elif power_role_abb == 'man_hi' %}

    <b>You are player 1</b> in your team.
    <br><br>

    Player 2 in your team comes from a selected pool of participants.
    In your case, <b>80%</b> are of the opinion that the team <b>should leave</b> the token in the shared account.

    {% elif power_role_abb == 'man_low' %}

    <b>You are player 1</b> in your team.
    <br><br>

    Player 2 in your team comes from a selected pool of participants.
    In your case, <b>80%</b> are of the opinion that the team <b>should take</b> the token from the shared account.

    {% endif %}

    <br><br>

    {% if treatment == 'obs' %}

    You have to choose between <b>take</b> or <b>leave</b>.<br>
    Afterwards, player 2 can observe what you chose.

    <br><br>

    {% elif treatment == 'veto' %}

    You have to choose between <b>take</b> or <b>leave</b>.<br>
    Afterwards, player 2 can observe what you chose and also makes a choice. <br>
    If you and player 2 choose <b>take</b>, the team decision will be <b>take</b>. If at least one of you chooses <b>leave</b>, the team decision will be <b>leave</b>.

    <br><br>

    {% elif treatment == 'sim' %}

    You and player 2 in your team have to choose between <b>take</b> or <b>leave</b>.
    If you and player 2 choose <b>take</b>, the team decision will be <b>take</b>. If at least one of you chooses  <b>leave</b>, the team decision will be  <b>leave</b>.

    <br><br>

    {% endif %}

    What do you choose?
    {% formfield player.decision %}
</div>

    {% next_button %}

    {% if treatment == 'obs' %}

    <div class="noteBoxes type3" style="display:flex; font-size: 14px">
        <div>
		    <p><u><b>Remember</b>, this is how teams decide:</u></p>
                <ul>
                <li>Player 1 chooses between <b>take</b> and <b>leave</b>.</li>
                <li>Player 2 observes what player 1 chose.</li>
                </ul>
        </div>
	</div>

    {% elif treatment == 'veto' %}

    <div class="noteBoxes type3" style="display:flex; font-size: 14px">
        <div>
            <p><u><b>Remember</b>, this is how teams decide:</u></p>
                <ul>
                <li>Player 1 chooses between <b>take</b> and <b>leave</b>.</li>
                <li>Player 2 observes what player 1 chose and then chooses between <b>take</b> and <b>leave</b>.</li>
                <li>If both player 1 and player 2 choose <b>take</b>, the team will take the token from the shared account.</li>
                <li>If one or both players choose <b>leave</b>, the team will leave the token in the shared account.</li>
                </ul>
        </div>
	</div>

    {% elif treatment == 'sim' %}

    <div class="noteBoxes type3" style="display:flex; font-size: 14px">
        <div>
            <p><u><b>Remember</b>, this is how teams decide:</u></p>
                <ul>
                <li>Player 1 and player 2 both choose between <b>take</b> and <b>leave</b>.</li>
                <li>If both player 1 and player 2 choose <b>take</b>, the team will take the token from the shared account.</li>
                <li>If one or both players choose <b>leave</b>, the team will leave the token in the shared account.</li>
                </ul>
        </div>
	</div>

    {% endif %}


<style>
    .otree-timer {
        display: none;
    }

        .noteBoxes
{
	border: 1px solid;
  	border-radius: 5px;
	padding: 10px;
	margin: 10px 0;
}

.type1
{
	border-color: #E76F51;
	background-color: rgba(231, 111, 81, 0.1);
}

.type2
{
	border-color: #2A9D8F;
	background-color: rgba(42, 157, 143, 0.1);
}

.type3
{
	border-color: #0096C7;
	background-color: rgba(0, 150, 199, 0.1);
}

.type4
{
	border-color: #00B353;
	background-color: rgba(0, 179, 83, 0.1);
}

.picture
{
	width: 15px;
	padding-right: 10px;
}
</style>

{% endblock %}