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

{% block title %}
    Part 2: Game {{ player.match }}, Round {{ player.round_in_match }} – End of Block!
{% endblock %}

{% block content %}
<div>
    <h4>The Last Block</h4>
    <p style="font-size:18px">
        {% if end_in_block %}
            Game {{ player.match }} <b>ended</b> in block <b>{{ num_block }}</b> at round <b>{{ num_paidround }}</b>. Results of this game will be shown on the next page.
        {% else %}
            Game {{ player.match }} <b>didn't end</b> in this block. You will enter another block of {{Constants.num_in_block}} rounds.
        {% endif %}
    </p>
    {% next_button %}
</div>

<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 %}
                {% if p.round_in_match > num_paidround %}
                    <tr style="background-color:rgba(60, 60, 60, 0.1)" class="strikeout">
                        <td>{{ p.round_in_match }}</td>
                        <td><span class="red">{{ p.counterpartdecision }}</span></td>
                        <td><span class="blue">{{ p.decision }}</span></td>
                    </tr>
                {% else %}
                    <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>
                {% endif %}
            {% endfor %}
        </table>
</div>

{% endblock %}

{% block styles %}
    <style>
        td { position: relative; }

        tr.strikeout td:before {
            content: " ";
            position: absolute;
            top: 50%;
            left: 0;
            border-bottom: 1px solid #111; /* can change the color of the strikeout */
            width: 100%;
        }

        tr.strikeout td:after {
            content: "\00B7";
            font-size: 1px;
        }

        .red{
	        color:Orange;
        }

        .blue{
	        color:Purple;
        }

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

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

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