{% extends "global/Page.html" %}
{% load otree static %}
{% 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 or participant.app_order == 3}}2 {{ else }} 3{{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="5" class="cell_header_table"><b>Opción B</b></td>
	</tr>
	<tr>
		<td colspan="2" class="cell_subheader_table"><b>10/10</b></td>
		<td class="cell_subheader_table" colspan="2" rowspan="2"><b>Selección</b></td>
		<td colspan="2" class="cell_subheader_table"><b>7/10</b></td>
		<td colspan="2" class="cell_subheader_table"><b>3/10</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"><b>Pago P1</b></td>
		<td class="cell_subheader_table"><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>
	</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>
		<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 %}