{% extends 'otree/WaitPage.html' %}
{% load otree %}


{% block title %}
    <div style="font-size:2rem; margin-top:20px; margin_bottom:10px; font-weight: normal">Cap and Trade!</div>
{% endblock %}
{% block content %}

<div style="width:100%;">

<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 equal the square of your production level, which ranges between 1 and 12 units.</p>
<p>Currently, you have {{ player.permits }} out of {{ Constants.cap }} permits. So, you can produce {{ player.production }} units.</p>
</div>

{% 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>
{% 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>You asked ${{ group.p }} for {{ group.q }} permits. Please, wait the reply of the other company.</p>
{% endif %}


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

<style>

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

	@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;
	}
	
	/*************************************************************************************************************/


	.progress-bar{
	background-color: #E32934;}

	.progress{width:50%; margin: auto; animation: float 3s ease-out infinite;}
	@keyframes float {
	25% {transform: translate(20px,0)}
	75% {transform: translate(-20px,0)}
	}

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

	.card.debug-info{visibility: collapse;}
	html{
	height:100%;
	}
	body{
	background-image: linear-gradient(to bottom, black , #004883);
	margin-bottom: 20px;
	}
	.card,card-body{
	width: 80%;
	max-width: 400px;
	position: initial;
	z-index:-1;
	background-color: #ffffff00;
	border-radius:	25px 0 25px 0;
	border: 1px solid #ffffff00;
	box-shadow:none;
	}
	.card-body{
	padding-left: 0;
	padding-right: 0;
	padding-top:0;
	}
	.otree-wait-page.container{
	animation: corner 120s ease-out infinite;
	position: initial;
	z-index:-1;
	background-color: #ffffff00;
	border-radius:	25px 0 25px 0;
	border: 1px solid white;
	box-shadow:none;
	width: 80%;
	max-width: 400px;
	}
	
	/*************************************************************************************************************/
	
	.container{
	animation: corner 120s ease-out infinite;
	text-align: center;
	background-color: #ffffff00;
	color: white;
	border: 1px solid white;
	margin-top: 20px;
	margin-bottom: 20px;
	width: 80%;
	max-width: 400px;
	}
	.otree-body {
	width: 80%;
	max-width: 400px;
	height: 100%;
	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 %}