daggerheart/templates/sheets-settings/token-config/appearance.hbs

<div class="tab scrollable{{#if tab.active}} active{{/if}}" data-group="{{tab.group}}" data-tab="{{tab.id}}">
    <div class="token-image-group">
        {{formGroup fields.texture.fields.src value=source.texture.src rootId=rootId}}
        {{#if randomImgEnabled}}
        {{formGroup fields.randomImg value=source.randomImg classes="slim" rootId=rootId}}
        {{else if hasAlternates}}
        <div class="form-group">
            <label for="{{rootId}}-alternateImages">{{localize "TOKEN.ImageAlts"}}</label>
            <select id="{{rootId}}-alternateImages" class="alternate-images" name="alternateImages">
                {{selectOptions alternateImages selected=source.texture.src blank=""}}
            </select>
        </div>
        {{/if}}

        {{#if imagePreview}}
            <div class="{{imagePreview.cls}}">
                {{#if imagePreview.isVideo}}
                <video class="token-image-thumb" src="{{imagePreview.src}}" autoplay muted loop playsinline
                    disablepictureinpicture></video>
                {{else}}
                <img class="token-image-thumb" src="{{imagePreview.src}}" alt="{{localize "TOKEN.ImagePreview"}}">
                {{/if}}
                <div class="token-image-controls">
                    <button type="button" class="cycle-prev icon fa-solid fa-chevron-left" data-action="cycleImage"
                            data-delta="-1" aria-label="{{localize "TOKEN.ImageCyclePrev"}}"
                            {{#unless imagePreview.hasPrev}} disabled{{/unless}}></button>
                    <span class="counter">{{imagePreview.current}} / {{imagePreview.total}}</span>
                    <button type="button" class="cycle-next icon fa-solid fa-chevron-right" data-action="cycleImage"
                            data-delta="1" aria-label="{{localize "TOKEN.ImageCycleNext"}}"
                            {{#unless imagePreview.hasNext}} disabled{{/unless}}></button>
                </div>
            </div>
        {{/if}}
    </div>

    <fieldset>
        <legend>{{localize "DAGGERHEART.APPLICATIONS.TokenConfig.tokenSize"}}</legend>
        {{#if usesActorSize}}
            <div class="form-group slim">
                <label>{{localize "DAGGERHEART.APPLICATIONS.TokenConfig.sizeCategory"}}</label>

                <select id="dhTokenSize">
                    {{selectOptions tokenSizes selected=tokenSize valueAttr="id" labelAttr="label" localize=true}}
                </select>
            </div>
        {{/if}}

        <div id="tokenSizeDimensions" class="form-group slim" {{#if actorSizeDisable}}data-tooltip="{{localize "DAGGERHEART.APPLICATIONS.TokenConfig.actorSizeUsed"}}"{{/if}}>
            <span class="label">
                {{localize "TOKEN.Size"}}
                <span class="units">({{localize "MEASUREMENT.GridSpaces"}})</span>
            </span>
            <div class="form-group slim">
                <label for="{{rootId}}-width">{{localize "DOCUMENT.FIELDS.width.label"}}</label>
                {{formInput fields.width value=source.width id=(concat rootId "-width") disabled=actorSizeDisable}}
                <label for="{{rootId}}-height">{{localize "DOCUMENT.FIELDS.height.label"}}</label>
                {{formInput fields.height value=source.height id=(concat rootId "-height") disabled=actorSizeDisable}}
                <label for="{{rootId}}-depth">Z</label>
                {{formInput fields.depth value=source.depth id=(concat rootId "-depth") disabled=actorSizeDisable}}
            </div>
        </div>
    </fieldset>

    {{#if shapes}}
    {{formGroup fields.shape value=source.shape choices=shapes classes="slim" rootId=rootId}}
    {{/if}}
    {{formGroup fields.texture.fields.fit value=source.texture.fit choices=textureFitModes classes="slim" rootId=rootId}}

    <div class="form-group slim">
        <label>{{localize "Anchor"}}</label>
        <div class="form-fields">
            <label for="{{rootId}}-anchorX">{{localize "TOKEN.FIELDS.texture.anchorX.label"}}</label>
            {{formInput fields.texture.fields.anchorX value=source.texture.anchorX id=(concat rootId "-anchorX")
                placeholder="0.5"}}
            <label for="{{rootId}}-anchorY">{{localize "TOKEN.FIELDS.texture.anchorY.label"}}</label>
            {{formInput fields.texture.fields.anchorY value=source.texture.anchorY id=(concat rootId "-anchorY")
                placeholder="0.5"}}
        </div>
        <p class="hint">{{localize "TOKEN.AnchorHint"}}</p>
    </div>

    <div class="form-group">
        <label for="{{rootId}}-scale">{{localize "Scale"}} <span class="units">({{localize "Ratio"}})</span></label>
        <div class="form-fields">
            <range-picker id="{{rootId}}-scale" name="scale" value={{scale}} min="0.2" max="3" step="0.05"></range-picker>
        </div>
    </div>

    <div class="form-group slim">
        <label>{{localize "TOKEN.Mirror"}}</label>
        <div class="form-fields">
            <label class="checkbox" for="{{rootId}}-mirrorX">
                {{localize "TOKEN.MirrorX"}}
                <input type="checkbox" id="{{rootId}}-mirrorX" name="mirrorX" {{checked mirrorX}}>
            </label>
            <label class="checkbox" for="{{rootId}}-mirrorY">
                {{localize "TOKEN.MirrorY"}}
                <input type="checkbox" id="{{rootId}}-mirrorY" name="mirrorY" {{checked mirrorY}}>
            </label>
        </div>
    </div>

    {{formGroup fields.texture.fields.tint value=source.texture.tint placeholder="#ffffff" rootId=rootId}}
    {{formGroup fields.alpha value=source.alpha step=0.05 rootId=rootId}}
    {{formGroup fields.lockRotation value=source.lockRotation rootId=rootId}}

    <fieldset>
        <legend>{{localize "TOKEN.RING.SHEET.legend"}}</legend>
        {{formGroup fields.ring.fields.enabled value=source.ring.enabled rootId=rootId}}
        {{formGroup fields.ring.fields.colors.fields.ring value=source.ring.colors.ring rootId=rootId}}
        {{formGroup fields.ring.fields.colors.fields.background value=source.ring.colors.background rootId=rootId}}
        {{formGroup fields.ring.fields.subject.fields.texture value=source.ring.subject.texture rootId=rootId}}
        {{formGroup fields.ring.fields.subject.fields.scale value=source.ring.subject.scale max=3 step=0.02 rootId=rootId}}
        {{formGroup fields.ring.fields.effects value=source.ring.effects input=ringEffectsInput stacked=true rootId=rootId}}
    </fieldset>
</div>