[%- USE JSON -%][%- USE HTML %][%- USE L %][%- USE LxERP %][%- USE P -%]

<h1>[%- HTML.escape(SELF.requirement_spec.displayable_name('format', 'with_customer')) %]
  [% LxERP.t8("for") %]
  [% HTML.escape(SELF.requirement_spec.customer.displayable_name) -%]
</h1>

[%- L.hidden_tag('requirement_spec_id', SELF.requirement_spec.id) -%]

<div id="requirement_spec_version">
  [%- INCLUDE 'requirement_spec/_version.html' requirement_spec=SELF.requirement_spec -%]
</div>

<div id="column-container">
 <div id="tree-column" style="border-right: 1px solid black">
  <div style="min-height: 32px; height: 32px;">
   <div style="float: left">
    [% L.button_tag("new_section_form()", LxERP.t8("New section"), id="new-section-button") %]
   </div>
   <div id="spinner" class="clearfix" style="float: right; display: none; background:url('js/themes/requirement-spec/throbber.gif') center center no-repeat !important; min-height: 32px; height: 32px; min-width: 32px; width: 32px;"></div>
  </div>

  <div id="tree"></div>
 </div>

 <div id="content-column" class="clearfix">
  [% L.hidden_tag('current_content_type', SELF.requirement_spec_item.id ? 'section' : '') %]
  [% L.hidden_tag('current_content_id',   SELF.requirement_spec_item.id) %]

  <div id="column-content">
   [%- IF SELF.requirement_spec_item && SELF.requirement_spec_item.id -%]
    [%- INCLUDE 'requirement_spec_item/_single_section.html' requirement_spec_item=SELF.requirement_spec_item -%]
   [%- ELSE -%]
    no section
    [%#- render :partial => 'requirement_spec_items/no_section' -%]
   [%- END -%]
  </div>
 </div>
</div>

<script type="text/javascript">
 <!--
     var tree_data = [
       { data:     [% JSON.json(LxERP.t8("Text blocks front")) %],
         metadata: { type: "textblocks-front" },
         attr:     { id: "tb-front", class: "text-block-context-menu" },
         children: [
[% FOREACH tb = SELF.requirement_spec.text_blocks_for_position(0) %]
 [% P.requirement_spec_text_block_jstree_data(tb).json %][% IF !loop.last %],[% END %]
[% END %]
         ]
       },

       { data:     [% JSON.json(LxERP.t8("Sections")) %],
         metadata: { type: "sections" },
         attr:     { id: "sections" },
         children: [

[% FOREACH section = SELF.requirement_spec.sections %]
 [% P.requirement_spec_item_jstree_data(section).json %][% IF !loop.last %],[% END %]
[% END %]
         ]
       },

       { data:     [% JSON.json(LxERP.t8("Text blocks back")) %],
         metadata: { type: "textblocks-back" },
         attr:     { id: "tb-back", class: "text-block-context-menu" },
         children: [
[% FOREACH tb = SELF.requirement_spec.text_blocks_for_position(1) %]
 [% P.requirement_spec_text_block_jstree_data(tb).json %][% IF !loop.last %],[% END %]
[% END %]
         ]
       }
     ];

     $(function() {
       $('#tree').jstree({
         core: {
           animation: 0,
           initially_open: [ "tb-front", "tb-back", "sections"
[%- FOREACH section = SELF.requirement_spec.sections -%]
 , "fb-[% section.id %]"
 [%- FOREACH function_block = section.children -%]
  , "fb-[% function_block.id -%]"
 [%- END -%]
[%- END -%]
 ]
         },
         json_data: {
           data: tree_data
         },
         crrm: {
           move: {
             check_move: requirement_spec_tree_check_move,
             open_move:  true
           }
         },
         themes: {
           theme: "requirement-spec"
         },
         plugins: [ "themes", "json_data", "ui", "crrm", "dnd" ]
       })
       .bind("move_node.jstree", requirement_spec_tree_node_moved)
       .bind("click.jstree",     requirement_spec_tree_node_clicked)
     });

function ask_delete_text_block(key, opt) {
  if (confirm("[% LxERP.t8("Are you sure?") %]"))
    delete_text_block(key, opt);
  return true;
}

$(function(){
    $.contextMenu({
        selector: '.text-block-context-menu',
        items: {
          add:    { name: "[% LxERP.t8('Add text block') %]", icon: "add", callback: add_text_block },
          edit:   { name: "[% LxERP.t8('Edit text block') %]", icon: "edit", callback: edit_text_block, disabled: disable_edit_text_block_commands },
          delete: { name: "[% LxERP.t8('Delete text block') %]", icon: "delete", callback: ask_delete_text_block, disabled: disable_edit_text_block_commands },
          sep1:   "---------",
          copy:   { name: "[% LxERP.t8('Copy') %]", icon: "copy", disabled: disable_edit_text_block_commands },
          paste:  { name: "[% LxERP.t8('Paste') %]", icon: "paste", disabled: disable_edit_text_block_commands }
        }
      });
});

  -->
</script>