{% 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 {{if participant.app_order == 1}}3 {{ else }} 2{{endif }} - Tarea 1</center></h2>
<br>

<div class="div_table">

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

	{% for v in vars_table %}
	<tr>
		<td class="cell_text_option">{{ v.vals.0 }}</td>
		<td class="cell_text_option">{{ v.vals.1 }}</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>
		<td class="cell_text_option">{{ v.vals.3 }}</td>
	</tr>
	{% endfor %}
	
</table>

</div>

    {% next_button %}

{% endblock %}