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

{% block title %}
    Summary of Instructions
{% 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: 16pt;
    width: 650px;
    text-align: right;
    font-weight:normal;
    }

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

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

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

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

</style>
{% endblock %}
{% block content %}

<p><span class="important">You are an accountant</span>, responsible for assessing whether the bank you are assigned to is solvent and liquid.</p>
<p></p>
<span class="important"> In the 1st period: </span> <br>
<ul>
    <li>
        The bank you are responsible for will choose how much to allocate to assets and how much to keep in cash.
        You will know their initial allocation.
    </li>
    <p></p>
</ul>
     <span class="important"> In the 2nd period: </span> <br>
<ul>
    <li>
        You learn the number of impatient customers for your Region.
    </li>
    <p></p>
    <li>

            The banker will decide whether to buy or sell assets, and how much cash to bid or assets to offer, without knowing what the market price will be.
    </li>
         <p></p>

    <li>You will observe the market price of assets.

    </li>
       <p></p>
    <li>        Based on this price, you must make a prediction of how much the bank has bought or sold,
            as well as a declaration of whether you think the bank is liquid and/or solvent. Note that the computer will ensure that these declarations are consistent: e.g. if you predict trading that would
            result in the bank being not solvent, you must also declare the bank not solvent.
</li>

    <p></p>
    Your <b>payoff for predictions</b> is equal to:
        <p></p>

                    &nbsp; &nbsp;   &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; <b style="color:green">Payoff = {{ forecast_prize }}/(1 + {{ gamma }}*[prediction error]) </b>
        </p>
            Thus, you can earn up to {{ forecast_prize }} for a correct prediction.
    </li>

    <p></p>
    <li>
        Afterward, the computer will determine whether your
        declarations of liquidity and solvency are correct.
        <b style="color:green"> You will get {{ accountant_prize }} for
        each correct declaration, and $0.00 for each incorrect one</b>.
    </li>
</ul>

{% next_button %}

{% endblock %}