$(document).on('turbolinks:load', function() {
  var table = document.querySelector('.table-draggable');

  if (table == null) return;

  var were = $('.order.was').map(function() { return $(this).data('order') });

  tableDragger(table, {
    mode: 'row',
    onlyBody: true,
    dragHandler: '.handle'
  }).on('drop', function(from, to, el, mode) {
    // Al soltar, reordenamos toda la tabla
    $('.post_order').val(function(i,v) { return were[i]; });
    // Mostramos el nuevo orden también
    $('.order.is').text(function(i,v) { return were[i]; });
    // Solo mostramos el valor anterior si no coincide con el valor
    // actual.  Como lo mostramos entre comillas, usamos el atributo
    // data-order del <span>
    $('.order.was').each(function() {
      var el = $(this);
      var is = el.parent().find('.order.is');

      if (is.text() == el.data('order')) {
        el.addClass('d-none');
      } else {
        el.removeClass('d-none');
      }
    });

    // Muestra el panel
    $('.reorder-posts-panel').addClass('d-block').removeClass('d-none');
  });

  // Ocultar el panel de ayuda con botón
  $('.reorder-posts-panel .close').click(function(e) {
    e.preventDefault();
    $('.reorder-posts-panel')
      .removeClass('d-block')
      .addClass('d-none');
  });
});