<ul class="tree {{#if folderSelect}}tree-folder-select{{/if}}"
	id="{{#if id}}{{id}}{{else}}myTree{{/if}}"
	role="tree"
	aria-activedescendant=""
	{{#if multiSelect}} aria-multiselectable="true"{{/if}}
	{{#unless labelledBy}}aria-label="{{#if label}}{{label}}{{/if}}"{{/unless}}
	{{#if labelledBy}}aria-labelledby="{{labelledBy}}"{{/if}}>
	<li class="tree-branch hidden" data-template="treebranch" role="treeitem" aria-expanded="false" aria-selected="false">
		<div class="tree-branch-header">
			{{#if folderSelect}}<button type="button" class="glyphicon icon-caret glyphicon-play" tabindex="-1"><span class="sr-only">Open</span></button>{{/if}}
			<button type="button" class="tree-branch-name" tabindex="-1">
				{{#unless folderSelect}}<span class="glyphicon icon-caret glyphicon-play"></span>{{/unless}}
				<span class="glyphicon icon-folder glyphicon-folder-close"></span>
				<span class="tree-label"></span>
			</button>
		</div>
		<ul class="tree-branch-children" role="group"></ul>
		<!-- this loader shows on nested folders and when overflow is triggered -->
		{{#if loaderHTML }}{{loaderHTML}}{{else}}<div class="tree-loader hidden"><span role="alert">Loading...</span></div>{{/if}}
	</li>
	<li class="tree-item hidden" data-template="treeitem" role="treeitem" aria-selected="false">
		<button type="button" class="tree-item-name" tabindex="-1">
			<span class="glyphicon icon-item fueluxicon-bullet"></span>
			<span class="tree-label"></span>
		</button>
	</li>
	<li class="tree-overflow hidden" data-template="treeoverflow" role="treeitem">
		<button type="button" class="tree-overflow-name" tabindex="-1">
			<span class="glyphicon"></span>
			<span class="tree-label"></span>
		</button>
	</li>
	<!-- Loader shown at root level and when tree is loading -->
	{{#if initialLoaderHTML}}{{initialLoaderHTML}}{{else}}{{#if loaderHTML }}{{loaderHTML}}{{else}}<li class="tree-loader hidden"><span role="alert">Loading...</span></li>{{/if}}{{/if}}
</ul>