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

{% block title %}
    Round {{ subsession.round_number }} of {{ Constants.num_rounds }}: Information Choice
{% endblock %}

{% block content %}
	<div class="instructions well well-lg">
		<h5>Your position: <span style="color:red">4</span> in the sequence of <span style="color:red">4</span> people</h5>
		<h6>A group urn for this round was randomly selected at the beginning of the round</h6>
	</div>

	<strong>Which piece of information do you want to see before guessing the actual group urn?</strong><p>

	{% formfield player.information_channel_4 label = "" %}

	<strong><input class="btn btn-primary btn-large btn-primary next-button" type="submit" value="Next"/>
    	<script>var showButton = document.getElementsByClassName("btn btn-primary btn-large btn-primary next-button")[0];
    		var counter = 10;
    		var newElement = document.createElement("p");
    		newElement.innerHTML = "You can proceed to the Urn guess page in " + counter + " seconds.";
    		var interval;
			showButton.parentNode.replaceChild(newElement, showButton);
			interval = setInterval(function() {
        		counter--;
        		if(counter < 0) {
            		newElement.parentNode.replaceChild(showButton, newElement);
            		clearInterval(interval);
        		} else {
            		newElement.innerHTML = "You can proceed to the Urn guess page in " + counter.toString() + " seconds.";
        		}
    		}, 1000);
		</script></strong><p>

	{% include Constants.instructions_template %}
	{% endblock %}