foundry/Data/modules/token-variants/templates/overlayConfig.html

<form class="tva-overlay-form">

    <nav class="sheet-tabs tabs" data-group="main" aria-role="Form Tab Navigation">
        <a class="item active" data-tab="misc"><i class="fas fa-wrench"></i> Misc</a>
        <a class="item" data-tab="image"><i class="fas fa-expand"></i> Image</a>
        <a class="item" data-tab="text"><i class="fas fa-text-size"></i> Text</a>
        <a class="item" data-tab="shapes"><i class="fas fa-shapes"></i> Shapes</a>
        <!-- <a class="item" data-tab="html"><i class="fas fa-bolt"></i> HTML</a>-->
        <a class="item" data-tab="filter"><i class="fas fa-paint-roller"></i> Filter</a>
        <a class="item" data-tab="visibility"><i class="fas fa-eye"></i> Visibility</a>
        <a class="item" data-tab="animation"><i class="fas fa-camera-movie"></i> Animation</a>
        <a class="item" data-tab="interactivity"><i class="fas fa-bolt"></i> Triggers</a>
        <a class="item {{#if variables}}non-empty-variables{{/if}}" data-tab="variables"><i class="fas fa-superscript"></i> Variables</a>
    </nav>

    <input type="text" name="id" value="{{id}}" hidden>

    {{#if tmfxActive}}
    <datalist id="tmfxPresets">
        {{#each tmfxPresets }}
        <option value="{{this}}"></option>
        {{/each}}
    </datalist>
    {{/if}}

    {{#if ceEffects}}
    <datalist id="ceEffects">
        {{#each ceEffects }}
        <option value="{{this}}"></option>
        {{/each}}
    </datalist>
    {{/if}}

    <datalist id="macros">
        {{#each macros }}
        <option value="{{this}}"></option>
        {{/each}}
    </datalist>

    <section class = "content">

        <div class="tab" data-group="main" data-tab="html">

            <nav class="tabs sheet-tabs secondary-tabs" data-group="html" aria-role="Sight Configuration Tabs">
                <a class="item active" data-tab="template" data-group="html"><i class="fa-solid fa-eye"></i> Template</a>
                <a class="item" data-tab="style" data-group="html"><i class="fa-solid fa-radar"></i> Style</a>
                <a class="item" data-tab="listeners" data-group="html"><i class="fa-solid fa-cogs"></i> Listeners</a>
            </nav>

            <div class="tab" data-group="html" data-tab="template">
                <textarea class="html-text" name="html.template">{{html.template}}</textarea>
            </div>

            <div class="tab" data-group="html" data-tab="style">
                <textarea class="html-text"name="html.style">{{html.style}}</textarea>
            </div>

            <div class="tab" data-group="html" data-tab="listeners">
                <textarea class="html-text" name="html.listeners">{{html.listeners}}</textarea>
            </div>
        </div>

        <div class="tab" data-group="main" data-tab="interactivity">
            <div class="form-group">
                <label>Event</label>
                <div class="form-fields">
                <select>
                    <option value="clickLeft">Click Left</option>
                    <option value="clickLeft2">Double Click Left</option>
                    <option value="clickRight">Click Right</option>
                    <option value="clickRight2">Double Click Right</option>
                    <option value="hoverIn">Hover In</option>
                    <option value="hoverOut">Hover Out</option>
                </select>
                <button class="addEvent" type="button">Add</button>
                </div>
            </div>

            {{#each interactivity as |event|}}

            <fieldset>
                <legend><b>{{event.listener}}</b> <a class="deleteEvent" data-index="{{@index}}" title="Remove"><i class="fas fa-trash-alt"></i></a></legend>
                <input type="hidden" name="interactivity.{{@index}}.listener" value="{{event.listener}}">

                <div class="form-group">
                    <label>Macro</label>
                    <div class="form-fields">
                        <input list="macros" name="interactivity.{{@index}}.macro" value="{{event.macro}}">
                    </div>
                </div>

                {{#if ../ceActive}}
                <div class="form-group">
                    <label>DFreds Effect</label>
                    <div class="form-fields">
                      <input list="ceEffects" name="interactivity.{{@index}}.ceEffect" value="{{event.ceEffect}}">
                    </div>
                </div>
                {{/if}}

                {{#if ../tmfxActive}}
                <div class="form-group">
                    <label>TMFX (Preset)</label>
                    <div class="form-fields">
                      <input list="tmfxPresets" name="interactivity.{{@index}}.tmfxPreset" value="{{event.tmfxPreset}}">
                    </div>
                </div>
                {{/if}}

                <div class="form-group">
                    <label>Script</label>
                    <div class="form-fields">
                        <textarea name="interactivity.{{@index}}.script">{{event.script}}</textarea>
                    </div>
                </div>
            </fieldset>

            {{/each}}

        </div>

        <div class="tab active" data-group="main" data-tab="misc">

            <div class="form-group">
                <label>Parent</label>
                <div class="form-fields">
                <select name="parentID">
                    <option value="TOKEN" {{#if (eq ../../parent "TOKEN")}}selected="selected"{{/if}}>Token (Placeable)</option>
                    {{#each parents as |parent group|}}
                    <optgroup label="{{group}}">
                        {{#each parent.list as |mapping|}}
                        <option value="{{mapping.id}}" {{#if (eq ../../parentID mapping.id)}}selected="selected"{{/if}}>{{mapping.label}}</option>
                        {{/each}}
                    </optgroup>
                    {{/each}}
                </select>
                </div>
            </div>

            <div class="form-group token-specific-fields">
                <label>UI Element</label>
                <div class="form-fields">
                    <input type="checkbox" name="ui" data-dtype="Boolean" value="{{ui}}" {{#if ui}}checked{{/if}}>
                </div>
                <p class="notes">Overlay marked as a UI element will always display above Tokens and will not interact with scene lighting.</p>
            </div>

            <fieldset class="token-specific-fields">
                <legend>Display Priority</legend>

                <div class="form-group ui-hide">
                    <label><i class="fal fa-eclipse"></i> Underlay</label>
                    <div class="form-fields">
                        <input type="checkbox" name="underlay" data-dtype="Boolean" value="{{underlay}}" {{#if underlay}}checked{{/if}}>
                    </div>
                    <p class="notes">Place the image, video or text underneath the token.</p>
                </div>

                <div class="form-group">
                    <label><i class="far fa-arrow-to-bottom"></i> BOTTOM</label>
                    <div class="form-fields">
                        <input type="checkbox" name="bottom" data-dtype="Boolean" value="{{bottom}}" {{#if bottom}}checked{{/if}}>
                    </div>
                    <p class="notes">Place this underlay bellow all tokens.</p>
                </div>

                <div class="form-group ui-hide">
                    <label><i class="far fa-arrow-to-top"></i> TOP</label>
                    <div class="form-fields">
                        <input type="checkbox" name="top" data-dtype="Boolean" value="{{top}}" {{#if top}}checked{{/if}}>
                    </div>
                    <p class="notes">Place this overlay above all tokens.</p>
                </div>
            </fieldset>

            <fieldset>
                <legend>Link To Token</legend>
                <div class="form-group token-specific-fields">
                    <label>Tint Color</label>
                    <div class="form-fields">
                        <input type="checkbox" name="inheritTint" data-dtype="Boolean" value="{{inheritTint}}" {{#if inheritTint}}checked{{/if}}>
                    </div>
                </div>
    
                <div class="form-group">
                    <label>Rotation</label>
                    <div class="form-fields">
                        <input type="checkbox" name="linkRotation" data-dtype="Boolean" value="{{linkRotation}}" {{#if linkRotation}}checked{{/if}}>
                    </div>
                </div>

                <div class="form-group">
                    <label>&nbsp;&nbsp; -- Overlay Relative</label>
                    <div class="form-fields">
                        <input type="checkbox" name="animation.relative" data-dtype="Boolean" value="{{animation.relative}}" {{#if animation.relative}}checked{{/if}}>
                    </div>
                </div>
    
                <div class="form-group token-specific-fields">
                    <label>Mirror Image</label>
                    <div class="form-fields">
                        <input type="checkbox" name="linkMirror" data-dtype="Boolean" value="{{linkMirror}}" {{#if linkMirror}}checked{{/if}}>
                    </div>
                </div>

                <div class="form-group token-specific-fields">
                    <label>Scale</label>
                    <div class="form-fields">
                        <input type="checkbox" name="linkScale" data-dtype="Boolean" value="{{linkScale}}" {{#if linkScale}}checked{{/if}}>
                    </div>
                </div>

                <div class="form-group slim token-specific-fields">
                    <label>Dimensions</label>
                    <div class="form-fields">
                        <label>Width</label>
                        <input type="checkbox" name="linkDimensionsX" data-dtype="Boolean" value="{{linkDimensionsX}}" {{#if linkDimensionsX}}checked{{/if}}>
                        <label>Height</label>
                        <input type="checkbox" name="linkDimensionsY" data-dtype="Boolean" value="{{linkDimensionsY}}" {{#if linkDimensionsY}}checked{{/if}}>
                    </div>
                </div>
    
                <div class="form-group">
                    <label>Opacity</label>
                    <div class="form-fields">
                        <input type="checkbox" name="linkOpacity" data-dtype="Boolean" value="{{linkOpacity}}" {{#if linkOpacity}}checked{{/if}}>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <legend>Link To Stage</legend>
                <div class="form-group token-specific-fields">
                    <label>Scale</label>
                    <div class="form-fields">
                        <input type="checkbox" name="linkStageScale" data-dtype="Boolean" value="{{linkStageScale}}" {{#if linkStageScale}}checked{{/if}}>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <legend>Video</legend>
                <div class="form-group">
                    <label>Loop Video</label>
                    <div class="form-fields">
                        <input type="checkbox" name="loop" data-dtype="Boolean" value="{{loop}}" {{#if loop}}checked{{/if}}>
                    </div>
                </div>
    
                <div class="form-group">
                    <label>Play Once and Hide</label>
                    <div class="form-fields">
                        <input type="checkbox" name="playOnce" data-dtype="Boolean" value="{{playOnce}}" {{#if playOnce}}checked{{/if}}>
                    </div>
                </div>
            </fieldset>
        </div>

        <div class="tab active" data-group="main" data-tab="image">
            <div class="form-group">
                <label>Image Path</label>
                <div class="form-fields">
                    <button type="button" class="file-picker img-link-disable" data-type="imagevideo" data-target="img" title="Browse Files" tabindex="-1"><i class="fas fa-file-import fa-fw"></i></button>
                    <input class="image img-link-disable" type="text" name="img" placeholder="path/image.png" value="{{img}}">
                    <button type="button" class="image-link {{#if imgLinked}}active{{/if}}" title="Use the same image as the Token."><i class="fas fa-link"></i></button>
                        <input type="checkbox" name="imgLinked" hidden {{#if imgLinked}}checked{{/if}}>
                    <button type="button" title="Select Image" class="token-variants-image-select-button img-link-disable" tabindex="-1" data-type="imagevideo" data-target="img"><i class="fas fa-images"></i></button>
                </div>
            </div>

            {{~>modules/token-variants/templates/partials/repeating.html repeating=repeating root="" repeat=repeat padding="true"}}

            <fieldset>
                <legend>Appearance</legend>

                <div class="form-group">
                    <label>Opacity</label>
                    <div class="form-fields">
                        <input type="range" value="{{alpha}}" min="0" max="1" step="0.05">
                        <input name="alpha" class="range-value" type="text" value="{{alpha}}"></input>
                    </div>
                </div>
    
                <div class="form-group">
                    <label>Tint Color</label>
                    <div class="form-fields">
                        <input class="color" type="text" name="tint" value="{{tint}}">
                        <input type="color" value="{{tint}}" data-edit="tint">
                    </div>
                </div>

                {{~>modules/token-variants/templates/partials/interpolateColor.html root="" interpolateColor=interpolateColor label="Tint Color"}}
            </fieldset>

            <fieldset>
                <legend>Dimensions</legend>

                <div class="form-group">
                    <label>Width <i class="fas fa-question-circle" title="Set exact image width.&#013; *To take effect requires Scale and Dimension linking under Misc to be disabled.*"></i></label>
                    <div class="form-fields">
                        <input name="width" type="text" value="{{width}}" min="0"></input>
                    </div>
                </div> 
    
                <div class="form-group">
                    <label>Height <i class="fas fa-question-circle" title="Set exact image height.&#013; *To take effect requires Scale and Dimension linking under Misc to be disabled.*"></i></label>
                    <div class="form-fields">
                        <input name="height" type="text" value="{{height}}" min="0"></input>
                    </div>
                </div> 
    
                <div>
                    <div class="form-group">
                        <label>Scale Width</label>
                        <div class="form-fields">
                            <input class="scaleX" type="range" value="{{scaleX}}" min="0.01" max="6" step="0.01">
                            <input name="scaleX" class="range-value" type="text" value="{{scaleX}}"></input>
                        </div>
                        <div class="scaleLock" style="flex: 0 !important;margin-left: 3px;"><a><i class="fas fa-link"></i></a></div>
                    </div>
    
                    <div class="form-group">
                        <label>Scale Height</label>
                        <div class="form-fields">
                            <input class="scaleY" type="range" value="{{scaleY}}" min="0.01" max="6" step="0.01">
                            <input name="scaleY" class="range-value" type="text" value="{{scaleY}}"></input>
                        </div>
                        <div class="scaleLock" style="flex: 0 !important;margin-left: 3px;"><a><i class="fas fa-link"></i></a></div>
                    </div>
                </div>
    
                <div class="form-group">
                    <label>Rotation</label>
                    <div class="form-fields">
                        <input type="range" value="{{angle}}" min="-360" max="360" step="1">
                        <input name="angle" class="range-value" type="text" value="{{angle}}"></input>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <legend>Positioning</legend>

                <button class="reticle" type="button">ASSISTED POSITIONING</button>

                <div class="form-group">
                    <label>Offset X <span class="units">(Pixels)</span></label>
                    <div class="form-fields">
                        <input name="pOffsetX" type="text" value="{{pOffsetX}}"></input>
                    </div>
                </div>

                <div class="form-group">
                    <label>Offset Y <span class="units">(Pixels)</span></label>
                    <div class="form-fields">
                        <input name="pOffsetY" type="text" value="{{pOffsetY}}"></input>
                    </div>
                </div>


                <div class="form-group">
                    <label>Offset X <span class="units">(Parent Scale)</span></label>
                    <div class="form-fields">
                        <input class="offsetX" type="range" value="{{offsetX}}" min="-3" max="3" step="0.01">
                        <input name="offsetX" type="text" class="range-value" value="{{offsetX}}"></input>
                    </div>
                    <p class="notes">Offset relative to parent width.</p>
                    <p class="notes">e.g. If you want the overlay positioned at the left edge of the parent, set it as "0.5" which is equivalent to "parent width * 0.5"</p>
                </div>

                <div class="form-group">
                    <label>Offset Y <span class="units">(Parent Scale)</span></label>
                    <div class="form-fields">
                        <input class="offsetY" type="range" value="{{offsetY}}" min="-3" max="3" step="0.01">
                        <input name="offsetY" type="text" class="range-value" value="{{offsetY}}"></input>
                    </div>
                    <p class="notes">Offset relative to parent height.</p>
                    <p class="notes">e.g. If you want the overlay positioned at the top of the parent, set it as "0.5" which is equivalent to "parent height * 0.5"</p>
                </div>

                <div class="form-group">
                    <label>Anchor</label>
                    <div class="form-fields">
                        <label>X</label>
                        <input name="anchor.x" type="number" step="any" value="{{anchor.x}}" min="0" max="1"></input>
                        <label>Y</label>
                        <input name="anchor.y" type="number" step="any" value="{{anchor.y}}" min="0" max="1"></input>
                    </div>
                    <p class="notes">Set the point on an overlay to be used to anchor it to the center of the parent.</p>
                </div>

            </fieldset>

            <img src="modules/token-variants/img/anchor_diagram.webp" width="200" height="200" style="margin: auto;display: block;border: none;"/>
        </div>

        <div class="tab active" data-group="main" data-tab="filter">
            <div class="form-group">
                <label>Filter</label>
                <div class="form-fields">
                <select name="filter">
                    {{#each filters as |filter|}}
                    <option value="{{filter}}" {{#if (eq ../filter filter)}}selected="selected"{{/if}}>{{filter}}</option>
                    {{/each}}
                </select>
                </div>
            </div>

            <div class="filterOptions">
                {{{filterOptions}}}
            </div>
        </div>

        <div class="tab active" data-group="main" data-tab="animation">
            <div class="form-group">
                <label>Rotate</label>
                <div class="form-fields">
                    <input type="checkbox" name="animation.rotate" data-dtype="Boolean" value="{{animation.rotate}}" {{#if animation.rotate}}checked{{/if}}>
                </div>
            </div>

            <div class="form-group">
                <label>Duration (ms)</label>
                <div class="form-fields">
                    <input type="range" value="{{animation.duration}}" min="100" max="30000" step="100">
                    <input name="animation.duration" class="range-value" type="text" value="{{animation.duration}}"></input>
                </div>
            </div>

            <div class="form-group">
                <label>Clockwise</label>
                <div class="form-fields">
                    <input type="checkbox" name="animation.clockwise" data-dtype="Boolean" value="{{animation.clockwise}}" {{#if animation.clockwise}}checked{{/if}}>
                </div>
            </div>
        </div>

        <div class="tab active" data-group="main" data-tab="visibility">
            <div class="form-group">
                <label>Always Visible</label>
                <div class="form-fields">
                    <input type="checkbox" name="alwaysVisible" data-dtype="Boolean" value="{{alwaysVisible}}" {{#if alwaysVisible}}checked{{/if}}>
                </div>
                <p class="notes">Overlay will be visible in explored areas of the map even when the Token is not.</p>
            </div>

            <div class="form-group">
                <label>Limit Visibility to Owner</label>
                <div class="form-fields">
                    <input type="checkbox" name="limitedToOwner" data-dtype="Boolean" value="{{limitedToOwner}}" {{#if limitedToOwner}}checked{{/if}}>
                </div>
            </div>
  
            <fieldset>
                <legend>Limit Visibility to Users</legend>
                {{#each users as |user|}}
                <div class="form-group">
                    <label>{{user.name}}</label>
                    <div class="form-fields">
                        <input type="checkbox" name="limitedUsers" data-dtype="String" value="{{user.id}}" {{#if user.selected}}checked{{/if}}>
                    </div>
                </div>
                {{/each}}
            </fieldset>

            <fieldset>
                <legend>Limit Visibility to State</legend>
                <div class="form-group">
                    <label>Hover</label>
                    <div class="form-fields">
                        <input type="checkbox" name="limitOnHover" data-dtype="Boolean" value="{{limitOnHover}}" {{#if limitOnHover}}checked{{/if}}>
                    </div>
                </div>
                <div class="form-group">
                    <label>Highlight</label>
                    <div class="form-fields">
                        <input type="checkbox" name="limitOnHighlight" data-dtype="Boolean" value="{{limitOnHighlight}}" {{#if limitOnHighlight}}checked{{/if}}>
                    </div>
                </div>
                <div class="form-group">
                    <label>Control</label>
                    <div class="form-fields">
                        <input type="checkbox" name="limitOnControl" data-dtype="Boolean" value="{{limitOnControl}}" {{#if limitOnControl}}checked{{/if}}>
                    </div>
                </div>
                <div class="form-group">
                    <label>HUD</label>
                    <div class="form-fields">
                        <input type="checkbox" name="limitOnHUD" data-dtype="Boolean" value="{{limitOnHUD}}" {{#if limitOnHUD}}checked{{/if}}>
                    </div>
                </div>
                <div class="form-group">
                    <label>Target</label>
                    <div class="form-fields">
                        <label>User</label>
                        <input type="checkbox" name="limitOnTarget" data-dtype="Boolean" value="{{limitOnTarget}}" {{#if limitOnTarget}}checked{{/if}}>
                        <label>Any</label>
                        <input type="checkbox" name="limitOnAnyTarget" data-dtype="Boolean" value="{{limitOnAnyTarget}}" {{#if limitOnAnyTarget}}checked{{/if}}>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <legend>Limit Visibility to Token With Effect</legend>
                <div class="form-group">
                    <label>Effect Name</label>
                    <div class="form-fields">
                        <input type="text" name="limitOnEffect" value="{{limitOnEffect}}" placeholder="Reveal: Overlay">
                    </div>
                    <p class="notes">Overlay will only be visible to Tokens with this effect applied to them.</p>
                </div>
            </fieldset>

            <fieldset>
                <legend>Limit Visibility to Token With Property</legend>
                <div class="form-group">
                    <label>Expression</label>
                    <div class="form-fields">
                        <input type="text" name="limitOnProperty" value="{{limitOnProperty}}" placeholder="actor.system.attributes.senses.truesight>0">
                    </div>
                    <p class="notes">Overlay will only be visible to Tokens that satisfy this expression.</p>
                    <p class="notes"> e.g. 
                        <br>actor.system.attributes.senses.truesight>0 
                        <br> actor.system.skills.prc.passive>=15
                        <br>hp&lt;=50%</p>
                </div>
            </fieldset>
        </div>

        <div class="tab active" data-group="main" data-tab="text">
            <div class="form-group">
                <label>Text</label>
                <div class="form-fields">
                    <input class="text-field" type="text" name="text.text" value="{{text.text}}">
                </div>
                <p class="notes">For this text to show make sure that no image is assigned to this overlay.</p>
                <p class="notes">Token attributes can be inserted as so: <b>&#123;&#123;name&#125;&#125;</b></p>
            </div>

            {{~>modules/token-variants/templates/partials/repeating.html repeating=text.repeating root="text." repeat=text.repeat}}

            <div class="form-group">
                <label>{{localize "DRAWING.FontFamily"}}</label>
                <div class="form-fields">
                    <select name="text.fontFamily">
                    {{#each fonts as |font|}}
                    <option value="{{font}}" {{#if (eq ../text.fontFamily font)}}selected="selected"{{/if}}>{{font}}</option>
                    {{/each}}
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label>{{localize "DRAWING.FillColor"}}</label>
                <div class="form-fields">
                    {{ colorPicker name="text.fill" value=text.fill }}
                </div>
            </div>

            {{~>modules/token-variants/templates/partials/interpolateColor.html root="text." interpolateColor=text.interpolateColor label="Fill Color"}}
            
            <div class="form-group">
                <label>Font Size</label>
                <div class="form-fields">
                    <input type="range" value="{{text.fontSize}}" min="24" max="100" step="1">
                    <input name="text.fontSize" class="range-value" type="text" value="{{text.fontSize}}"></input>
                </div>
            </div>
            <div class="form-group">
                <label>Align</label>
                <div class="form-fields">
                <select name="text.align">
                    {{#each textAlignmentOptions as |option|}}
                    <option value="{{option.value}}" {{#if (eq ../text.align option.value)}}selected="selected"{{/if}}>{{option.label}}</option>
                    {{/each}}
                </select>
                </div>
            </div>
            <div class="form-group">
                <label>Letter Spacing <span class="units">(Pixels)</span></label>
                <div class="form-fields">
                    <input type="range" value="{{text.letterSpacing}}" min="0" max="25" step="0.1">
                    <input name="text.letterSpacing" class="range-value" type="text" value="{{text.letterSpacing}}"></input>
                </div>
            </div>
            <div class="form-group">
                <label>Shadow</label>
                <div class="form-fields">
                    <input type="checkbox" name="text.dropShadow" data-dtype="String" value="{{text.dropShadow}}" {{#if text.dropShadow}}checked{{/if}}>
                </div>
            </div>
            <div class="form-group">
                <label>Stroke Thickness</label>
                <div class="form-fields">
                    <input type="range" value="{{text.strokeThickness}}" min="0" max="25" step="1">
                    <input name="text.strokeThickness" class="range-value" type="text" value="{{text.strokeThickness}}"></input>
                </div>
            </div>
            <div class="form-group">
                <label>Stroke Color</label>
                <div class="form-fields">
                    <input class="color" type="text" name="text.stroke" value="{{text.stroke}}">
                    <input type="color" value="{{text.stroke}}" data-edit="text.stroke">
                </div>
            </div>

            <fieldset>
                <legend>Wrapping</legend>

                <div class="form-group">
                    <label>Enabled</label>
                    <div class="form-fields">
                        <input type="checkbox" name="text.wordWrap" data-dtype="Boolean" {{#if text.wordWrap}}checked{{/if}}>
                    </div>
                </div>
    
                <div class="form-group">
                    <label>Word Wrap Width <span class="units">(Pixels)</span></label>
                    <div class="form-fields">
                        <input type="range" value="{{text.wordWrapWidth}}" min="0" max="1000" step="5">
                        <input name="text.wordWrapWidth" class="range-value" type="text" value="{{text.wordWrapWidth}}"></input>
                    </div>
                </div>
    
                <div class="form-group">
                    <label>Break Words</label>
                    <div class="form-fields">
                        <input type="checkbox" name="text.breakWords" data-dtype="Boolean" {{#if text.breakWords}}checked{{/if}}>
                    </div>
                </div>

                <div class="form-group">
                    <label>Max Height <span class="units">(Pixels)</span></label>
                    <div class="form-fields">
                        <input type="range" value="{{text.maxHeight}}" min="0" max="1000" step="5">
                        <input name="text.maxHeight" class="range-value" type="text" value="{{text.maxHeight}}"></input>
                    </div>
                </div>
            </fieldset>


            <h2>Curve</h2>

            <p class="notes">Curve the text either by defining an angle it should bend by or a radius of an imaginary circle whose edge the text should sit on. </p>

            <div class="form-group">
                <label>Angle <span class="units">(Degrees)</span></label>
                <div class="form-fields">
                    <input type="range" value="{{text.curve.angle}}" min="0" max="360" step="0.5">
                    <input name="text.curve.angle" class="range-value" type="text" value="{{text.curve.angle}}"></input>
                </div>
            </div>


            <div class="form-group">
                <label>Radius <span class="units">(Pixels)</span></label>
                <div class="form-fields">
                    <input type="range" value="{{text.curve.radius}}" min="0" max="450" step="5">
                    <input name="text.curve.radius" class="range-value" type="text" value="{{text.curve.radius}}"></input>
                </div>
            </div>

            <div class="form-group">
                <label>Invert</label>
                <div class="form-fields">
                    <input type="checkbox" name="text.curve.invert" data-dtype="Boolean" {{#if text.curve.invert}}checked{{/if}}>
                </div>
            </div>
        </div>
        <div class="tab" data-group="main" data-tab="shapes">

            <div class="form-group">
                <label>Shape</label>
                <div class="form-fields">
                <select>
                    {{#each allShapes as |shape|}}
                    <option value="{{shape}}">{{shape}}</option>
                    {{/each}}
                </select>
                <button class="addShape" type="button">Add</button>
                </div>
            </div>

            {{#each shapes as |shape|}}
            <hr><hr>

            {{#if (eq shape.shape.type "rectangle")}}
                {{~>modules/token-variants/templates/partials/shapeRectangle.html shape}}
            {{else if (eq shape.shape.type "ellipse")}}
                {{~>modules/token-variants/templates/partials/shapeEllipse.html shape}}
            {{else if (eq shape.shape.type "polygon")}}
                {{~>modules/token-variants/templates/partials/shapePolygon.html shape}}
            {{else if (eq shape.shape.type "torus")}}
                {{~>modules/token-variants/templates/partials/shapeTorus.html shape}}
            {{/if}}

            <fieldset>
                <legend>Line Style</legend>
                <div class="form-group">
                    <label>Width</label>
                    <div class="form-fields">
                        <input type="range" value="{{shape.line.width}}" min="0" max="100" step="1">
                        <input name="shapes.{{@index}}.line.width" class="range-value" type="text" value="{{shape.line.width}}"></input>
                    </div>
                </div>
                <div class="form-group">
                    <label>Color</label>
                    <div class="form-fields">
                        {{ colorPicker name=(concat "shapes." @index ".line.color") value=shape.line.color }}
                    </div>
                </div>
                <div class="form-group">
                    <label>Opacity</label>
                    <div class="form-fields">
                        <input type="range" value="{{shape.line.alpha}}" min="0" max="1" step="0.05">
                        <input name="shapes.{{@index}}.line.alpha" class="range-value" type="text" value="{{shape.line.alpha}}"></input>
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>Fill</legend>
                <div class="form-group">
                    <label>Color</label>
                    <div class="form-fields">
                        {{ colorPicker name=(concat "shapes." @index ".fill.color") value=shape.fill.color }}
                    </div>
                </div>

                <div class="form-group">
                    <label>Opacity</label>
                    <div class="form-fields">
                        <input type="range" value="{{shape.fill.alpha}}" min="0" max="1" step="0.05">
                        <input name="shapes.{{@index}}.fill.alpha" class="range-value" type="text" value="{{shape.fill.alpha}}"></input>
                    </div>
                </div>

                {{~>modules/token-variants/templates/partials/interpolateColor.html root=(concat "shapes." @index ".fill.") interpolateColor=shape.fill.interpolateColor label="Color"}}

            </fieldset>

            {{~>modules/token-variants/templates/partials/repeating.html repeating=shape.repeating root=(concat "shapes." @index ".") repeat=shape.repeat padding="true"}}

            <hr><hr>
            {{/each}}
        </div>
    </div>

    <div class="tab" data-group="main" data-tab="variables">
        <p class="notes">Define variables that you can insert into any overlay field. Useful when you have a constant value you want to re-use; for example multiple shapes that all share the same width</p>
        <p class="notes">e.g. @shapeWidth</p>
        <table>
            <tr>
                <th></th>
                <th>Name</th><th>Value</th>
                <th><a class="create-variable" title="Add a new variable."><i class="fas fa-plus"></i></a></th>
            </tr>
        {{#each variables as |variable|}}
        <tr data-index="{{@index}}">
            <td>@</td>
            <td><input type="text" name="variables.{{@index}}.name" value="{{variable.name}}"></td>
            <td><input type="text" name="variables.{{@index}}.value" value="{{variable.value}}"></td>
            <td> <a class="delete-variable" title="Delete variable."><i class="fa-solid fa-trash"></i></a></td>
        </tr>
        {{/each}}
        </table>
    </div>

    </section>

    <input type="hidden" name="effect" value="{{effect}}">

    <footer class="sheet-footer flexrow">
        <button type="submit"><i class="far fa-save"></i>{{localize "token-variants.common.apply"}}</button>
    </footer>
</form>