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

{% block title %}
   Situación

{% endblock title %}


{% block styles %}
<style>
        .form-group {
            margin-bottom: 1rem !important;
            margin-top: 1rem !important;
        }

        .wrap {
            display: flex;
        }

        .inner {
            align-self: center;
        }

        p {
            margin-top: 1rem !important;
        }
    </style>
{% endblock %}

{% block content %}

<p> Suponga que usted está ayudando a la oficina de oportunidades laborales de la universidad. De los siguientes perfiles organice en orden de preferencia a los candidatos que usted considera que están mejor capacitados para una pasantía como analista en una firma consultora. <b>Se busca un perfil con conocimientos técnicos estadísticos y de programación</b>. Su decisión es un criterio muy importante para recomendar a estos candidatos.</p>
<p> Toda la información recogida es anónima. </p>

<table>
    <tr>
        <td> <b>Tarjeta A</b> <img height="45%" src="{% static carda1 %}"/> </td>
        <td> <b>Tarjeta B</b> <img height="45%" src="{% static carda2 %}"/> </td>
    </tr>
    <tr>
        <td> <b>Tarjeta C</b> <img height="45%" src="{% static carda3 %}"/> </td>
        <td> <b>Tarjeta D</b> <img height="45%" src="{% static carda4 %}"/> </td>
    </tr>
</table>

<br>
<p align="justify"> Con la información presentada, el orden que le daría a los perfiles es:</p>
<ol type="1">
    <li><div class="d-flex align-items-start wrap">
        <p class="inner" align="justify"> <b>Primer Puesto:</b>  </p>
        <div class="inner"
             {% formfield player.S1G1P1 label="" %}
    </div>
    </li>
    <li><div class="d-flex align-items-start wrap">
        <p class="inner" align="justify"> Segundo Puesto: </p>
        <div class="inner"
             {% formfield player.S1G1P2 label="" %}
    </div>
    </li>
    <li><div class="d-flex align-items-start wrap">
        <p class="inner" align="justify"> Tercer Puesto: </p>
        <div class="inner"
             {% formfield player.S1G1P3 label="" %}
    </div>
    </li>
    <li><div class="d-flex align-items-start wrap">
        <p class="inner" align="justify"> Cuarto Puesto: </p>
        <div class="inner"
             {% formfield player.S1G1P4 label="" %}
    </div>
    </li>
</ol>

<br>
<p align="center" {% next_button %} </p>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
{% endblock %}