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

{% block title %}
    Part 2: Game {{ player.match }} – The current game has ended!
{% 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;
        }

        .otree-timer {
            display: none;
        }
    </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>Results of the Current Game</h4>
        {% if no_mistake %}
            <p style="font-size:20px;color:green">
                There were <b>{{ num_paidround }}</b> paid rounds in this game. You made <b>0</b> mistake in the paid rounds. Your payoff from this game is <b>{{ player.matchpayoff|c }}</b>.
            </p>
        {% else %}
            <p style="font-size:20px;color:red">
                There were <b>{{ num_paidround }}</b> paid rounds in this game. You made <b>{{ player.nummistake }}</b> mistake(s) in the paid rounds and lost <b>{{ mistake_deduct_sum|c }}</b> due to mistake(s). Your payoff from this game is <b>{{ player.matchpayoff|c }}</b>.
            </p>
        {% endif %}
    </div>

    <p style="font-size:18px">
        {% if last_match %}
            <b>This is your final game.</b> Please click the Next button to see your final payoff.
        {% else %}
            Please click the Next button to start next game. <b>In the next game, you will be randomly matched with a new person.</b>
        {% endif %}
    </p>
    {% next_button %}

    <div style="overflow-y:auto;">
        <h5 style="text-align:center">History of the Current Game</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_in_match_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 %}