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

{% block title %}
    Round {{ round_number }}
{% endblock %}

{% block content %}

<p>
    You have been randomly matched to a new group.
</p>
{% if player_class == 1 or player_class == 2 %}
<p>
    You are a <span class="red">Red type</span>.
</p>
<ol>
    <li>Payoff for <span class="red">RED</span> choosing X:
        <span class="red">{{ high_payoff }} &#215; (number of others who chose X)</span></li>
    <li>Payoff for <span class="red">RED</span> choosing Y:
        <span class="red">{{ low_payoff }} &#215; (number of others who chose Y)</span> </li>
</ol>
{% else %}
<p>
    You are a <span class="blue">Blue type</span>.
</p>
<ol start="3">
    <li>Payoff for <span class="blue">BLUE</span> choosing X:
        <span class="blue">{{ low_payoff }} &#215;(number of others who chose X)</span></li>
    <li>Payoff for <span class="blue">BLUE</span> choosing Y:
        <span class="blue">{{ high_payoff }} &#215; (number of others who chose Y)</span> </li>
</ol>
{% endif %}

{% if announce_treatment %}
<p class = "announcement">
    The announcement is: {{ announcement }}
</p>
{% endif %}

<p>
    What is your choice?
</p>
<div>
    <button name="decision" value="X" class="btn btn-primary btn-large large">X</button>
    <button name="decision" value="Y" class="btn btn-primary btn-large large">Y</button>
</div>

{% if subsession.round_number > 1 %}
<h3>History of previous rounds </h3>
    <table class="history">
        <tr>
            <th>Round</th>
            {% if announce_treatment %}
            <th>Announcement </th>
            {% endif %}
            <th>Your Decision</th>
            <th> Others who chose X </th>
            <th> Others who chose Y </th>
            <th class="important">Your Payoff</th>
        </tr>
        {% for p in player_in_previous_rounds %}
            <tr>
                <td>{{ p.round_number }}</td>
                {% if announce_treatment %}
                <td>{{ p.subsession.announcement }}</td>
                {% endif %}
                <td>{{ p.decision }} </td>
                <td>{{ p.others_X }} </td>
                <td>{{ p.others_Y }} </td>
                <td class="important">{{ p.payoff }}</td>
            </tr>
        {% endfor %}
    </table>
{% endif %}

{% endblock %}

{% block app_styles %}
<style type="text/css">
    title {
        font-size: 24pt;
        font-weight: bold;
        }

    body {
        font-size: 18pt;
        }

    .red {
        color: #FF0000;
        }

    .blue {
        color: #0000FF;
        }

    .announcement {
        font-size: 24pt;
        font-weight: bold;
        }

    .large {
        font-size: 36pt;
        background-color: #00CC00;
        color: #000000;
        border: none;
        display: inline-block;
        padding: 20px;
        border-radius: 10px;
        width: 100px;
        }

    .large:hover {
        background-color: #006600;
        }

    th {
        border: 1px solid black;
        font-size: 16pt;
        width: 650px;
        text-align: right;
        font-weight:normal;
        }

    td {
        font-size: 14pt;
        border: 1px solid black;
        text-align: center;
        }

    table {
        table-layout: fixed;
        width: 800px;
        }

    .history td {
        font-size: 16pt;
        }

    .history th {
        font-size: 12pt;
        width: 100px;
        text-align: center;
        }

    .important {
        font-size: 14pt;
        font-weight: bold;
    }
</style>
{% endblock %}