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

{% block styles %}
    <link href="{% static 'css/custom.css' %}" rel="stylesheet"/>
{% endblock %}

{% block title %}
    End of study
{% endblock %}


{% block content %}
<div class="wrapper textbox">
<h4>Dear participant,</h4>
<p>
    Thank you for taking part in our experiment.
    <br><br>

    You completed the experiment. Therefore, you earn <b>1 GBP</b>.
    <br><br>

    In the main task where you were to identify the preferable income program according to the principle, our random
    mechanism chose <b>answer {{ relevant }}</b> to be relevant for your payoff. For this pair, your answer was
    <b>{{ main_outcome }}</b>. Therefore, your earnings for this task are <b>{{ main_payoff }} GBP</b>.
    <br><br>

    Furthermore, you earned a bonus of <b>{{ bonus }} GBP</b> from the income program chosen by another participant in
    a previous study.
    <br><br>

    You can see the summary of your total earnings in the following table.
</p>
</div>

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;border-color:#aaa;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-top-width:1px;border-bottom-width:1px;border-color:#aaa;color:#333;background-color:#fff;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-top-width:1px;border-bottom-width:1px;border-color:#aaa;color:#fff;background-color:#f38630;}
.tg .tg-x5q1{font-size:16px;text-align:right;vertical-align:top}
.tg .tg-vox4{font-weight:bold;font-size:16px;text-align:left;vertical-align:top}
.tg .tg-cqfb{font-size:16px;text-align:left;vertical-align:middle}
.tg .tg-ltad{font-size:14px;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:right;vertical-align:top}
@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}}</style>

    <div class="tg-wrap">
        <table class="tg" style="margin-left:auto;margin-right:auto;">
          <tr>
            <th class="tg-cqfb">Task</th>
            <th class="tg-x5q1">Earnings</th>
          </tr>
          <tr>
            <td class="tg-ltad">Completion</td>
            <td class="tg-0lax">1 GBP</td>
          </tr>
          <tr>
            <td class="tg-ltad">Main Task</td>
            <td class="tg-0lax">{{ main_payoff }} GBP</td>
          </tr>
          <tr>
            <td class="tg-ltad">Bonus</td>
            <td class="tg-0lax">{{ bonus }} GBP</td>
          </tr>
          <tr>
            <td class="tg-vox4">Total</td>
              <td class="tg-0lax"><b>{{ total_payoff }} GBP</b></td>
          </tr>
        </table>
    </div>


<div class="wrapper textbox">
    The amount of <b>{{ total_payoff }} GBP</b> will be credited to your account.
    Note that this calculation <b>includes</b> the 1 GBP base rate compensation for finishing the study.
    Thank you for your time.
    <p>
        Click <a href="https://app.prolific.co/submissions/complete?cc=60B14D35">here</a> to be
        redirected to Prolific's completion page.
        <br>
    </p>
</div>


{% endblock %}