{% set data = data|merge({
    disableActions: data.disableActions|default(false),
    disableSearch: data.disableSearch|default(false),
    treeOptions: {
        view: 'oroui/js/app/views/jstree/base-tree-view'
    }|merge(data.treeOptions|default({})),
    actionsOptions: {
        view: 'oroui/js/app/views/jstree/action-manager-view',
        actions: actions|default({})
    }|merge(data.actionsOptions|default({}))
}) %}

<div class="jstree-wrapper" data-role="jstree-wrapper">
    <div class="jstree-wrapper__inner" data-page-component-view="{{ data.treeOptions|json_encode }}">
        <div class="jstree-wrapper__title">
            {% block header %}
                {% block label %}
                    {% if data.label|default('') %}
                        <span class="jstree-wrapper__label">
                            <span class="jstree-wrapper__text"
                                data-collapse-trigger>
                                {{ data.label }}
                            </span>
                        </span>
                    {% endif %}
                {% endblock label %}
                {% block actions %}
                    {% if not data.disableActions %}
                    <div class="jstree-actions dropdown btn-group"
                        data-page-component-view="{{ data.actionsOptions|json_encode }}">
                    </div>
                    {% endif %}
                {% endblock actions %}
            {% endblock header %}
        </div>
        <div class="jstree-wrapper__content">
            {% block content %}
                {% block search %}
                    {% if not data.disableSearch %}
                    <div class="jstree-search-component" data-name="jstree-search-component">
                        <input type="search" placeholder="{{ 'oro.ui.jstree.quick_search'|trans }}" class="jstree-search-component__input" data-name="search"/>
                        <span data-name="clear-search" class="jstree-search-component__clear-icon">
                            <i class="fa fa-close"></i>
                        </span>
                        <span class="jstree-search-component__search-icon">
                            <i class="fa fa-search"></i>
                        </span>
                    </div>
                    {% endif %}
                {% endblock search %}
                {% block tree %}
                    <div data-role="jstree-container" class="jstree-container"></div>
                {% endblock tree %}
            {% endblock content %}
        </div>
    </div>
</div>