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-tooltip="HUD.ToFrontOrBack">
        <i class="fa-solid fa-arrow-down-arrow-up" inert></i>
    </button>

    {{#if canChangeLevel}}
    <button type="button" class="control-icon" data-action="togglePalette" data-palette="levels"
            aria-label="{{ localize "HUD.ChangeLevel" }}" data-tooltip>
        <i class="fa-solid fa-stairs" inert></i>
    </button>
    <div class="palette palette-list" data-palette="levels">
        {{#each levels as |level|}}
        <a class="palette-list-entry {{level.cssClass}}" data-action="level" data-level-id="{{level.id}}"><span>{{level.name}}</span></a>
        {{/each}}
    </div>
    {{/if}}

    {{#if hasCompanion}}
        <button type="button" class="control-icon clown-car" data-action="toggleCompanions" data-tooltip="{{#if companionOnCanvas}}{{localize "DAGGERHEART.APPLICATIONS.HUD.tokenHUD.retrieveCompanionTokens"}}{{else}}{{localize "DAGGERHEART.APPLICATIONS.HUD.tokenHUD.depositCompanionTokens"}}{{/if}}">
            <img {{#if companionOnCanvas}}class="flipped"{{/if}} src="{{icons.toggleClowncar}}">
        </button>
    {{/if}}

    {{#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 effect-control-container {{status.cssClass}} {{#if (or status.disabled status.locked)}}disabled{{/if}}" 
                {{#if status.disabled}}data-tooltip="{{localize "DAGGERHEART.UI.Tooltip.immune"}}"{{else if status.title}}data-tooltip-text="{{status.title}}"{{/if}}
                data-action="effect" data-status-id="{{status.id}}"
            >
                <img src="{{status.src}}" />
                {{#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 effect-control-container {{status.cssClass}} {{#if (or status.disabled status.locked)}}disabled{{/if}}" 
                    {{#if status.title}}data-tooltip-text="{{status.title}}"{{/if}}
                    data-action="effect" data-status-id="{{status.id}}"
                >
                    <img src="{{status.src}}" />
                    {{#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.toggleClowncar}}">
        </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>