{% 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 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>


{% 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>    
{% endif %}

The other company wants to buy {{ group.q }} permits from you.
<div style="margin:auto;">
{% formfield group.p label="How much do you want to sell them for?" %}
</div>
{% next_button %}

<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;
	}

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

	.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 %}