{{ enablePlugins('jstree,prettify') }}
{% set title = "Tree View" %}

{% extends "layouts/application.html" %}


{% block content %}
  {% include "shared/page-title.html" %}

  <div class="card-panel">
    <a href="https://www.jstree.com/">https://www.jstree.com/</a> - is jquery plugin, that provides interactive trees.
  </div>

  <div class="card-panel">
    <h4>Basic</h4>
    <div class="row">
      <div class="col m6 s12">
        <div class="js-tree-1">
          <ul>
            <li>Root node 1
              <ul>
                <li data-jstree='{ "selected" : true }'><a href="#"><em>initially</em> <strong>selected</strong></a></li>
                <li data-jstree='{ "icon" : "//jstree.com/tree-icon.png" }'>custom icon URL</li>
                <li data-jstree='{ "opened" : true }'>initially open
                  <ul>
                    <li>Another node</li>
                  </ul>
                </li>
                <li data-jstree='{ "icon" : "fa fa-comments-o" }'>Custom icon class (FontAwesome)</li>
              </ul>
            </li>
            <li><a href="//www.jstree.com">Root node 2</a></li>
          </ul>
        </div>

      </div>
      <div class="col m6 s12">
        <pre class="prettyprint linenums">
&lt;div class="js-tree-1">
  &lt;ul>
    &lt;li>Root node 1
      &lt;ul>
        &lt;li data-jstree='{ "selected" : true }'>&lt;a href="#">&lt;em>initially&lt;/em> &lt;strong>selected&lt;/strong>&lt;/a>&lt;/li>
        &lt;li data-jstree='{ "icon" : "//jstree.com/tree-icon.png" }'>custom icon URL&lt;/li>
        &lt;li data-jstree='{ "opened" : true }'>initially open
          &lt;ul>
            &lt;li>Another node&lt;/li>
          &lt;/ul>
        &lt;/li>
        &lt;li data-jstree='{ "icon" : "fa fa-comments-o" }'>Custom icon class (FontAwesome)&lt;/li>
      &lt;/ul>
    &lt;/li>
    &lt;li>&lt;a href="//www.jstree.com">Root node 2&lt;/a>&lt;/li>
  &lt;/ul>
&lt;/div>

&lt;script>
  $('.js-tree-1').jstree();
&lt;/script></pre>
      </div>
    </div>
  </div>

  <div class="card-panel">
    <h4>With checkboxes</h4>
    <div class="row">
      <div class="col m6 s12">
        <div class="js-tree-2"></div>
      </div>
      <div class="col m6 s12">
        <pre class="prettyprint linenums">
&lt;div class="js-tree-2">&lt;/div>

&lt;script>
  $('.js-tree-2').jstree({
    'plugins':['wholerow', 'checkbox'],
    'core' : {
      'data' : [
        {
          'text' : 'Same but with checkboxes',
          'children' : [
            { 'text' : 'initially selected', 'state' : { 'selected' : true } },
            { 'text' : 'custom icon URL', 'icon' : '//jstree.com/tree-icon.png' },
            { 'text' : 'initially open', 'state' : { 'opened' : true }, 'children' : [ 'Another node' ] },
            { 'text' : 'custom icon class', 'icon' : 'fa fa-comments-o' }
          ]
        },
        'And wholerow selection'
      ]
    }
  });
&lt;/script></pre>
      </div>
    </div>
  </div>

{% endblock %}

{% block javascript %}
  <script>
    // JS tree demo
    $('.js-tree-1').jstree();

    $('.js-tree-2').jstree({
      'plugins':['wholerow', 'checkbox'],
      'core' : {
        'data' : [
          {
            'text' : 'Same but with checkboxes',
            'children' : [
              { 'text' : 'initially selected', 'state' : { 'selected' : true } },
              { 'text' : 'custom icon URL', 'icon' : '//jstree.com/tree-icon.png' },
              { 'text' : 'initially open', 'state' : { 'opened' : true }, 'children' : [ 'Another node' ] },
              { 'text' : 'custom icon class', 'icon' : 'fa fa-comments-o' }
            ]
          },
          'And wholerow selection'
        ]
      }
    });
  </script>
{% endblock %}