<template name="toolbarSectionButton">
    {{#if this.buttonTemplateName}}
        {{>UI.dynamic template=this.buttonTemplateName data=this}}
    {{else}}
        <div id="{{this.id}}" tabindex="1"
            class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{#if or this.disabled (disableButton)}}disabled{{/if}} {{#if hasSubTools}}expandable{{/if}}"
            title="{{this.tooltipTitle}}">
            <div class="svgContainer">
                {{#let svg=svgLink icon=iconClasses}}
                    {{#if svg}}
                        <svg>
                            <use xlink:href={{absoluteUrl svg}}></use>
                        </svg>
                    {{else}}
                        <i class={{icon}}></i>
                    {{/if}}
                {{/let}}
            </div>
            <div class="buttonLabel">
                <span>{{this.title}}</span>
                {{#if hasSubTools}}
                    <i class="fa fa-caret-down expanded-status" aria-hidden="true"></i>
                {{/if}}
            </div>
            {{#if hasSubTools}}
                <div class="toolbarSectionDrawerContainer">
                    <div class="toolbarSectionDrawer">
                        {{#if this.subToolsTemplateName}}
                            {{>UI.dynamic template=this.subToolsTemplateName data=this}}
                        {{else}}
                            {{#if this.subTools}}
                                {{#each subTool in this.subTools}}
                                    {{>toolbarSectionButton subTool}}
                                {{/each}}
                            {{/if}}
                        {{/if}}
                    </div>
                </div>         
            {{/if}}
        </div>
    {{/if}}
</template>
