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

{% block title %}
    Round {{ round_number }}, Period 1
{% endblock %}

{% block content %}
<style>
.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;
}

.important {
        font-size: 14pt;
        font-weight: bold;
    }
</style>
Your bank is in <span class="important"> {{ region }}</span> and has received {{ deposit }} units of deposits from customers.<br>
<br>
<p>
Use the slider or insert numbers below to choose and submit  your investment in assets with a 100% return if held until period 3. The rest will be your cash in hand with no returns.
<br>    <br> If you do not make a choice, the default value of {{ default_asset }} units will be used.
    This default will be updated each period to match your choice in the previous period.
</p>

<div class="slidecontainer">
  <input type="range" min="0" max="{{ deposit }}"  value="{{ default_asset }}" class="slider" id="sliderAsset" name="asset">
    <p>Investment in assets (A) = <input type="number" style="width: 4em" id="inputBoxAsset" min="0" max="{{ deposit }}"  value="{{ default_asset }}" onkeypress="return event.keyCode != 13;"> units.
    </p>
</div>

<p>
    Cash in hand (C): <strong> <span id="cash">{{ default_cash }}</span> units.</strong><br>
    <br>
If you keep the above investment in assets till period 3, then your returns in period 3 will be: <strong> <span id="returnA"></span> units.</strong><br>

</p>

    <button class="btn btn-primary btn-large">
    Submit
</button>


<script>

var slider = document.getElementById("sliderAsset");
var output = document.getElementById("inputBoxAsset");
var returnA = document.getElementById("returnA");
var cash = document.getElementById("cash");

function X(a) {
return 100-a;
}

function Y(a) {
return 2*a;
}


slider.oninput = function() {
 output.value = this.value;
returnA.innerHTML = Y(slider.value).toFixed(0);
cash.innerHTML = X(slider.value).toFixed(0);
}

output.oninput = function() {
 slider.value = this.value;
returnA.innerHTML = Y(slider.value).toFixed(0);
cash.innerHTML = X(slider.value).toFixed(0);
}

</script>


























{% endblock %}