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

{% block title %}
    Round {{ round_number }}, Period 2
{% 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 %}

Your bank is in <span class="important">{{ region }}</span> and it has been randomly determined that it is <span class="important">State {{group.state}}.</span>
</p>
<p>
<table>
<tr>
    <tr>
        <th>State</th><th>Region I</th><th>Region II</th>
    </tr>
    <tr>
        <th>1</th><td>67 impatient, 33 patient</td><td>33 impatient, 67 patient</td>
    </tr>
    <tr>
        <th>2</th><td>33 impatient, 67 patient</td><td>67 impatient, 33 patient</td>
    </tr>
</table>
<p></p>

As you are in <span class="important"> {{ region }}</span> and it is <span class="important"> State {{group.state}} </span>, you have <span class="important">{{ player.impatient }} impatient customers</span>.


<p></p>
Recall that based on your initial allocation,  you have <b>{{ player.asset}} units in assets and {{ player.cash }} units in cash.</b><br>

    <br>
    <br>

{% next_button %}

{% endblock %}

{% block styles %}
<style>
table, th, td {
    text-align: center;
    border: 1px solid black;
}
</style>
{% endblock %}