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

{% block title %}
The End of Experiment
{% endblock %}

{% block content %}

<style>
    p{
        font-size: 22px;
    }
    .otree-form-errors {
        visibility: hidden;
        display: none;
    }
    .otree-body {
        max-width:1100px
    }
    input[type=radio]:checked + label {
          font-style: normal;
          color: rgb(56,110,246);
          border: 1px solid rgb(56,110,246);
          background-color: rgb(226,233,253)
        }
    .table {
      width: 80%;
    }
</style>

<br>
<p>
    This is the end of the experiment.
</p>
<p>The table bolow shows your earings in each part of the experiment and your final earnings. </p>
<br>
    <table class="table">
        <tr>
            <th scope="col"></th>
            <th scope="col"></th>
        </tr>
        <tr>
            <td>Part 1 earning</td>
            <td>{{ player.participant.part1payoff }} ECU</td>
        </tr>
        <tr>
            <td>Part 2 earning</td>
            <td>{{ player.participant.part2payoff }} ECU</td>
        </tr>
        <tr>
            <td>Part 3 earning</td>
            <td>{{ player.participant.part3payoff }} ECU</td>
        </tr>
        <tr>
            <td>Part 4 earning</td>
            <td>{{ player.participant.part4payoff }} ECU</td>
        </tr>
        <tr>
            <td>Bonus payment</td>
            <td>{{ player.bonuspayoff }} ECU (Part {{player.PaymentPart}} is selected)</td>
        </tr>
        <tr>
            <td>Participation fee</td>
            <td>&pound2.50</td>
        </tr>
        <tr>
            <td>ECU exchange rate</td>
            <td>100 ECU = &pound1</td>
        </tr>
        <tr>
            <td>Final Payment</td>
            <td>&pound{{player.finalpayoff}}</td>
        </tr>
    </table>
<br>
<p style="margin-bottom: -20px;">
    Please enter you Prolific ID. This is needed for the bonus payments.
    {{formfields}}
</p>
<br>
<br>

{% next_button %}

{{ endblock }}