daggerheart/templates/ui/fearTracker.hbs

<div>
    <div id="resource-fear" class="fear-tracker {{#if isGM}}isGM{{/if}}">
        {{#if isFree}}
            <div class="fear-header">
                <div class="drag-handle">
                    <i class="fa-solid fa-grip-vertical"></i>
                </div>
                <span class="fear-title">{{localize 'DAGGERHEART.GENERAL.fear'}}</span>
            </div>
        {{/if}}

        {{#if (eq display 'token')}}
            <div class="fear-tokens">
                {{#times max}}
                <a
                    class="fear-token {{#if (gte @this ../current)}} inactive{{/if}}"
                    style="filter: hue-rotate(calc(({{this}}/{{../max}})*75deg))"
                    data-index="{{this}}" data-action="setFear"
                >
                    <i class="fear-token fas fa-skull"></i>
                </a>
                {{/times}}
            </div>
        {{/if}}
        {{#if (eq display 'bar')}}
            <div class="resource-bar fear-bar" style="--fear-percent: {{percent}}%">
                <progress
                    class='progress-bar stress-color'
                    value='{{current}}'
                    max='{{max}}'
                ></progress>
                <h4 class="label">{{current}} / {{max}}</h4>
            </div>
            {{#if isGM}}
                <div class="controls">
                    <a class="{{#if (lte current 0)}} disabled{{/if}}" data-increment="-1" data-action="increaseFear"><i class="fa-solid fa-minus"></i></a>
                    <a class="{{#if (gte current max)}} disabled{{/if}}" data-increment="+1" data-action="increaseFear"><i class="fa-solid fa-plus"></i></a>
                </div>
            {{/if}}
        {{/if}}

        {{#if isFree}}
            <a class="resize-handle">
                <i class="fa-solid fa-chevron-right" style="transform: rotate(45deg);"></i>
            </a>
        {{/if}}
    </div>
</div>