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

{% block title %}
    Part 2: Game {{ player.match }}, Round {{ player.round_in_match }}
{% endblock %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static 'global/matrix.css' %}" />

     <style>
        td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 15px;
            font-size:16px;
        }

        th {
            padding: 15px;
            text-align:center;
            font-weight:normal;
        }

        table.center {
            margin-left: auto;
            margin-right: auto;
        }

        .strat{
            width:200px;
	        height:150px; word-wrap:break-word;
        }

        .red{
	        color:Orange;
        }

        .blue{
	        color:Purple;
        }
    </style>

{% endblock %}

{% block content %}
    <div>
        <h4>Your Rule</h4>
        <p style="color:blue;font-size:20px">
            {% if salience %}
                {% if chosen_strategy %}
                    <b>Always choose A</b>
                {% else %}
                    {% if complex_treatment %}
                        <b>In rounds 1, 2 and 3 choose B. After round 3: choose A if your counterpart chose A in all of the previous 3 rounds; otherwise choose B</b>
                    {% else %}
                        <b>In round 1 choose B. After round 1: choose whatever your counterpart chose last round</b>
                    {% endif %}
                {% endif %}
            {% else %}
                {% if chosen_strategy %}
                    <b>Rule 1</b>
                {% else %}
                    <b>Rule 2</b>
                {% endif %}
            {% endif %}
        </p>
    </div>
<hr>
    <div>
        <h4>Mistake in this Round (Round {{ player.round_in_match }})</h4>
        <p style="color:red;font-size:25px">Your choice doesn't follow your chosen rule in this round! You lost 20 points!</p>
    </div>

    {% next_button %}

    <div style="overflow-y:auto;">
        <h5 style="text-align:center">Round History</h5>
        <table class="table table-bordered text-center" style="border:1px solid black;border-collapse:collapse;width: auto; margin: auto">
            <tr>
                <th>Round</th>
                <th> <span class="red">Counterpart Choice</span> </th>
                <th> <span class="blue">Your Choice</span> </th>
            </tr>
            {% for p in player_up_to_now_reverse %}
                <tr>
                    <td>{{ p.round_in_match }}</td>
                    <td><span class="red">{{ p.counterpartdecision }}</span></td>
                    {% if p.checkaction %}
                        <td><span class="blue">{{ p.decision }}</span></td>
                    {% else %}
                        <td style="background-color:rgba(255, 0, 0, 0.1)"><span class="blue">{{ p.decision }}</span></td>
                    {% endif %}
                </tr>
            {% endfor %}
        </table>
    </div>


{% endblock %}