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

{% block title %}
   <b style="color:grey"> Final Results</b>
{% endblock %}

{% block app_styles %}
<style type="text/css">
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slidecontainer2 {
  width: 100%;
}

.slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider2:hover {
  opacity: 1;
}

.slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider2::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.center {
border: 5px solid #FFFF00;
text-align: center;
}

.display {
    border: 10px solid red;
}

.important {
        font-size: 14pt;
        font-weight: bold;
    }

th {
    border: 1px solid black;
    font-size: 12pt;
    width: 650px;
    text-align: right;
    font-weight:normal;
    }

td {
    font-size: 12pt;
    border: 1px solid black;
    text-align: center;
    }

table {
    table-layout: fixed;
    width: 800px;
    }

.history td {
    font-size: 10pt;
    }

.history th {
    font-size: 8pt;
    width: 100px;
    text-align: center;
    }

</style>
{% endblock %}

{% block content %}
{{ if player.round_number == num_rounds }}
    <h4>This concludes the experiment</h4>
{{ else }}
    <h4>This concludes the experiment for you, you were
        {{ if pressure == 1}} selected to leave due to your low fitness measure.
        {{ else }}    randomly selected to leave.
        {{endif}}</h4>


{{ endif }}

Thanks for participating, please make sure to complete the exit questionnaire in the next few pages:
<ul>
    <li> <b>Round {{paying_round|to0}}</b> has been randomly selected to be paid to you.</li>
    <p></p>

    <li> Your Round Payoff in that round was {{ total_earnings|to1 }}, which at rate of L${{us_exchange_rate}} per US$
        corresponds to  US${{total_earnings_US}}   </li>

    <p></p>
    <li>In addition, you will receive a US${{ show_up_fee|to0 }} participation payment.</li>
    <p></p>
    <br>
    <center>
    This brings your total payment to <span class="important">US${{total_earnings_US}}+US${{ show_up_fee|to0 }}=US${{ total_payoff_US }}</span>
    </center>
</ul>


<br>
<small>
    <span style="color:red">Note:</span> For your record your participation code is <b>{{participant.code}}</b>.
    Feel free to take a picture of this page.
</small>

<p></p>
<br>
<button class="otree-btn-next btn btn-primary">Next</button>
<br><br>


{% endblock %}