{% 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>Round randomly selected for payment: {{ paid_round }}</p>
        <p>The decision in Round {{ paid_round }} was:</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 opponent chooses A</div>
          <div><b>{{Constants.upside}}</b> if opponent 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 opponent chooses A</div>
            <div><b>{{Constants.upside}}</b> if opponent 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 number_on_left %}
        {% if decision == "Left" %}
        <p>Your choice in Round {{ paid_round }}: Option A.</p>
        <p>You earned {{ number }} points.</p>
        {% elif decision == "Right" and number < 55 %}
        <p>Your choice in Round {{ paid_round }}: Option B.</p>
        <p>Your opponent's choice in Round {{ paid_round }}: Option B.</p>
        <p>You earned {{ Constants.upside }} points.</p>
        {% else %}
        <p>Your choice in Round {{ paid_round }}: Option B.</p>
        <p>Your opponent's choice in Round {{ paid_round }}: Option A.</p>
        <p>You earned {{ Constants.downside }} points.</p>
        {% endif %}
        <p>Your earnings in points will be converted to GBP at the rate 20 points = 1 GBP.</p>
    {% else %}
        {% if decision == "Right" %}
        <p>Your choice in Round {{ paid_round }}: Option A.</p>
        <p>You earned {{ number  }} points.</p>
        {% elif decision == "Left" and number < 55 %}
        <p>Your choice in Round {{ paid_round }}: Option B.</p>
        <p>Your opponent's choice in Round {{ paid_round }}: Option B.</p>
        <p>You earned {{ Constants.upside }} points.</p>
        {% else %}
        <p>Your choice in Round {{ paid_round }}: Option B.</p>
        <p>Your opponent's choice in Round {{ paid_round }}: Option A.</p>
        <p>You earned {{ Constants.downside }} points.</p>
        {% endif %}
        <p>Your earnings in points will be converted to GBP at the rate 20 points = 1 GBP.</p>
    {% endif %}

    <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 %}