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

{% block styles %}
<style>
.content {
    height: 100%;
    justify-content: center;
    align-items: center;
}

.decision {
    justify-content: center;
    align-items: center;
}

.page-header {
    margin: 0px;
}

.otree-body.container {
    margin: 0px auto 0px;
    font-size: 1.3rem;
    font-weight: normal;
    padding-top: 5%;
}

.payoff_info {
    font-size:2.3rem;
    padding: 0;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}

</style>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}
<div class="row content">
    <div class="col-8">
        <h2>Results</h2>
        <p>One of your decisions has been selected at random to determine your bonus. In
          that decision, the two options were:</p>
    </div>
</div>

<br>

<div class="row content">
     <div class="col-12">
    {% if number_on_left %}
        <div class="row decision">
          <div class="col-4" style="text-align:center; margin-bottom: 0.7rem;"><b>Option A</b></div>
          <div class="col-4" style="text-align:center; margin-bottom: 0.7rem;"><b>Option B</b></div>
        </div>
        <div class="row decision">
          <div class="col-4" style="text-align:center;">
                <div><b>{{ number }}</b></div>
          </div>
        <div class="col-4" style="text-align:center;">
          <div><b>{{Constants.downside}}</b> if other participant chooses A</div>
          <div><b>{{Constants.upside}}</b> if other participant chooses B</div>
        </div>
        </div>
    {% else %}
        <div class="row decision">
          <div class="col-4" style="text-align:center; margin-bottom: 0.7rem;"><b>Option B</b></div>
          <div class="col-4" style="text-align:center; margin-bottom: 0.7rem;"><b>Option A</b></div>
        </div>
        <div class="row decision">
          <div class="col-4" style="text-align:center;">
            <div><b>{{Constants.downside}}</b> if other participant chooses A</div>
            <div><b>{{Constants.upside}}</b> if other participant chooses B</div>
          </div>
        <div class="col-4" style="text-align:center;">
            <div><b>{{ number }}</b></div>
        </div>
        </div>
    {% endif %}
</div>
</div>

<br>

<div class="row content">
    <div class="col-8">

    {% if chosen == "A" %}
        <p>You chose <b>Option A</b>. Because Option A pays a fixed amount, you will earn
          <b>{{ number }} points</b>, regardless of the other participant's choice.</p>
    {% elif chosen == "B" %}
        <p>You chose <b>Option B</b>. Your earnings depend on the choice of <b>another
          participant who faced the same decision</b> &mdash; that is, another participant
          who also saw Option A worth {{ number }} points. After data collection is complete,
          we will match you with one such participant: you will earn
          <b>{{ Constants.upside }} points</b> if that participant also chose Option B, or
          <b>{{ Constants.downside }} points</b> if that participant chose Option A.</p>
    {% else %}
        <p>You did not submit a choice in time, so this round earns <b>0 points</b>.</p>
    {% endif %}
        <p>Your earnings in points will be converted to GBP at the rate 20 points = 1 GBP.</p>

    <br><br>
        <center>
         <b><font color="red"><a href="https://app.prolific.co/submissions/complete?cc=77BCDC48">CLICK HERE</a> to confirm you completed the study and be paid!</font></b>
        </center>
  </div>
</div>

{% endblock %}