{% 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 align="justify">
<img src="{% static "alto_perfil2.png" %}" width="230" height="230" align="right">  Suponga que usted está ayudando a la oficina de oportunidades laborales de la universidad a elegir candidatos para una pasantía o práctica laboral. 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 y habilidades para interactuar con clientes de alto perfil</b>. Su decisión es un criterio muy importante para recomendar a estos candidatos.</p>


<table>
    <tr>
        <td> <p align="center"> <b>Categorías</b></p> <img width="115%" src="{% static "columna.png" %}"/></td>
        <td> <p align="center"> <b>Hoja de vida A</b> </p> <img width="115%" src="{% static carda33 %}"/> </td>
        <td> <p align="center"> <b>Hoja de vida B</b> </p> <img width="115%" src="{% static carda34 %}"/> </td>
        <td> <p align="center"> <b>Hoja de vida C</b> </p> <img width="115%" src="{% static carda35 %}"/> </td>
        <td> <p align="center"> <b>Hoja de vida D</b> </p> <img width="115%" src="{% static carda36 %}"/> </td>
    </tr>
</table>

<br>
<p align="justify"> Con la información presentada, defina el orden que le daría a los perfiles:</p>
<p align="justify"> Para ello decida el puesto que le otorga a cada tarjeta. (1er puesto = "Mejor candidato" ; 4to puesto = "Peor candidato")
<ol type="A">
    <li><div class="d-flex align-items-center wrap">
        <p class="inner" align="justify"> <b> Hoja de vida A </b>:  </p>
        <div class="inner"
             {% formfield player.S2G3TA label="" %}
    </div>
    </li>
    <li><div class="d-flex align-items-start wrap">
        <p class="inner" align="center"> <b> Hoja de vida B </b>: </p>
        <div class="inner"
             {% formfield player.S2G3TB label="" %}
    </div>
    </li>
    <li><div class="d-flex align-items-start wrap">
        <p class="inner" align="center"> <b> Hoja de vida C </b>: </p>
        <div class="inner"
             {% formfield player.S2G3TC label="" %}
    </div>
    </li>
    <li><div class="d-flex align-items-start wrap">
        <p class="inner" align="center"> <b> Hoja de vida D </b>: </p>
        <div class="inner"
             {% formfield player.S2G3TD 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 %}