daggerheart/templates/hud/tokenHUD.hbs

<div class="col left">
    <div class="attribute elevation" data-tooltip="HUD.Elevation">
        <i class="fas fa-angle-up"></i>
        <input type="text" name="elevation" value="{{elevation}}" {{disabled (or locked (and isGamePaused (not isGM)))}}>
    </div>

    <button type="button" class="control-icon" data-action="sort" data-direction="up" data-tooltip="HUD.ToFront">
        <img src="{{icons.up}}">
    </button>

    <button type="button" class="control-icon" data-action="sort" data-direction="down" data-tooltip="HUD.ToBack">
        <img src="{{icons.down}}">
    </button>

    {{#if canConfigure}}
    <button type="button" class="control-icon" data-action="config" data-tooltip="HUD.OpenConfig">
        <i class="fa-solid fa-gear" inert></i>
    </button>
    {{/if}}
</div>

<div class="col middle">
    <div class="attribute bar2">
        {{#if displayBar2}}
        <input type="text" name="bar2" value="{{bar2Data.value}}" {{#unless bar2Data.editable}}disabled{{/unless}}>
        {{/if}}
    </div>

    <div class="attribute bar1">
        {{#if displayBar1}}
        <input type="text" name="bar1" value="{{bar1Data.value}}" {{#unless bar1Data.editable}}disabled{{/unless}}>
        {{/if}}
    </div>
</div>

<div class="col right">
    {{#if isGM}}
    <button type="button" class="control-icon {{visibilityClass}}" data-action="visibility" data-tooltip="HUD.ToggleVis">
        <img src="{{icons.visibility}}">
    </button>
    {{/if}}

    {{#if usesEffects}}
    <button type="button" class="control-icon" data-action="togglePalette" data-palette="effects" data-tooltip="HUD.AssignStatusEffects">
        <img src="{{icons.effects}}">
    </button>
    <div class="palette status-effects" data-palette="effects">
        {{#each systemStatusEffects as |status|}}
            <div class="effect-control-container" {{#if status.disabled}}data-tooltip="{{localize "DAGGERHEART.UI.Tooltip.immune"}}"{{else if status.title}}data-tooltip-text="{{status.title}}"{{/if}}>
                <img class="effect-control {{status.cssClass}} {{#if (or status.disabled status.locked)}}disabled{{/if}}" src="{{status.src}}" data-action="effect" data-status-id="{{status.id}}">
                {{#if status.disabled}}
                    <span class="effect-control-disabled-marker">/</span>
                {{/if}}
                {{#if status.locked}}<i class="effect-locked fa-solid fa-lock"></i>{{/if}}
            </div>
        {{/each}}
        {{#if genericStatusEffects}}
            <label class="palette-category-title">{{localize "DAGGERHEART.APPLICATIONS.HUD.tokenHUD.genericEffects"}}</label>
            {{#each genericStatusEffects as |status|}}
                <div class="effect-control-container" {{#if status.title}}data-tooltip-text="{{status.title}}"{{/if}}>
                    <img class="effect-control {{status.cssClass}} {{#if (or status.disabled status.locked)}}disabled{{/if}}" src="{{status.src}}" data-action="effect" data-status-id="{{status.id}}" >
                    {{#if status.locked}}<i class="effect-locked fa-solid fa-lock"></i>{{/if}}
                </div>
            {{/each}}
        {{/if}}
    </div>
    {{/if}}
    
    {{#if (eq actorType 'party')}}
        <button type="button" class="control-icon clown-car" data-action="togglePartyTokens" data-tooltip="{{#if partyOnCanvas}}{{localize "DAGGERHEART.APPLICATIONS.HUD.tokenHUD.retrievePartyTokens"}}{{else}}{{localize "DAGGERHEART.APPLICATIONS.HUD.tokenHUD.depositPartyTokens"}}{{/if}}">
            <img {{#if partyOnCanvas}}class="flipped"{{/if}} src="{{icons.toggleParty}}">
        </button>
    {{/if}}

    <button type="button" class="control-icon" data-action="togglePalette" data-palette="movementActions"
            aria-label="{{ localize "HUD.SelectMovementAction" }}" data-tooltip>
        {{#with movementActionsConfig}}
        {{#if img}}
        <img src="{{ img }}" alt="{{ localize "HUD.SelectMovementAction" }}">
        {{else}}
        <i class="{{ icon }}" inert></i>
        {{/if}}
        {{/with}}
    </button>
    <div class="palette movement-actions" data-palette="movementActions">
        {{#each movementActions as |action|}}
        <a class="movement-action-control {{action.cssClass}}" data-action="movementAction" data-movement-action="{{action.id}}">
            <span>
                {{#if action.img}}
                <img src="{{ action.img }}" alt="{{ action.label }}">
                {{else}}
                <i class="{{ action.icon }} fa-fw" inert></i>
                {{/if}}
                {{action.label}}
            </span>
        </a>
        {{/each}}
    </div>

    <button type="button" class="control-icon {{targetClass}}" data-action="target" data-tooltip="HUD.ToggleTargetState">
        <i class="fa-solid fa-bullseye" inert></i>
    </button>

    {{#if canToggleCombat}}
    <button type="button" class="control-icon {{combatClass}}" data-action="combat" data-tooltip="HUD.ToggleCombatState">
        <img src="{{icons.combat}}">
    </button>
    {{/if}}
</div>