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

{% block title %}
    Cap and Trade!
{% endblock %}

{% block content %}

<p>Your company needs enough emission permits to keep operating {% if player.round_number != Constants.num_rounds %} the next {{ group.l }} days! {%else%} tomorrow! {% endif%}</p>
<p>Emissions equals the square of your production level, which ranges between 1 and 12 units.</p>
<p>Previously, you had {{ player.permits }} permits. So, you could produce {{ player.production }} units.</p>


{% if player.role == 'Buyer' %}
	<p>However, you can purchase extra permits from another company and expand production!
	Notice your profit equals your production level MINUS the cost you incur for purchasing permits.</p>
	<p>The other company has asked ${{ group.p }} for the {{ group.q }} permits you wanted to buy.</p>
	{% if group.a == True %}
		<p>You have accepted the deal!</p>
		<p>Now, you have {{ player.permits }} permits and produce {{ player.production }}. Because you payed ${{ group.p }}, you profit is ${{ player.profit }}. </p>

	{% else %}
		<p>You have NOT accepted the deal!</p>
	{% endif %}
{% else %}
	<p>However, you can sell some permits to another company and make extra money!.
	Notice your profit equals your production level PLUS the revenuws from selling permits.</p> 
	<p>The other company wanted to buy {{ group.q }} permits and you asked ${{ group.p }} for them.</p> 
	{% if group.a == True %}
		<p>The other company has accepted the deal!</p>
		<p>Now, you have {{ player.permits }} permits and produce {{ player.production }} units. Because you made ${{ group.p }}, you profit is ${{ player.profit }}. </p>

	{% else %}
		<p>The other company has NOT accepted the deal!</p>
	{% endif %}  
{% endif %}



{% if player.round_number != Constants.num_rounds %}
<button class="otree-btn-next btn btn-primary"> Next day! </button>
{% else %}
The game has ended. Thanks por participating!
{% endif %}

<table>
<tr><td>Day</td>
	{% for p in group.in_all_rounds %}
	<td>{{ p.round_number }}</td>
	{% endfor%}
</tr>
<tr><td>Price</td>
	{% for p in group.in_all_rounds %}
	<td>{{ p.p }}</td>
	{% endfor%}
</tr>
<tr><td>Quantity</td>
	{% for p in group.in_all_rounds %}
	<td>{{ p.q }}</td>
	{% endfor%}
</tr>
<tr><td>P/Q </td>
	{% for p in group.in_all_rounds %}
	<td>{{ p.r }}</td>
	{% endfor%}
</tr>
<tr><td> Production </td>
	{% for p in player.in_all_rounds %}
	<td>{{ p.production }}</td>
	{% endfor%}
</tr>
<tr><td> Profit </td>
	{% for p in player.in_all_rounds %}
	<td>{{ p.profit }}</td>
	{% endfor%}
</tr>
</table>

<div class="clouds"></div>

	<style>

	table,tr,td{
	border:1px solid white; padding:10px;margin:auto; margin-top:50px;}

	/*************************************************************************************************************/

	@keyframes move-clouds-back {
	from {background-position:0 0;}
	to {background-position:10000px 0;}
	}
	@-webkit-keyframes move-clouds-back {
	from {background-position:0 0;}
	to {background-position:10000px 0;}
	}
	@-moz-keyframes move-clouds-back {
	from {background-position:0 0;}
	to {background-position:10000px 0;}
	}
	@-ms-keyframes move-clouds-back {
	from {background-position: 0;}
	to {background-position:10000px 0;}
	}

	.clouds {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	display:block;
	}

	.clouds{
	background:transparent url(http://www.script-tutorials.com/demos/360/images/clouds3.png) repeat top center;
	z-index:-1;

	-moz-animation:move-clouds-back 400s linear infinite;
	-ms-animation:move-clouds-back 400s linear infinite;
	-o-animation:move-clouds-back 400s linear infinite;
	-webkit-animation:move-clouds-back 400s linear infinite;
	animation:move-clouds-back 400s linear infinite;
	}

	/*************************************************************************************************************/

	.card.debug-info,card-header,card-body{visibility: collapse;}
	html{
	height:100%;
	}
	body{
	background-image: linear-gradient(to bottom, black , #004883);
	margin-bottom: 20px;
	}

	/*************************************************************************************************************/

	.form-control{margin:auto;}
	.container{
	width: 80%;
	max-width: 400px;
	animation: corner 120s ease-out infinite;
	text-align: center;
	background-color: none;
	border: 0px solid gray;
	color: white;
	border: 1px solid white;
	margin-top: 20px;
	margin-bottom: 20px;
	}
	.otree-body {
	width: 80%;
	max-width: 400px;
	height: 100%;
	max-height:75%;
	border-radius:	25px 0 25px 0;
	font-family: tahoma;
	}

	/*************************************************************************************************************/

	.otree-btn-next{
	animation: float 3s ease-out infinite;
	font-family: tahoma;
	background-color: 	#E32934;
	animation-delay: 60s;
	border: none;
	}
	@keyframes float {
	50% {transform: translate(0,10px);}
	}
	@keyframes corner {
	50% {border: 1px solid #E32934;}
	}

	.otree-btn-next.btn.btn-primary{
	transition-property: color, background-color, border-color, box-shadow;
	transition-duration: .15s, .15s, .15s, .15s;
	transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	transition-delay: 0s, 0s, 0s, 0s;
	}

	.otree-btn-next.btn.btn-primary:hover{
	background-color: 	#c01923;
	border-color: #c01923;
	box-shadow: none;}
	.otree-btn-next.btn.btn-primary:focus{
	background-color: 	#E32934;
	border-color: #c01923;
	box-shadow: none;}
	.otree-btn-next.btn.btn-primary:active{
	background-color: 	#c01923;
	border-color: #c01923;
	box-shadow: none;}

	/*************************************************************************************************************/

	</style>

{% endblock %}