
<div id="{{id}}" class="{{style}}" style="transform: scale({{scale}}); transform-origin: top left;">
{{~#if hud.actorId~}}
{{~#if hud.name~}}
<div id="tah-character-name" data-part="characterName">{{hud.name}}</div>
{{~/if~}}
<div id="tah-collapse-expand" data-part="collapseExpandContainer">
    <button id="tah-collapse-hud" class="tah-button-icon" data-part="collapseHudButton" data-action="collapseHud" data-tooltip="{{localize "tokenActionHud.collapseHud"}}">
        <i class="fas {{collapseIcon}}"></i>
    </button>
    <button id="tah-expand-hud" class="tah-button-box tah-hidden" data-part="expandHudButton" data-action="expandHud" data-tooltip="{{localize "tokenActionHud.expandHud"}}">
        <i class="fas {{expandIcon}}"></i>
    </button>
</div>
<div class="tah-groups" data-part="groups">
    {{#each hud.groups}}
    <button type="button" class="tah-add-group-button tah-hidden"
            data-part="addGroupButton" data-action="addGroup"
            data-position="{{@index}}" aria-label="{{localize 'tokenActionHud.addGroup.label'}}"
            data-tooltip="{{localize 'tokenActionHud.addGroup.label'}}">
        <i class="tah-add-icon fa-solid fa-plus"></i>
        <i class="tah-drop-icon fa-solid fa-arrow-down-to-line"></i>
    </button>
    {{>"modules/token-action-hud-core/templates/group.hbs" collapsibleSubgroups=../collapsibleSubgroups background=../background}}
    {{/each}}
    <button type="button" class="tah-add-group-button tah-hidden"
            data-part="addGroupButton" data-action="addGroup"
            data-position="{{hud.groups.length}}" aria-label="{{localize 'tokenActionHud.addGroup.label'}}"
            data-tooltip="{{localize 'tokenActionHud.addGroup.label'}}">
        <i class="tah-add-icon fa-solid fa-plus"></i>
        <i class="tah-drop-icon fa-solid fa-arrow-down-to-line"></i>
    </button>
</div>
{{#unless hovering}}
<div id="tah-buttons" data-part="buttons">
    <button type="button" id="tah-drag-hud" class="tah-button-icon tah-hidden" data-part="dragHudButton" data-tooltip="{{localize "tokenActionHud.dragHud"}}">
        <i class="fa-solid fa-arrows-up-down-left-right"></i>
    </button>
    <button id="tah-unlock" class="tah-button-icon" data-part="unlockHudButton" data-action="unlockHud" data-tooltip="{{localize "tokenActionHud.unlockHud"}}">
        <i class="fa fa-lock"></i>
    </button>
    <button id="tah-lock" class="tah-button-icon tah-hidden" data-part="lockHudButton" data-action="lockHud" data-tooltip="{{localize "tokenActionHud.lockHud"}}">
        <i class="fa fa-lock-open"></i>
    </button>
    <button id="tah-edit-hud" class="tah-button-icon tah-hidden" data-part="editHudButton" data-action="editHud" data-tooltip="{{localize "tokenActionHud.editHud"}}">
        <i class="fa fa-pen-to-square"></i>
    </button>
</div>
{{/unless}}
{{~/if~}}
</div>
