{% macro sidebar_dropdown(target) %}
<li class="dropdown-header">{% trans %}actions{% endtrans %}</li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="expand" data-target="{{ target }}">{% trans %}expandAll{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="collapse" data-target="{{ target }}">{% trans %}reduceAll{% endtrans %}</a></li>
<li role="separator" class="dropdown-divider"></li>
<li class="dropdown-header">{% trans %}datasource{% endtrans %}</li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="categories" data-target="{{ target }}">{% trans %}category.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="locations" data-target="{{ target }}">{% trans %}storelocation.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="footprints" data-target="{{ target }}">{% trans %}footprint.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="manufacturers" data-target="{{ target }}">{% trans %}manufacturer.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="suppliers" data-target="{{ target }}">{% trans %}supplier.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="devices" data-target="{{ target }}">{% trans %}device.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="tools" data-target="{{ target }}">{% trans %}tools.label{% endtrans %}</a></li>
{% endmacro %}

<ul class="nav flex-column">
    <li id="treeBox-categories">
        <div class="input-group input-group-sm mb-2 mt-1">
            <div class="input-group-prepend">
                <button class="btn btn-light dropdown-toggle" type="button"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                ><span class="sidebar-title" id="tree-categories-title">{% trans %}category.labelp{% endtrans %}</span></button>
                <ul class="dropdown-menu" aria-labelledby="dropdownCat">
                    {{ _self.sidebar_dropdown('tree-categories') }}
                </ul>
            </div>
            <input type="search" class="form-control bg-light border-0" id="tree-category-search" placeholder="{% trans %}search.placeholder{% endtrans %}">
        </div>

        <div id="tree-categories" data-tree-search="#tree-category-search"></div>
    </li>
    <li id="treeBox-devices">
        <div class="input-group input-group-sm mb-2 mt-2">
            <div class="input-group-prepend">
                <button class="btn btn-light dropdown-toggle" type="button"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                ><span class="sidebar-title" id="tree-devices-title">{% trans %}device.labelp{% endtrans %}</span></button>

                <ul class="dropdown-menu" aria-labelledby="dropdownDev">
                    {{ _self.sidebar_dropdown('tree-devices') }}
                </ul>
            </div>
            <input type="search" class="form-control bg-light border-0" id="tree-devices-search" placeholder="{% trans %}search.placeholder{% endtrans %}">
        </div>

        <div id="tree-devices" data-tree-search="#tree-devices-search"></div>
    </li>

    <li id="treeBox-tools">
        <div class="input-group input-group-sm mb-2 mt-2">
            <div class="input-group-prepend">
                <button class="btn btn-light dropdown-toggle" type="button"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                ><span class="sidebar-title" id="tree-tools-title">{% trans %}tools.label{% endtrans %}</span></button>

                <ul class="dropdown-menu" aria-labelledby="dropdownTools">
                    {{ _self.sidebar_dropdown('tree-tools') }}
                </ul>
            </div>



            <input type="search" class="form-control bg-light border-0" id="tree-tools-search" placeholder="{% trans %}search.placeholder{% endtrans %}">

        </div>

        <div id="tree-tools" data-tree-search="#tree-tools-search"></div>
    </li>
</ul>