[%- USE HTML -%][%- USE LxERP -%][%- USE L -%]
<div class="section-context-menu" id="section-header">
 [%- INCLUDE 'requirement_spec_item/_section_header.html' %]
</div>

[%- L.hidden_tag('active_section_id', requirement_spec_item.id) -%]

<ul id="section" class="section function-block-context-menu">
  [%- FOREACH subitem = requirement_spec_item.children -%]
    [%- INCLUDE 'requirement_spec_item/_single_subitem.html' requirement_spec_item=subitem -%]
  [%- END -%]
</ul>

<div id="new_subitem_form" class="subitem-form clearfix">
</div>
<div id="new_subitem_link" class="highlight-box" style="[%- 'display:none' IF requirement_spec_item.children.size -%]">
  [%#- link_to_remote LxERP.t8("FIXME no_function_blocks_have_been_created_for_this_section_yet) + " " + t(:create_a_function_block_now"),
                      :url    => new_requirement_spec_requirement_spec_item_url(requirement_spec_item.requirement_spec,
                      :requirement_spec_item_id => requirement_spec_item.id),
                      :method => :get,
                      :update => "new_subitem_form",
                      :loading => "$('new_subitem_link').hide();" -%]
</div>

<script type="text/javascript">
 <!--
$(function(){
    $.contextMenu({
        selector: '.section-context-menu',
        callback: function(key, options) {
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m);
        },
        items: {
          edit:   { name: "[% LxERP.t8('Edit section') %]", icon: "edit", callback: edit_section_header },
          delete: { name: "[% LxERP.t8('Delete section') %]", icon: "delete" },
          sep1:   "---------",
          copy:   { name: "[% LxERP.t8('Copy') %]", icon: "copy" },
          paste:  { name: "[% LxERP.t8('Paste') %]", icon: "paste" }
        }
      });

    $.contextMenu({
        selector: '.function-block-context-menu',
        callback: function(key, options) {
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m);
        },
        items: {
          new_item:     { name: "[% LxERP.t8('New function block') %]",     icon: "add"},
          new_sub_item: { name: "[% LxERP.t8('New sub function block') %]", icon: "add"},
          sep1:   "---------",
          edit:   { name: "[% LxERP.t8('Edit') %]",   icon: "edit"},
          delete: { name: "[% LxERP.t8('Delete') %]", icon: "delete"},
          sep2:   "---------",
          copy:   { name: "[% LxERP.t8('Copy') %]", icon: "copy" },
          paste:  { name: "[% LxERP.t8('Paste') %]", icon: "paste" }
        }
    });

    $('.section-context-menu').on('click', function(e){
        console.log('clicked', this);
    });
});

function edit_section_header() {
  $.post("controller.pl?action=RequirementSpecItem/edit_section&id=" + encodeURIComponent($('#active_section_id').val()), function(data) {
    var header = $('#section-header');
    header.data('old-elements', header.children().detach());
    header.html(data);
  });
}

function submit_section_form() {
  $.post("controller.pl?action=RequirementSpecItem/update_section&id=" + $('#section-form form').serialize(), function(data) {
    var header = $('#section-header');
    header.removeData('old-elements');
    header.html(data['header_html']);
    $('#tree').jstree('rename_node', '#fb-' + data['id'], data['node_name']);
  });
}

function cancel_section_form() {
  var header = $('#section-header');
  header.empty();
  header.append(header.data('old-elements'));
  header.removeData('old-elements');
}
-->
</script>