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


{% block title %}
	Which of the following facts have you read about?
{% endblock %}

{% block content %}
	{% tracking_time %}  
    {% tracking_focus %} 
<br>
<div align="left"> Below are the facts you just selected. Please click on the facts that you read about several times, if any. You will earn ${{ recall_bonus }} per repetition correctly remembered and lose ${{ recall_penalty }} per fact that you selected but was not repeated or was not reported about. But you cannot lose earning from other sections here: at worst, you will earn $0.0 from this task. Again, remember that the computer knows which fact you have read about and how many times, and will compute your payments based on this. </div>
<br>
<br>
<div class="table-responsive">
	<table class="table">

	    {% for field in form %}
	    <tr id="id_row_{{ field.name }}" style="display: none; width: 75%; margin-left: auto; margin-right: auto;">
	        <td style="">
	        	<input type="hidden" value="F" name="{{ field.name }}" id="id_{{ field.name }}" />
	        	<button type="button" name="button_{{ field.name }}" class="mybutton">
	        		{{ field.label }}
	        	</button>
	        </td>
		</tr>
		{% endfor %}

	</table>
</div>
<br>
<div align="center"> <button class="btn btn-primary btn-large"  onclick="return confirm('Are you sure you want to submit these facts?');">Next</button> </div>

{% endblock %}

{% block styles %}
	<style type="text/css">

	.mybutton {
	  background: #3498db;
	  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
	  background-image: -o-linear-gradient(top, #3498db, #2980b9);
	  background-image: linear-gradient(to bottom, #3498db, #2980b9);
	  -webkit-border-radius: 8;
	  -moz-border-radius: 8;
	  border-radius: 8px;
	  font-family: Arial;
	  color: #ffffff;
	  display: inline-block;
	  height: auto;
	  width: 100%;
	  padding: 10px 20px 10px 20px;
	  text-decoration: none;
	}

	.mybutton:hover {
	  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
	  text-decoration: none;
	}

	.selected {
	  background: #48545c;
	  background-image: -webkit-linear-gradient(top, #48545c, #044269);
	  background-image: -moz-linear-gradient(top, #48545c, #044269);
	  background-image: -ms-linear-gradient(top, #48545c, #044269);
	  background-image: -o-linear-gradient(top, #48545c, #044269);
	  background-image: linear-gradient(to bottom, #48545c, #044269);
	  -webkit-border-radius: 8;
	  -moz-border-radius: 8;
	  border-radius: 8px;
	  font-family: Arial;
	  color: #ffffff;
	  padding: 10px 20px 10px 20px;
	  text-decoration: none;
	}




</style>
{% endblock %}

{% block scripts %}
	<script type="text/javascript">

	$(function(){
	    $('.mybutton').click(function() {
	    	var hidden_input_name = $(this).attr("name").substring(7);
	    	var hidden_input_id = "#id_" + hidden_input_name;
	    	console.log(hidden_input_name)
	    	if ($(hidden_input_id).val() == "T")
	    	{
	    		$(this).removeClass('selected');
	       		$(hidden_input_id).val("F");
	       		console.log($(hidden_input_id).val());
	    	}
	    	else
	    	{
	    		$(this).addClass('selected');
	       		$(hidden_input_id).val("T");
	       		console.log($(hidden_input_id).val());
	    	}
	    });
	});


    $(function() {
    	console.log("here")
    	{% for sel_fact in selected_recall_facts %}
    		console.log({{ sel_fact }})
    		$('#id_row_multiple_recall_fact' + {{ sel_fact }}).css({"display":"block"});
    	{% endfor %}

    });
	</script>


{% endblock %}


{% block stlyes %}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
{% endblock %}