{% 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 3</center></h2>
<br>
<div class="div_table">

<table class="table_selection">
	<tr>
		<td colspan="2" class="cell_header_table cell_no_important"><b>A</b></td>
		<td colspan="3" class="cell_header_table"><b>B</b></td>
		<td colspan="3" class="cell_header_table"><b>B2</b></td>
	</tr>
	<tr>
		<td class="cell_subheader_table cell_no_important"><b>Pago P1</b></td>
		<td class="cell_subheader_table cell_no_important"><b>Pago P2</b></td>
		<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 cell_no_important">{{ v.vals.0 }}</td>
		<td class="cell_text_option cell_no_important">{{ v.vals.1 }}</td>
		<td class="cell_text_option">{{ v.vals.2 }}</td>
		<td class="cell_text_option">{{ v.vals.3 }}</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.4 }}</td>
		<td class="cell_text_option">{{ v.vals.5 }}</td>
	</tr>
	{% endfor %}

</table>

</div>
<br>

    {% next_button %}

{% endblock %}