{% block scripts %}

    <!-- custom style sheet-->
    <link href="{% static 'global/styles.css' %}" rel="stylesheet">
    <script src="{% static 'global/js/functions.js' %}"></script>
    
{% endblock %}

{% block content %}
<h2><center>Sección 4 - Tarea 1</center></h2>
<br>
<p>
Ahora tome sus decisiones en la tabla de abajo. En cada una de las 12 filas, se le pedirá que elija entre una opción A y una opción B. 
La opción A es su apuesta y no varía entre filas. La opción B es una suma de dinero y aumenta en cada fila. Si elige la apuesta, 
entonces jugará la apuesta y la cantidad de dinero que obtendrá dependerá del color de la bola sorteada por el computador.   
</p>
<p>
	Si esta tarea es seleccionada para pago, el computador seleccionará una fila al azar y se le pagará su decisión en esa fila.
	Asegúrese de responder cuidadosamente a cualquier pregunta para que le paguen lo que realmente prefiere.
</p>
<p>
	Recuerde que su apuesta es: 50% de probabilidad de ganar 6 UME y 50% de probabilidad de no ganar nada.
</p>

<div class="div_table">

<table style="margin: 0 auto; margin-bottom: 20px;">
	<tr>
		<td>Tu elección de color: </td>
		{% if color == True %}
		<td style="background-color: #ff0000; color: #ffffff; border-radius: 10px;">Rojo</td>
		{% else %}
		<td style="background-color: #000000; color: #ffffff; border-radius: 10px;">Negro</td>
		{% endif %}
	</tr>
</table>

<table class="table_selection">
	<tr>
		<td colspan="2" class="cell_header_table"><b>Opción A</b></td>
		<td class="cell_subheader_table" colspan="2"><b>Selección</b></td>
		<td colspan="1" class="cell_header_table"><b>Opción B</b></td>
	</tr>

	{% for v in vars_table %}
	<tr>
		<td colspan="2" class="cell_text_option">Su apuesta</td>
		<td class="cell_input_option_a"><input type="radio" name="{{ v.name }}" id="{{ v.name }}_a" class="radio_input" value="1"></td>
		<td class="cell_input_option_b"><input type="radio" name="{{ v.name }}" id="{{ v.name }}_b" class="radio_input" value="2"></td>
		<td class="cell_text_option">{{ v.vals.2 }}</td>
	</tr>
	{% endfor %}

</table>

</div>
<br>
    {% next_button %}

{% endblock %}