{% layout 'layout' %}
{% block title %}Tree View{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">Custom Components</a></li>
<li class="active"><a href="custom-jstree.html">Tree View</a></li>
{% endblock %}

{% block styles %}
{{ "plugins/jstree/dist/themes/avenger/style.css" | asset_url | stylesheet_tag }}
{% endblock %}

{% block scripts %}
{{ "plugins/jstree/dist/jstree.min.js" | asset_url | script_tag }}
{{ "demo/demo-jstree.js" | asset_url | script_tag }}
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">

        <div class="alert alert-info">
            <h3>jsTree</h3>
            <p>jsTree is jquery plugin, that provides interactive trees. It is easily extendable, themable and configurable, it supports HTML &amp; JSON data sources and AJAX loading.</p>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h2>Default Tree</h2>
                    </div>
                    <div class="panel-body">
                        <div id="tree-default">
                            <ul>
                                <li>
                                     Root node 1
                                    <ul>
                                        <li data-jstree='{ "selected" : true }'>
                                            <a href="#">
                                            Initially selected </a>
                                        </li>
                                        <li data-jstree='{ "icon" : "fa fa-briefcase text-success " }'>
                                             custom icon URL
                                        </li>
                                        <li data-jstree='{ "opened" : true }'>
                                             initially open
                                            <ul>
                                                <li data-jstree='{ "disabled" : true }'>
                                                     Disabled Node
                                                </li>
                                                <li data-jstree='{ "type" : "file" }'>
                                                     Another node
                                                </li>
                                            </ul>
                                        </li>
                                        <li data-jstree='{ "icon" : "fa fa-warning text-danger" }'>
                                             Custom icon class (bootstrap)
                                        </li>
                                    </ul>
                                </li>
                                <li data-jstree='{ "type" : "file" }'>
                                    <a href="http://www.jstree.com">
                                    Clickanle link node </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h2>Checkable Tree</h2>
                    </div>
                    <div class="panel-body">
                        <div id="tree-checkable"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h2>Contextual Menu with Drag &amp; Drop</h2>
                    </div>
                    <div class="panel-body">
                        <div class="alert alert-success">
                            <p><span class="label label-success">Note</span> Opened and selected nodes will be saved in the user's browser, so when returning to the same tree the previous state will be restored.</p>
                        </div>
                        <div id="tree-contextual"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h2>Ajax Tree with Drag &amp; Drop</h2>
                    </div>
                    <div class="panel-body">
                        <div class="alert alert-success"><span class="label label-success">Note</span> The tree nodes are loaded from demo/jstree_ajax_data.php via ajax.</div>
                        <div id="tree-ajax"></div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>
{% endblock %}
