{% extends 'base.html.twig' %}

{% block body %}
    
<style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
      
var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index) {
        $(this).width($originals.eq(index).width())
    });
    return $helper;
},
    updateIndex = function(e, ui) {
        $('td.index', ui.item.parent()).each(function (i) {
            $(this).html(i + 1);
        });
    };

$("#sort tbody").sortable({
    helper: fixHelperModified,
    stop: updateIndex
}).disableSelection();


    //$( ".sortable" ).sortable();
   // $( ".sortable" ).disableSelection();
  } );
  </script>
<a class="btn btn-info" href="{{path('safty_new')}}">Add Check Ponits</a>
<br/><br/>
<table class="table table-bordered" id="sort">
        <thead>
            <tr>
                <th>Id</th>
                <th>Safty Check Name</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody >
        {% for safty in safty %}
            <tr>
                <td><a href="{{ path('safty_show', { 'id': safty.id }) }}">{{ safty.id }}</a></td>
                <td>{{ safty.name }}</td>
                <td><a href="{{ path('safty_edit', { 'id': safty.id }) }}">edit</a>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>


{% endblock %}