#comable-category
  ol.breadcrumb
    li
      = link_to Comable.t('admin.nav.dashboard'), comable.admin_root_path
    li.active
      = Comable.t('admin.nav.category')

  h1.page-header
    = Comable.t('admin.nav.category')

  javascript:
    comable_jstree_json = #{raw @categories.to_jstree(state: { opened: true }, icon: 'fa fa-bars')};
    comable_new_node_label = '#{Comable.t('admin.categories.new_node')}';
    comable_action_new = '#{Comable.t('admin.actions.new')}';
    comable_action_edit = '#{Comable.t('admin.actions.edit')}';
    comable_action_destroy = '#{Comable.t('admin.actions.destroy')}';
    comable_destroied_nodes = [];

  coffee:
    jQuery(->
      $comable_jstree = $('#comable-jstree')
      $comable_jstree.jstree({
        core: {
          check_callback: true,
          data: comable_jstree_json,
          strings : { new_node: comable_new_node_label, icon: 'fa fa-bars' }
        },
        contextmenu: {
          items: ($node) ->
            _this = $comable_jstree.jstree(true)
            {
              create: {
                label: comable_action_new,
                action: -> create_new_node($node)
              }
              edit: {
                label: comable_action_edit,
                action: -> _this.edit($node)
              }
              destory: {
                label: comable_action_destroy,
                action: ->
                  comable_destroied_nodes.push { _destroy: $node.id }
                  _this.delete_node($node)
              }
            }
        },
        plugins: ['dnd', 'wholerow', 'contextmenu']
      })

      window.create_new_node = ($node = '#') ->
        jstree = $comable_jstree.jstree(true)
        new_node = jstree.create_node($node)
        jstree.open_node($node) unless jstree.is_open($node)
        jstree.rename_node(new_node, comable_new_node_label)
        jstree.set_icon(new_node, 'fa fa-bars')

      $('form').submit(->
        json = $comable_jstree.jstree(true).get_json().concat(comable_destroied_nodes)
        json_string = JSON.stringify(json)
        $(this).find('#jstree_json').val(json_string)
      )
    )

  .row
    section.col-sm-8
      .panel.panel-inverse
        .panel-heading
          .panel-title
            = Comable.t('admin.actions.edit')
        - if @categories.empty?
          .panel-body
            = Comable.t('admin.not_found')
        - else
          .panel-body
            .well.well-sm
              p
                strong
                  = Comable.t('admin.note')
              ul
                li
                  = Comable.t('admin.you_can_drag_and_drop')
                li
                  = Comable.t('admin.you_can_right_click')
                li
                  = Comable.t('admin.link_to_add_new_node')
                  = link_to Comable.t('admin.actions.new'), '#', onclick: 'create_new_node()'
            #comable-jstree
          .panel-footer
            = form_tag comable.admin_categories_path do
              = hidden_field_tag :jstree_json
              = submit_tag Comable.t('admin.actions.update')

    nav.col-sm-4