{% extends "propesqBundle::layout.html.twig" %}

{% block stylesheets %}
    <!-- TODO: verificar caminho do arquivo -->
    <link rel="stylesheet" href="{{ asset('bundles/propesq/css/edit.css') }}" type="text/css" media="all"/>

    <style>
        .drag-sort-content {
            height: auto;
            width: auto;
            position: static;
            overflow-x: hidden;
        }
        .drag-sort-content li{
            /*width: 100%;*/
        }
        .well{
          /*  background: none;
            border: 0; */
        }
    </style>
{% endblock %}

{% block content %}
    <div id="form-container">
        <div class="title">
            <h2>
                {{ 'cabecalho.ordenar.camada'|trans }}
            </h2>
        </div>

        {{ form_errors(form) }}


        <form id="formulario-camada" class="{% if  not includeLayout %}ajax {% endif %} form-horizontal"
              action="{{ path('camada_sort_update') }}"
              method="post" {{ form_enctype(form) }}>
            <fieldset style="float: left; margin: 10px;">
                {{ form_widget(form._token) }}
                {% if not includeLayout %}
                    <input type='hidden' name='noLayout' value='true'>
                {% endif %}
                <div class="control-group" style=" ">
                    {{ form_widget(form.indOrdem) }}
                    <div class="drag-sort-content controls well" >
                    <ul id="sortable">
                        {% for entity in entities %}
                            <li class="ui-state-default" id="{{ entity.id }}">{{ entity.txtNome }}</li>
                        {% endfor %}
                    </ul>
                        </div>
                </div>
            </fieldset>
            <div class="div-actions">
                <button type="submit" class="btn btn-primary">{{ 'acao.salvar'|trans }}</button>
                <a class=""{% if not includeLayout %} onclick="$(this).parents('.modal').find('.close').click(); return false;" {% endif %}
                   href="{{ path('camada') }}" title="{{ 'acao.cancelar'|trans }}">{{ 'acao.cancelar'|trans }}</a>
            </div>
        </form>
    </div>
    <script>
        $(document).ready(function () {
            $("#sortable").sortable({
                placeholder: "ui-state-highlight",
                cursor: 'move',
                update: function (event, ui) {

                    var ordem = $("#sortable").sortable('toArray').toString();

                    $('#{{ form.indOrdem.get('id') }}').val(ordem);
                }
            });

            var ordem = $("#sortable").sortable('toArray').toString();
            $('#{{ form.indOrdem.get('id') }}').val(ordem);


            $("#sortable").disableSelection();


        });
    </script>
{% endblock %}