<div class="contextual">
  <%= form_tag({:action => "add_block"}, :remote => true, :id => "block-form", authenticity_token: true) do %>
    <%= label_tag('block-select', l(:button_add)) %>:
    <%= block_select_tag(@user) %>
  <% end %>
</div>

<h2><%=l(:label_my_page)%></h2>

<div id="my-page" class="splitcontent">
<% @groups.each do |group| %>
  <div id="list-<%= group %>" class="block-receiver splitcontent<%= group %>">
    <%= render_blocks(@blocks[group], @user) %>
  </div>
<% end %>
</div>

<%= context_menu %>

<%= javascript_tag do %>
$(document).ready(function(){
  $('#block-select').val('');
  $('.block-receiver').sortable({
    connectWith: '.block-receiver',
    tolerance: 'pointer',
    handle: '.sort-handle',
    start: function(event, ui){$(this).parent().addClass('dragging');},
    stop: function(event, ui){$(this).parent().removeClass('dragging');},
    update: function(event, ui){
      // trigger the call on the list that receives the block only
      if ($(this).find(ui.item).length > 0) {
        $.ajax({
          url: "<%= escape_javascript url_for(:action => "order_blocks") %>",
          type: 'post',
          data: {
            'group': $(this).attr('id').replace(/^list-/, ''),
            'blocks': $.map($(this).children(), function(el){return $(el).attr('id').replace(/^block-/, '');})
          }
        });
      }
    }
  });
});
<% end %>

<% html_title(l(:label_my_page)) -%>