{% 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 %}
    <h4>This concludes the experiment</h4>

Thanks for participating:
<ul>
    <li> Round {{paying_round}} has been randomly selected to be paid to you.</li>
    <p></p>
    {% if total_earnings < 0 %}
    <li>Your Round Payoff in that round was negative ({{total_earnings|cu|to0}}), so your <performance></performance> compensation will be zero.</li>
    {% else %}
    <li> Your Round Payoff in that round was {{ total_earnings|cu|to1 }}.</li>
    {% endif %}
    <p></p>
    <li>In addition, you will receive a ${{ show_up_fee|to0 }} participation payment.</li>
    <p></p>
    <br>
    <center>
    This brings your total payment to <span class="important">${{total_earnings_US}}+${{ show_up_fee|to0 }}=${{ 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>


{% endblock %}