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

{% block title %}
{% endblock %}


{% block content %}
    <div style="text-align:center;font-size:16px">
        {% if player.status == 'dropout' %}
            <h4> This is the end of the experiment </h4>
            <p>Because you have dropped out, you will not receive any payment for the experiment.</p>
        {% else %}
{#            <h3 style="text-align: center"> Interaction Results </h3>#}
            <h4>This is the end of the interaction </h4>
            {% if player.status == 'other_dropout' %}
                <p>The interaction ends now because the other participant has dropped out from the experiment.</p>
            {% endif %}

            <p> Your cumulative payoff from the interaction is {{ player.payoff }}. </p>
            <div style="text-align:right">
                {% next_button %}
            </div>
        {% endif %}
    </div>
    <hr>

    {% if player.player_round != 1 %}
        <h5 style="text-align:center">
            History
        </h5>
        <table class="table" style="text-align:center">
            <tr>
                <th>Round</th>
                <th>Your choice</th>
                <th>Other's choice</th>
                <th>Your payoff</th>
                <th>Other's payoff</th>
                <th>Your cumulative payoff</th>
                <th>Other's cumulative payoff</th>
            </tr>
            {% for p in history %}
                <tr>
                    <td>{{ p.round_number }}</td>
                    <td style="color:red">{{ p.action}}</td>
                    <td style="color:blue">{{ p.other_action}}</td>
                    <td style="color:red">{{ p.payoff}}</td>
                    <td style="color:blue">{{ p.other_payoff}}</td>
                    <td style="color:red">{{ p.cum_payoff}}</td>
                    <td style="color:blue">{{ p.other_cum_payoff}}</td>
                </tr>
            {% endfor %}
        </table>
    {% endif %}
{% endblock %}