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

<form>
    <!-- Navigation Tabs -->
    <nav class="sheet-tabs tabs tva-setting-nav" data-group="primary-tabs">
      {{#if enabledTabs.searchPaths}}<a class="item" data-tab="searchPaths"><i class="fas fa-search"></i> Search Paths</a>{{/if}}
      {{#if enabledTabs.searchFilters}}<a class="item" data-tab="searchFilters"><i class="fas fa-filter"></i> Search Filters</a>{{/if}}
      {{#if enabledTabs.searchAlgorithm}}<a class="item" data-tab="searchAlgorithm"><i class="fas fa-plug"></i> Search Algorithm</a>{{/if}}
      {{#if enabledTabs.randomizer}}<a class="item" data-tab="randomizer"><i class="fas fa-dice"></i> Randomizer</a>{{/if}}
      {{#if enabledTabs.features}}<a class="item" data-tab="features"><i class="fas fa-power-off"></i> Features</a>{{/if}}
      <hr>
      {{#if enabledTabs.popup}}<a class="item" data-tab="popup"><i class="fas fa-book-open"></i> Pop-up</a>{{/if}}
      {{#if enabledTabs.permissions}}<a class="item" data-tab="permissions"><i class="fas fa-user-lock"></i> Permissions</a>{{/if}}
      {{#if enabledTabs.worldHud}}<a class="item" data-tab="worldHud"><i class="fas fa-images"></i> Token HUD</a>{{/if}}
      {{#if enabledTabs.activeEffects}}<a class="item" data-tab="activeEffects"><i class="fas fa-sun"></i> Effects</a>{{/if}}
      {{#if enabledTabs.misc}}<a class="item" data-tab="misc"><i class="fas fa-bars"></i> Misc</a>{{/if}}
    </nav>

    <!-- Main Content Section -->
    <section class="content">
        <!-- SEARCH PATHS -->
        {{#if enabledTabs.searchPaths}}
        <div class="tab" data-tab="searchPaths" data-group="primary-tabs">
            <ol class="token-variant-table">
                <li class="table-row table-header flexrow">
                  <div class="path-image">
                    <a class="create-path" title="Add new path"><i class="fas fa-plus"></i></a>
                  </div>
                  <div class="path-source"><label>Source</label></div>
                  <div class="path-text"><label>Path</label></div>
                  <div class="path-category"><label>Category</label></div>
                  <div class="path-config"><label>Config</label></div>
                  <div class="path-cache"><label>Cache</label></div>
                  <div class="path-controls"></div>
                </li>
          
                {{#each searchPaths as |path index|}}
                <li class="table-row flexrow">
                  <div class="path-image source-icon">
                    <a><i class="{{path.icon}}"></i></a>
                  </div>
                  <div class="path-source">
                    <input class="searchSource" type="text" name="searchPaths.{{index}}.source" value="{{path.source}}" placeholder="data"/>
                  </div>
                  <div class="path-text">
                    <input class="searchPath" type="text" name="searchPaths.{{index}}.text" value="{{path.text}}" placeholder="Path to folder"/>
                  </div>
                  <div class="imgur-control {{#if (eq path.source 'imgur')}}active{{/if}}">
                    <a class="convert-imgur" title="Convert to Rolltable">
                        <i class="fas fa-angle-double-left"></i>
                    </a>
                  </div>
                  <div class="json-control {{#if (eq path.source 'json')}}active{{/if}}">
                    <a class="convert-json" title="Convert to Rolltable">
                        <i class="fas fa-angle-double-left"></i>
                    </a>
                  </div>
                  <div class="path-category">
                    <a class="select-category" title="Select image categories/filters"><i class="fas fa-swatchbook"></i></a>
                    <input type="hidden" name="searchPaths.{{index}}.types" value="{{path.types}}">
                  </div>
                  <div class="path-config">
                    <a class="select-config {{#if path.hasConfig}}active{{/if}}" title="Apply token configuration to images under this path."><i class="fas fa-cog fa-lg"></i></a>
                    <input type="hidden" name="searchPaths.{{index}}.config" value="{{path.config}}">
                  </div>
                  <div class="path-cache">
                    <input type="checkbox" name="searchPaths.{{index}}.cache" data-dtype="Boolean" {{#if path.cache}}checked{{/if}}/>
                  </div>
                  <div class="path-controls">
                    <a class="delete-path" title="Delete path"><i class="fas fa-trash"></i></a>
                  </div>
                </li>
                {{/each}}
              </ol>

              <p class="notes">
                <b>Formats:</b><br />
                <span>Note: the path start from the 'data' folder of Foundry by default<span><br />
                data | path/to/folder<br />
                s3:my_bucket | token/art/folder/<br />
                rolltable | rolltableName<br />
                json | path/to/folder/data.json<br />
                imgur | galleryId
              </p>
        </div>
        {{/if}}
        <!-- SEARCH FILTERS -->
        {{#if enabledTabs.searchFilters}}
        <div class="tab" data-tab="searchFilters" data-group="primary-tabs">
          <p class="notes">Define filters for each image category. Images will be limited to files that include/exclude these pieces of text or match a regular expression.</p>

          <hr>

          {{#each searchFilters}}
          <label><b>{{this.label}}</b></label>
          <div class="form-group">
            <label>{{localize "token-variants.common.include"}}</label>
            <div class="form-fields">
                <input type="text" name="searchFilters.{{@key}}.include" value="{{this.include}}" data-dtype="String">
            </div>
            &nbsp;&nbsp;
            <label>{{localize "token-variants.common.exclude"}}</label>
            <div class="form-fields">
                <input type="text" name="searchFilters.{{@key}}.exclude" value="{{this.exclude}}" data-dtype="String">
            </div>
            &nbsp;&nbsp;
            <label>RegEx</label>
            <div class="form-fields">
                <input class="filterRegex" type="text" name="searchFilters.{{@key}}.regex" value="{{this.regex}}" data-dtype="String">
            </div>
          </div>
          <hr />
          {{/each}}
        </div>
        {{/if}}

        <!-- SEARCH ALGORITHM -->
        {{#if enabledTabs.searchAlgorithm}}
        <div class="tab" data-tab="searchAlgorithm" data-group="primary-tabs">
          <div class="form-group">
            <label>{{localize "token-variants.settings.keywords-search.Name"}}</label>
            <div class="form-fields">
              <input type="checkbox" name="keywordSearch" data-dtype="Boolean" {{#if keywordSearch}}checked{{/if}}>
            </div>
            <p class="notes">{{localize "token-variants.settings.keywords-search.Hint"}}</p>
          </div>

          <div class="form-group">
            <label>{{localize "token-variants.settings.excluded-keywords.Name"}}</label>
            <div class="form-fields">
              <input type="text" name="excludedKeywords" data-dtype="String" value="{{excludedKeywords}}">
            </div>
            <p class="notes">{{localize "token-variants.settings.excluded-keywords.Hint"}}</p>
          </div>

          <div class="form-group">
            <label>{{localize "token-variants.settings.run-search-on-path.Name"}}</label>
            <div class="form-fields">
              <input type="checkbox" name="runSearchOnPath" data-dtype="Boolean" {{#if runSearchOnPath}}checked{{/if}}>
            </div>
            <p class="notes">{{localize "token-variants.settings.run-search-on-path.Hint"}}</p>
          </div>

          <fieldset>
            <legend>Search Method</legend>

            <fieldset>
              <legend>{{localize "token-variants.common.exact"}}</legend>
           
              <div class="form-group">
                <label>{{localize "token-variants.common.enable"}}</label>
                <input type="checkbox" name="algorithm.exact" data-dtype="Boolean" {{#if algorithm.exact}}checked{{/if}}>
                <p class="notes">{{localize "token-variants.settings.algorithm.window.exact-hint"}}</p>
              </div>
            </fieldset>
        
            <br>

            <fieldset>
              <legend>{{localize "token-variants.common.fuzzy"}}</legend>

              <div class="form-group">
                <label>{{localize "token-variants.common.enable"}}</label>
                <input type="checkbox" name="algorithm.fuzzy" data-dtype="Boolean" {{#if algorithm.fuzzy}}checked{{/if}}>
                <p class="notes">{{localize "token-variants.settings.algorithm.window.fuzzy-hint"}}</p>
              </div>
            
              <div class="form-group">
                <label>{{localize "token-variants.settings.algorithm.window.percentage-match.Name"}}</label>
                <input
                  type="range"
                  name="algorithm.fuzzyThreshold"
                  data-dtype="Number"
                  value="{{algorithm.fuzzyThreshold}}"
                  min="0"
                  max="100"
                  step="1"
                />
                <span class="token-variants-range-value">{{algorithm.fuzzyThreshold}}%</span>
                <p class="notes">
                  {{localize "token-variants.settings.algorithm.window.percentage-match.Hint"}}
                </p>
              </div>
        
              <div class="form-group">
                <label>{{localize "token-variants.settings.algorithm.window.art-select-slider.Name"}}</label>
                <input type="checkbox" name="algorithm.fuzzyArtSelectPercentSlider" data-dtype="Boolean" {{#if
                  algorithm.fuzzyArtSelectPercentSlider}}checked{{/if}}>
                <p class="notes">
                  {{localize "token-variants.settings.algorithm.window.art-select-slider.Hint"}}
                </p>
              </div>
        
              <div class="form-group">
                <label>{{localize "token-variants.common.limit"}}</label>
                <input
                  type="text"
                  name="algorithm.fuzzyLimit"
                  value="{{algorithm.fuzzyLimit}}"
                  placeholder="1"
                  data-dtype="Number"
                />
                <p class="notes">{{localize "token-variants.settings.algorithm.window.limit-hint"}}</p>
              </div>
            </fieldset>
          </fieldset>
        </div>
        {{/if}}

        <!-- Randomizer -->
        {{#if enabledTabs.randomizer}}
        <div class="tab" data-tab="randomizer" data-group="primary-tabs">
            <h2>{{localize "token-variants.common.randomize"}}</h2>

            <div class="form-group">
              <label>
                {{localize "token-variants.settings.randomizer.window.portrait-image-on-actor-create"}}
              </label>
              <input type="checkbox" name="randomizer.actorCreate" data-dtype="Boolean" {{#if randomizer.actorCreate}}checked{{/if}}>
            </div>
          
            <hr />
          
            <div class="form-group">
              <label>
                {{localize "token-variants.settings.randomizer.window.token-image-on-token-create"}}
              </label>
              <input type="checkbox" name="randomizer.tokenCreate" data-dtype="Boolean" {{#if randomizer.tokenCreate}}checked{{/if}}>
            </div>
          
            <div class="form-group">
              <label>
                {{localize "token-variants.settings.randomizer.window.token-image-on-token-copy-paste"}}
              </label>
              <input type="checkbox" name="randomizer.tokenCopyPaste" data-dtype="Boolean" {{#if randomizer.tokenCopyPaste}}checked{{/if}}>
            </div>
          
            <div class="form-group">
              <label>&nbsp;&nbsp;&nbsp;&nbsp; {{localize "token-variants.settings.randomizer.window.token-to-portrait"}}</label>
              <input type="checkbox" name="randomizer.tokenToPortrait" data-dtype="Boolean" {{#if randomizer.tokenToPortrait}}checked{{/if}} {{#if randomizer.tokenToPortraitDisabled}}disabled{{/if}}>
            </div>
          
            <hr />
          
            <div class="form-group">
              <label>{{localize "token-variants.settings.randomizer.window.different-images"}}</label>
              <input type="checkbox" name="randomizer.diffImages" data-dtype="Boolean" {{#if randomizer.diffImages}}checked{{/if}}>
            </div>
          
            <div class="form-group">
              <label>&nbsp;&nbsp;&nbsp;&nbsp; {{localize "token-variants.settings.randomizer.window.sync-images"}}</label>
              <input type="checkbox" name="randomizer.syncImages" data-dtype="Boolean" {{#if randomizer.syncImages}}checked{{/if}} {{#unless randomizer.diffImages}}disabled{{/unless}}>
            </div>
          
            <h2>{{localize "token-variants.settings.randomizer.window.search-types-heading"}}</h2>
          
            <div class="form-group">
              <label>{{localize "token-variants.common.name"}}</label>
              <input type="checkbox" name="randomizer.tokenName" data-dtype="Boolean" {{#if randomizer.tokenName}}checked{{/if}}>
            </div>
          
            <div class="form-group">
              <label>{{localize "token-variants.common.keywords"}}</label>
              <input type="checkbox" name="randomizer.keywords" data-dtype="Boolean" {{#if randomizer.keywords}}checked{{/if}}>
            </div>
          
            <div class="form-group">
              <label>{{localize "token-variants.common.shared"}} <i class="fas fa-share"></i></label>
              <input type="checkbox" name="randomizer.shared" data-dtype="Boolean" {{#if randomizer.shared}}checked{{/if}}>
            </div>

            <div class="form-group">
              <label>Wildcard *</label>
              <input type="checkbox" name="randomizer.wildcard" data-dtype="Boolean" {{#if randomizer.wildcard}}checked{{/if}}>
            </div>
          
            <h2>{{localize "token-variants.settings.randomizer.window.disable-for"}}</h2>
          
            <div class="form-group">
              <label>&nbsp;&nbsp;&nbsp;&nbsp;{{localize "token-variants.settings.randomizer.window.tokens-with-represented-actor"}}</label>
              <input type="checkbox" name="randomizer.representedActorDisable" data-dtype="Boolean" {{#if randomizer.representedActorDisable}}checked{{/if}}>
            </div>
          
            <div class="form-group">
              <label>&nbsp;&nbsp;&nbsp;&nbsp;{{localize "token-variants.settings.randomizer.window.tokens-with-linked-actor-data"}}</label>
              <input type="checkbox" name="randomizer.linkedActorDisable" data-dtype="Boolean" {{#if randomizer.linkedActorDisable}}checked{{/if}}>
            </div>
          
            <hr />
          
            <h3>Actor Types</h3>
          
            {{#each randomizer.actorTypes}}
            <div class="form-group">
              <label>&nbsp;&nbsp;&nbsp;&nbsp;{{this.label}}</label>
              <input type="checkbox" name="randomizer.{{@key}}Disable" data-dtype="Boolean" {{#if this.disable}}checked{{/if}}>
            </div>
            {{/each}}
          
            <hr />
          
            <div class="form-group">
              <h4>{{localize "token-variants.settings.randomizer.window.pop-up-if-randomization-disabled"}}</h4>
              <input type="checkbox" name="randomizer.popupOnDisable" data-dtype="Boolean" {{#if randomizer.popupOnDisable}}checked{{/if}}>
            </div>
        </div>
        {{/if}}

        <!-- Features -->
        {{#if enabledTabs.features}}
        <div class="tab token-variants-permissions" data-tab="features" data-group="primary-tabs">
          <p class="notes">Fully turn-off module features.</p>

          <header class="table-header flexrow">
            <label class="index">Features</label>
            <label>Enabled</label>
          </header>
        
          <ul class="permissions-list">
            <li class="permission form-group">
              <label class="index">Effect Mappings</label>
              <div class="form-fields">
                <input type="checkbox" name="features.EffectMappings" {{ checked features.EffectMappings}} />
              </div>
              <p class="hint"></p>
            </li>
            <li class="permission form-group">
              <label class="index">Overlays</label>
              <div class="form-fields">
                <input type="checkbox" name="features.Overlays" {{ checked features.Overlays}} />
              </div>
              <p class="hint"></p>
            </li>
          </ul>
        </div>
        {{/if}}

        <!-- Pop-up -->
        {{#if enabledTabs.popup}}
        <div class="tab token-variants-popup-settings" data-tab="popup" data-group="primary-tabs">
          <div class="form-group">
            <label>{{localize "token-variants.settings.pop-up.window.two-pop-ups.Name"}}</label>
            <input type="checkbox" name="popup.twoPopups" data-dtype="Boolean" {{#if popup.twoPopups}}checked{{/if}}>
            <p class="notes">{{localize "token-variants.settings.pop-up.window.two-pop-ups.Hint"}}</p>
          </div>
        
          <div class="form-group">
            <label>{{localize "token-variants.settings.pop-up.window.no-dialog.Name"}}</label>
            <input type="checkbox" name="popup.twoPopupsNoDialog" data-dtype="Boolean" {{#if popup.twoPopupsNoDialog}}checked{{/if}}>
            <p class="notes">{{localize "token-variants.settings.pop-up.window.no-dialog.Hint"}}</p>
          </div>
        
          <div class="form-group">
            <label>{{localize "token-variants.settings.pop-up.window.disable-automatic-pop-ups-for"}}</label>
          </div>
        
          {{#each popup.actorTypes}}
          <header class="table-header flexrow">
            {{#each this}}
            <label>{{this.label}}</label>
            {{/each}}
          </header>
          <ul class="setting-list">
            <li class="setting form-group">
              <div class="form-fields">
                {{#each this}} <input type="checkbox" name="popup.{{this.type}}Disable" data-dtype="Boolean" {{#if
                  this.disable}}checked{{/if}}> {{/each}}
              </div>
            </li>
          </ul>
          {{/each}}
        
          <header class="table-header flexrow">
            <label class="index">{{localize "token-variants.settings.pop-up.window.on-actor-create"}}</label>
            <label>{{localize "token-variants.settings.pop-up.window.on-token-create"}}</label>
            <label>{{localize "token-variants.settings.pop-up.window.on-token-copy-paste"}}</label>
          </header>
          <ul class="setting-list">
            <li class="setting form-group">
              <div class="form-fields">
                <input type="checkbox" name="popup.disableAutoPopupOnActorCreate" data-dtype="Boolean" {{#if popup.disableAutoPopupOnActorCreate}}checked{{/if}}>
                <input type="checkbox" name="popup.disableAutoPopupOnTokenCreate" data-dtype="Boolean" {{#if popup.disableAutoPopupOnTokenCreate}}checked{{/if}}>
                <input type="checkbox" name="popup.disableAutoPopupOnTokenCopyPaste" data-dtype="Boolean" {{#if popup.disableAutoPopupOnTokenCopyPaste}}checked{{/if}}>
              </div>
            </li>
          </ul>
        </div>
        {{/if}}

        <!-- Permissions -->
        {{#if enabledTabs.permissions}}
        <div class="tab token-variants-permissions" data-tab="permissions" data-group="primary-tabs">
          <p class="notes">Configure which User role has permission to access which module features.</p>

          <header class="table-header flexrow">
            <label class="index">Features</label>
            <label>Player</label>
            <label>Trusted Player</label>
            <label>Assistant GM</label>
            <label>Game Master</label>
          </header>
        
          <ul class="permissions-list">
            <li class="permission form-group">
              <label class="index">Automatic Pop-ups</label>
              <div class="form-fields">
                <input type="checkbox" name="permissions.popups.1" {{#if permissions.popups.[1]}}checked{{/if}} />
                <input type="checkbox" name="permissions.popups.2" {{#if permissions.popups.[2]}}checked{{/if}} />
                <input type="checkbox" name="permissions.popups.3" {{#if permissions.popups.[3]}}checked{{/if}} />
                <input type="checkbox" name="permissions.popups.4" {{#if permissions.popups.[4]}}checked{{/if}} />
              </div>
              <p class="hint">Allow players with this role to be shown automatic Art Select pop-ups.</p>
            </li>
        
            <li class="permission form-group">
              <label class="index">Portrait/Icon Right-click</label>
              <div class="form-fields">
                <input type="checkbox" name="permissions.portrait_right_click.1" {{#if permissions.portrait_right_click.[1]}}checked{{/if}} />
                <input type="checkbox" name="permissions.portrait_right_click.2" {{#if permissions.portrait_right_click.[2]}}checked{{/if}} />
                <input type="checkbox" name="permissions.portrait_right_click.3" {{#if permissions.portrait_right_click.[3]}}checked{{/if}} />
                <input type="checkbox" name="permissions.portrait_right_click.4" {{#if permissions.portrait_right_click.[4]}}checked{{/if}} />
              </div>
              <p class="hint">Allow players with this role to open Art Select windows via Right-click of images on various forms.</p>
            </li>
        
            <li class="permission form-group">
              <label class="index">Art Select Buttons</label>
              <div class="form-fields">
                <input type="checkbox" name="permissions.image_path_button.1" {{#if permissions.image_path_button.[1]}}checked{{/if}} />
                <input type="checkbox" name="permissions.image_path_button.2" {{#if permissions.image_path_button.[2]}}checked{{/if}} />
                <input type="checkbox" name="permissions.image_path_button.3" {{#if permissions.image_path_button.[3]}}checked{{/if}} />
                <input type="checkbox" name="permissions.image_path_button.4" {{#if permissions.image_path_button.[4]}}checked{{/if}} />
              </div>
              <p class="hint">Allow players with this role to open the Art Select windows via buttons inserted into various forms.</p>
            </li>
        
            <li class="permission form-group">
              <label class="index">Token HUD button</label>
              <div class="form-fields">
                <input type="checkbox" name="permissions.hud.1" {{#if permissions.hud.[1]}}checked{{/if}} />
                <input type="checkbox" name="permissions.hud.2" {{#if permissions.hud.[2]}}checked{{/if}} />
                <input type="checkbox" name="permissions.hud.3" {{#if permissions.hud.[3]}}checked{{/if}} />
                <input type="checkbox" name="permissions.hud.4" {{#if permissions.hud.[4]}}checked{{/if}} />
              </div>
              <p class="hint">Allow players with this role access to the Token HUD button (Shared and Wildcard art only)</p>
            </li>
        
            <li class="permission form-group">
              <label class="index">Token HUD button FULL ACCESS</label>
              <div class="form-fields">
                <input type="checkbox" name="permissions.hudFullAccess.1" {{#if permissions.hudFullAccess.[1]}}checked{{/if}} />
                <input type="checkbox" name="permissions.hudFullAccess.2" {{#if permissions.hudFullAccess.[2]}}checked{{/if}} />
                <input type="checkbox" name="permissions.hudFullAccess.3" {{#if permissions.hudFullAccess.[3]}}checked{{/if}} />
                <input type="checkbox" name="permissions.hudFullAccess.4" {{#if permissions.hudFullAccess.[4]}}checked{{/if}} />
              </div>
              <p class="hint">Allow players with this role unrestricted access to all art via the Token HUD button</p>
            </li>

            <li class="permission form-group">
              <label class="index">Status Config</label>
              <div class="form-fields">
                <input type="checkbox" name="permissions.statusConfig.1" {{#if permissions.statusConfig.[1]}}checked{{/if}} />
                <input type="checkbox" name="permissions.statusConfig.2" {{#if permissions.statusConfig.[2]}}checked{{/if}} />
                <input type="checkbox" name="permissions.statusConfig.3" {{#if permissions.statusConfig.[3]}}checked{{/if}} />
                <input type="checkbox" name="permissions.statusConfig.4" {{#if permissions.statusConfig.[4]}}checked{{/if}} />
              </div>
              <p class="hint">Allow players with this role to configure image mappings to status effects, visibility and combat states. ('Use File Browser' or 'Token Configuration Art Select' required to select images)</p>
            </li>
          </ul>
        </div>
        {{/if}}

        <!-- World HUD -->
        {{#if enabledTabs.worldHud}}
        <div class="tab" data-tab="worldHud" data-group="primary-tabs">
          <h2>World Settings</h2>

          <div class="form-group">
            <label
              >{{localize "token-variants.settings.token-hud.window.display-shared-only.Name"}}
              <i class="fas fa-share"></i
            ></label>
            <div class="form-fields">
              <input type="checkbox" name="worldHud.displayOnlySharedImages" data-dtype="Boolean" {{#if worldHud.displayOnlySharedImages}}checked{{/if}}>
            </div>
            <p class="notes">
              {{localize "token-variants.settings.token-hud.window.display-shared-only.Hint"}}
            </p>
          </div>
        
          <div class="form-group">
            <label> {{localize "token-variants.settings.compendium-mapper.window.include-keywords"}}</label>
            <div class="form-fields">
              <input type="checkbox" name="worldHud.includeKeywords" data-dtype="Boolean" {{#if worldHud.includeKeywords}}checked{{/if}}>
            </div>
          </div>

          <div class="form-group">
            <label>{{localize "token-variants.settings.token-hud.window.include-wildcard.Name"}}</label>
            <div class="form-fields">
              <input type="checkbox" name="worldHud.includeWildcard" data-dtype="Boolean" {{#if worldHud.includeWildcard}}checked{{/if}}>
            </div>
            <p class="notes">
              {{localize "token-variants.settings.token-hud.window.include-wildcard.Hint"}}
            </p>
          </div>

          <div class="form-group">
            <label>Show full path on hover</label>
            <div class="form-fields">
              <input type="checkbox" name="worldHud.showFullPath" data-dtype="Boolean" {{#if worldHud.showFullPath}}checked{{/if}}>
            </div>
            <p class="notes">
              When hovering over images instead of the file name full file path will be shown.
            </p>
          </div>
        
          <hr/>
        
          <div class="form-group">
            <label>{{localize "token-variants.settings.token-hud.window.update-actor-image.Name"}}</label>
            <div class="form-fields">
              <input type="checkbox" name="worldHud.updateActorImage" data-dtype="Boolean" {{#if worldHud.updateActorImage}}checked{{/if}}>
            </div>
            <p class="notes">
              {{localize "token-variants.settings.token-hud.window.update-actor-image.Hint"}}
            </p>
          </div>
        
          <div class="form-group">
            <label>Use a similarly named file</label>
            <div class="form-fields">
              <input type="checkbox" name="worldHud.useNameSimilarity" data-dtype="Boolean" {{#if worldHud.useNameSimilarity}}checked{{/if}} {{#unless worldHud.updateActorImage}}disabled{{/unless}}>
            </div>
            <p class="notes">
              Instead of using the same image for the portrait the module will perform a Portrait image search and attempt to find a similarly named image.
            </p>
          </div>

          <div class="form-group">
            <label>Token Animation</label>
            <div class="form-fields">
              <input type="checkbox" name="worldHud.animate" data-dtype="Boolean" {{checked worldHud.animate}}>
            </div>
            <p class="notes">Apply core foundry animations on image change.</p>
          </div>
        
          <hr/>
        
          {{#if worldHud.tokenHUDWildcardActive}}
        
          <h2><b>Token HUD Wildcard</b></h2>
        
          <div class="form-group">
            <label>{{localize "token-variants.settings.token-hud.window.disable-if-token-hud-wildcard-active.Name"}}</label>
            <div class="form-fields">
              <input type="checkbox" name="worldHud.disableIfTHWEnabled" data-dtype="Boolean" {{#if worldHud.disableIfTHWEnabled}}checked{{/if}}>
            </div>
            <p class="notes">
              {{localize "token-variants.settings.token-hud.window.disable-if-token-hud-wildcard-active.Hint"}}
            </p>
          </div>
          {{/if}}
        </div>
        {{/if}}

        <!-- Active Effects -->
        {{#if enabledTabs.activeEffects}}
        <div class="tab" data-tab="activeEffects" data-group="primary-tabs">

          <fieldset>
            <legend>Mappings</legend>

            <div class="form-group">
              <label>Global Mappings</label>
              <button class="token-variants-global-mapping" type="button">
                  <i class="fas fa-angle-double-right"></i>
                  <label>Configure</label>
              </button>
              <p class="notes">Mappings applicable to ALL tokens. Will be overridden by Actor specific mappings.</p>
            </div>

            <div class="form-group">
              <label>Merge mappings based on Groups</label>
              <div class="form-fields">
                <input type="checkbox" name="mergeGroup" data-dtype="Boolean" {{#if mergeGroup}}checked{{/if}}>
              </div>
              <p class="notes">Instead of comparing `Labels` Actor mappings will take precedent over Global ones if they belong to the same group.</p>
            </div>


            <div class="form-group">
              <label>Stack Mappings</label>
              <div class="form-fields">
                <input type="checkbox" name="stackStatusConfig" data-dtype="Boolean" {{#if stackStatusConfig}}checked{{/if}}>
              </div>
              <p class="notes">When multiple Mappings are active Token Configurations and Overlays will accumulate on the token instead of overriding each other.</p>
            </div>

            <div class="form-group">
              <label>Disable image updates on manually changed tokens</label>
              <div class="form-fields">
                <input type="checkbox" name="disableImageUpdateOnNonPrototype" data-dtype="Boolean" {{#if disableImageUpdateOnNonPrototype}}checked{{/if}}>
              </div>
              <p class="notes">Mappings will not update images on tokens that have an image not corresponding to the prototype or any configurations.</p>
            </div>

            <div class="form-group">
              <label>Disable Core Animation</label>
              <div class="form-fields">
                <input type="checkbox" name="disableTokenUpdateAnimation" data-dtype="Boolean" {{#if disableTokenUpdateAnimation}}checked{{/if}}>
              </div>
              <p class="notes">Mappings affecting Token appearance will not trigger core Foundry's Token animation.</p>
            </div>

            <div class="form-group">
              <label>System's HP Path</label>
              <div class="form-fields">
                <input type="text" name="systemHpPath" data-dtype="String" value="{{systemHpPath}}">
              </div>
              <p class="notes">Path to the game system's HP min, max, and value properties.</p>
            </div>

            <div class="form-group">
              <label>Update tokens only on the current scene</label>
              <div class="form-fields">
                <input type="checkbox" name="mappingsCurrentSceneOnly" data-dtype="Boolean" {{#if mappingsCurrentSceneOnly}}checked{{/if}}>
              </div>
              <p class="notes">Linked tokens will no longer be updated across the entire world on mappings changes. Might cause a de-sync of token state until the scene is loaded/re-loaded.</p>
            </div>

            <br>

            <fieldset>
              <legend>Internal Effects</legend>
              <div class="form-group slim">
                <label>HP Change (hp-- hp++)</label>
                <div class="form-fields">
                  <label>Enabled</label>
                  <input type="checkbox" name="internalEffects.hpChange.enabled" data-dtype="Boolean" {{checked internalEffects.hpChange.enabled}}>
                  <label>Duration <span class="units">(seconds)</span></label>
                  <input type="number" name="internalEffects.hpChange.duration" data-dtype="Number" value="{{internalEffects.hpChange.duration}}" min="0.001" max="50" step="any" placeholder="infinite">
                </div>
                <p class="notes">Flags will be stored on tokens to allow the use of `hp--` (decreased) and `hp++` (increased) expressions in effect mappings.</p>
              </div>
            </fieldset>

            {{#if dnd5e}}
            <br>
            <fieldset>
              <legend>DnD5e</legend>
              <div class="form-group">
                <label>Disable image updates on Polymorphed</label>
                <div class="form-fields">
                  <input type="checkbox" name="disableImageChangeOnPolymorphed" data-dtype="Boolean" {{#if disableImageChangeOnPolymorphed}}checked{{/if}}>
                </div>
                <p class="notes">Mappings will not update images on tokens with polymorphed or wild shaped actors.</p>
              </div>
            </fieldset>
            {{/if}}

          </fieldset>

          <br>

          <fieldset>
            <legend>Effect Icons</legend>


            <div class="form-group">
              <label>Display Token Effect Icons on Hover</label>
              <div class="form-fields">
                <input type="checkbox" name="displayEffectIconsOnHover" data-dtype="Boolean" {{#if displayEffectIconsOnHover}}checked{{/if}}>
              </div>
              <p class="notes">Effect icons will only be displayed while hovering over the token.</p>
            </div>

            <hr>

            <div class="form-group">
              <label>Disable ALL Effect Icons</label>
              <div class="form-fields">
                <input type="checkbox" name="disableEffectIcons" data-dtype="Boolean" {{#if disableEffectIcons}}checked{{/if}}>
              </div>
              <p class="notes">Prevents drawing of temporary effects on the token and combat tracker.</p>
            </div>

            <hr>

            {{#unless pathfinder}}
            <div class="form-group">
              <label>Disable SOME Effect Icons</label>
              <div class="form-fields">
                <input type="checkbox" name="filterEffectIcons" data-dtype="Boolean" {{#if filterEffectIcons}}checked{{/if}}>
              </div>
              <p class="notes">Disable drawing of the following effects on the token and combat tracker:</p>
            </div>

            <div class="form-group">
              <label>Effects with mappings</label>
              <div class="form-fields">
                <input type="checkbox" name="filterCustomEffectIcons" data-dtype="Boolean" {{#if filterCustomEffectIcons}}checked{{/if}}>
              </div>
              <p class="notes">Prevents drawing of temporary effects on the token if a mapping exists for it.</p>
            </div>

            <div class="form-group">
              <label>Additional Restricted Effects</label>
              <div class="form-fields">
                <input type="text" name="filterIconList" data-dtype="String" value="{{filterIconList}}" placeholder="e.g. Sharpshooter,Asleep">
              </div>
            </div>
            {{/unless}}
      
          </fieldset>

          <fieldset>
            <legend>Token Elements</legend>

            <div class="form-group">
              <label>Hide Elevation</label>
              <div class="form-fields">
                <input type="checkbox" name="hideElevationTooltip" data-dtype="Boolean" {{#if hideElevationTooltip}}checked{{/if}}>
              </div>
            </div>

            <div class="form-group">
              <label>Hide Border <span class="units">(REQUIRES SCENE RELOAD)</span></label>
              <div class="form-fields">
                <input type="checkbox" name="hideTokenBorder" data-dtype="Boolean" {{#if hideTokenBorder}}checked{{/if}}>
              </div>
            </div>

          </fieldset>

        </div>
        {{/if}}

        <!-- Misc -->
        {{#if enabledTabs.misc}}
        <div class="tab" data-tab="misc" data-group="primary-tabs">

          <fieldset>
            <legend>Image Cache</legend>

            <div class="form-group">
              <label>{{localize "token-variants.settings.disable-notifs.Name"}}</label>
              <div class="form-fields">
                <input type="checkbox" name="disableNotifs" data-dtype="Boolean" {{#if disableNotifs}}checked{{/if}}>
              </div>
              <p class="notes">{{localize "token-variants.settings.disable-notifs.Hint"}}</p>
            </div>

            <div class="form-group">
              <label>Static Cache</label>
              <div class="form-fields">
                <input type="checkbox" name="staticCache" data-dtype="Boolean" {{#if staticCache}}checked{{/if}}>
              </div>
              <p class="notes">Cached images will be stored in a file and read upon world load. Cache will be refreshed on search path changes or by clicking the button bellow.</p>
            </div>

            <div class="form-group">
              <label>Cache File</label>
              <div class="form-fields">
                <input type="text" name="staticCacheFile" data-dtype="String" value="{{staticCacheFile}}">
              </div>
              <p class="notes">Name and location of the image cache.</p>
            </div>

            <div class="form-group">
              <label></label>
              <button class="token-variants-cache-images" type="button">
                  <i class="fas fa-sync-alt"></i>
                  <label>Cache Images</label>
              </button>
            </div>
          
          </fieldset>

          <br>

          <fieldset>
            <legend>HUD</legend>

            <div class="form-group">
              <label>Play Videos on mouse hover</label>
              <div class="form-fields">
                <input type="checkbox" name="playVideoOnHover" data-dtype="Boolean" {{#if playVideoOnHover}}checked{{/if}}>
              </div>
              <p class="notes">When enabled videos will not auto-play, and instead will unpause only when the mouse is hovered over them.</p>
            </div>
  
            <div class="form-group">
              <label>Pause Videos on mouse hover out</label>
              <div class="form-fields">
                <input type="checkbox" name="pauseVideoOnHoverOut" data-dtype="Boolean" {{#if pauseVideoOnHoverOut}}checked{{/if}}>
              </div>
              <p class="notes">When enabled videos will pause when the mouse leaves them.</p>
            </div>

            <div class="form-group">
              <label>Tile HUD</label>
              <div class="form-fields">
                <input type="checkbox" name="tilesEnabled" data-dtype="Boolean" {{#if tilesEnabled}}checked{{/if}}>
              </div>
              <p class="notes">Enables the Tile HUD button</p>
            </div>

          </fieldset>

          <br>

          <fieldset>
            <legend>Image Updates</legend>

            <div class="form-group">
              <label>Transfer Token Updates to Prototype</label>
              <div class="form-fields">
                <input type="checkbox" name="updateTokenProto" data-dtype="Boolean" {{#if updateTokenProto}}checked{{/if}}>
              </div>
              <p class="notes">Token updates using the module will also affect the prototype token.</p>
            </div>

            <fieldset>
              <legend>Dimensions in Image Names</legend>
              <div class="form-group">
                <label>Token HUD Wildcard</label>
                <div class="form-fields">
                  <input type="checkbox" name="imgNameContainsDimensions" data-dtype="Boolean" {{#if imgNameContainsDimensions}}checked{{/if}}>
                </div>
                <p class="notes">Module will recognize `_scale#.#_`, `_width#.#_`, and `_height#.#_` in image names and apply them to the token.</p>
              </div>
              <div class="form-group">
                <label>Forgotten Adventures</label>
                <div class="form-fields">
                  <input type="checkbox" name="imgNameContainsFADimensions" data-dtype="Boolean" {{#if imgNameContainsFADimensions}}checked{{/if}}>
                </div>
                <p class="notes">Module will recognize `_Scale###_` in image names and apply it to the token.</p>
              </div>
            </fieldset>


          </fieldset>

          <div class="form-group">
            <label>{{localize "token-variants.settings.imgur-client-id.Name"}}</label>
            <div class="form-fields">
              <input type="text" name="imgurClientId" data-dtype="String" value="{{imgurClientId}}">
            </div>
            <p class="notes">{{localize "token-variants.settings.imgur-client-id.Hint"}}</p>
          </div>

          <hr>

          <div class="form-group">
            <label>Custom Image Categories</label>
            <div class="form-fields">
              <input type="text" name="customImageCategories" data-dtype="String" value="{{customImageCategories}}" placeholder="e.g. Dragons,Vampires">
            </div>
            <p class="notes">Additional types that will be used by the module to group images on.</p>
          </div>

        </div>
        {{/if}}

    </section>

    <!-- Settings Footer -->
    <footer class="sheet-footer flexrow">
        <button type="submit" name="submit">
            <i class="far fa-save"></i> Save Changes
        </button>
    </footer>
</form>