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

{% block title %}
   Situación

{% endblock title %}

{% block content %}
    {% for field, error in form.errors.items %}
        <font color="white"> {% if field != '__all__' %}{{ field }}{% endif %} </font>
        <font color="red"> {{ error | striptags }}
    {% endfor %}

            <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 y habilidades para interactuar con clientes de alto perfil</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>
<style>
        table {border-collapse: collapse;}
        table {border: 0px solid black;}
        table, tr:nth-child(even){background-color: white}
</style>

<table>
    <tr align="center">
        <td><font size="10"> 1 </font> </td>
        <td rowspan="8">
            <ul id="sortable" style="list-style-type:none;">
                <li class="ui-state-default" id="item_9"><span>&#x21C5;</span>
                    <table align="center">
                        <tr> <td> <img height="45%" src="{% static carda9 %}"/> </td> </tr>
                    </table>
                </li>
                <li class="ui-state-default" id="item_10"><span>&#x21C5;</span>
                    <table align="center">
                        <tr> <td> <img height="45%" src="{% static carda10 %}"/> </td> </tr>
                    </table>
                </li>
                <li class="ui-state-default" id="item_11"><span>&#x21C5;</span>
                    <table align="center">
                        <tr>
                        <tr> <td><img height="45%" src="{% static carda11 %}"/> </td> </tr>
                    </table>
                </li>
                <li class="ui-state-default" id="item_12"><span>&#x21C5;</span>
                    <table align="center">
                        <tr>
                        <tr> <td> <img height="45%" src="{% static carda12 %}"/> </td> </tr>
                    </table>
                </li>
            </ul>
        </td>
    </tr>
    <tr align="center">
        <td><font size="10"> 2 </font> </td>
    </tr>
    <tr align="center">
        <td><font size="10"> 3 </font> </td>
    </tr>
    <tr align="center">
        <td><font size="10"> 4 </font> </td>
    </tr>
</table>


<input type="hidden" name="order3" value="654564" id="sortable" />

<br>
<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>

{% endblock content %}


{% block styles %}

    <style type="text/css">

li {
    margin: 1px;
    width: 600px;
    padding: 2px;
    vertical-align:middle;
}

li span {
    color: white;
    font-size: 0em;
    margin-right: 5px;
    margin-left: 5px;
    height: 100%;
}


    </style>



{% endblock styles %}

{% block scripts %}


    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        .ui-draggable .ui-dialog {
	        cursor: move;
        }
        .ui-icon {float: middle; margin: 0 4px;}
        .ui-controlgroup-vertical > .ui-controlgroup-item {
            display: block;
            float: none;
            width: 100%;
            margin-top: 0;
            margin-bottom: 0;
            text-align: middle;
        }

        .ui-widget-header {
            border: 1px solid #aaaaaa;
            background-color: white;
            color: white;
            font-weight: bold;
        }
        .ui-button.ui-state-active:hover {
            border: 1px solid #aaaaaa;
            background-color: white;
            font-weight: normal;
            color: white;
        }
        html .ui-button.ui-state-disabled:hover,
        html .ui-button.ui-state-disabled:active {
            border: 1px solid #d3d3d3;
            background-color: white;
            font-weight: normal;
            color: white;
        }
        .ui-button:focus {
            border: 1px solid #999999;
            background-color: white;
            font-weight: normal;
            color: white;
        }
        .ui-button.ui-state-active:hover {
            border: 1px solid #aaaaaa;
            background-color: white;
            font-weight: normal;
            color: white;
        }
        .ui-widget-header .ui-state-highlight {
            border: 1px solid #fcefa1;
            background-color: white;
            color: white;
        }
        .ui-widget-header .ui-state-error {
            border: 1px solid #cd0a0a;
            background-color: white;
            color: white;
        }

    </style>

    <script type="application/javascript">

    sort_ul = $('#sortable');

/*sort_ul.sortable({handle:'span'}); */


$(document).ready(function () {

    $('ul').sortable({
        axis: 'y',
        stop: function (event, ui) {
           var data = $(this).sortable('serialize', {key: "item"});
            $('order_string').text(data);
            document.getElementsByName("order3")[0].value = data;
            /* alert(data); */
        }
    });
});





    </script>

{% endblock scripts %}