{{!-- settings-app.hbs --}}
{{!-- Root element for the SettingsApp ApplicationV2 window body --}}

<div class="tie-sa-layout">

  {{!-- ── Tab navigation ──────────────────────────────────────── --}}
  <nav class="tie-sa-tabs" role="tablist" aria-label="{{localize "TOKENIZER-2.SETTINGS_APP.TabsAriaLabel"}}">
    {{#each tabs}}
      <button
        type="button"
        class="tie-sa-tab {{#if this.active}}is-active{{/if}}"
        data-tab="{{this.id}}"
        role="tab"
        aria-selected="{{this.active}}"
      >{{this.label}}</button>
    {{/each}}
  </nav>

  {{!-- ── Form body ────────────────────────────────────────────── --}}
  <form class="tie-sa-form" autocomplete="off">

    {{!-- ── Panel: Token Rings ───────────────────────────────── --}}
    <div
      class="tie-sa-panel {{#if (eq activeTab "rings")}}is-active{{/if}}"
      data-tab-panel="rings"
    >
      <div class="tie-sa-field tie-sa-field--checkbox">
        <label class="tie-sa-checkbox-label">
          <input type="checkbox" name="apply-default-ring" {{#if applyDefaultRing}}checked{{/if}} />
          {{localize "TOKENIZER-2.SETTINGS_APP.ApplyDefaultRing"}}
        </label>
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.ApplyDefaultRingHint"}}</p>
      </div>

      <div class="tie-sa-field tie-sa-field--checkbox">
        <label class="tie-sa-checkbox-label">
          <input type="checkbox" name="fit-portrait-to-ring" {{#if fitPortraitToRing}}checked{{/if}} />
          {{localize "TOKENIZER-2.SETTINGS_APP.FitPortraitToRing"}}
        </label>
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.FitPortraitToRingHint"}}</p>
      </div>

      <div class="tie-sa-field tie-sa-field--checkbox">
        <label class="tie-sa-checkbox-label">
          <input type="checkbox" name="use-dynamic-ring-default" {{#if useDynamicRingDefault}}checked{{/if}} />
          {{localize "TOKENIZER-2.SETTINGS_APP.UseDynamicRingDefault"}}
        </label>
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.UseDynamicRingDefaultHint"}}</p>
      </div>

      <div class="tie-sa-field tie-sa-field--checkbox">
        <label class="tie-sa-checkbox-label">
          <input type="checkbox" name="default-oversized" {{#if defaultOversized}}checked{{/if}} />
          {{localize "TOKENIZER-2.SETTINGS_APP.DefaultOversized"}}
        </label>
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.DefaultOversizedHint"}}</p>
      </div>

      <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.RingsHint"}}</p>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.RingFriendly"}}</label>
        <div class="tie-sa-file-row">
          <input type="text" name="ring-friendly" value="{{ringFriendly}}" placeholder="{{localize "TOKENIZER-2.SETTINGS_APP.RingFriendlyPlaceholder"}}" />
          <button type="button" class="tie-sa-browse-btn" data-action="browse" data-input-name="ring-friendly" data-picker-type="image" title="{{localize "TOKENIZER-2.SETTINGS_APP.BrowseFiles"}}">
            <i class="fa-solid fa-folder-open"></i>
          </button>
        </div>
      </div>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.RingNeutral"}}</label>
        <div class="tie-sa-file-row">
          <input type="text" name="ring-neutral" value="{{ringNeutral}}" placeholder="{{localize "TOKENIZER-2.SETTINGS_APP.RingNeutralPlaceholder"}}" />
          <button type="button" class="tie-sa-browse-btn" data-action="browse" data-input-name="ring-neutral" data-picker-type="image" title="{{localize "TOKENIZER-2.SETTINGS_APP.BrowseFiles"}}">
            <i class="fa-solid fa-folder-open"></i>
          </button>
        </div>
      </div>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.RingHostile"}}</label>
        <div class="tie-sa-file-row">
          <input type="text" name="ring-hostile" value="{{ringHostile}}" placeholder="{{localize "TOKENIZER-2.SETTINGS_APP.RingHostilePlaceholder"}}" />
          <button type="button" class="tie-sa-browse-btn" data-action="browse" data-input-name="ring-hostile" data-picker-type="image" title="{{localize "TOKENIZER-2.SETTINGS_APP.BrowseFiles"}}">
            <i class="fa-solid fa-folder-open"></i>
          </button>
        </div>
      </div>
    </div>

    {{!-- ── Panel: Save Locations ─────────────────────────────── --}}
    <div
      class="tie-sa-panel {{#if (eq activeTab "locations")}}is-active{{/if}}"
      data-tab-panel="locations"
    >
      <h5 class="tie-sa-section-heading">{{localize "TOKENIZER-2.SETTINGS_APP.TokenLocationsHeading"}}</h5>

      <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.LocationsHint"}}</p>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.PcTokensFolder"}}</label>
        <div class="tie-sa-file-row">
          <input type="text" name="pc-save-location" value="{{pcSaveLocation}}" placeholder="{{localize "TOKENIZER-2.SETTINGS_APP.PcLocationPlaceholder"}}" />
          <button type="button" class="tie-sa-browse-btn" data-action="browse" data-input-name="pc-save-location" data-picker-type="folder" title="{{localize "TOKENIZER-2.SETTINGS_APP.BrowseFolders"}}">
            <i class="fa-solid fa-folder-open"></i>
          </button>
        </div>
      </div>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.NpcTokensFolder"}}</label>
        <div class="tie-sa-file-row">
          <input type="text" name="npc-save-location" value="{{npcSaveLocation}}" placeholder="{{localize "TOKENIZER-2.SETTINGS_APP.NpcLocationPlaceholder"}}" />
          <button type="button" class="tie-sa-browse-btn" data-action="browse" data-input-name="npc-save-location" data-picker-type="folder" title="{{localize "TOKENIZER-2.SETTINGS_APP.BrowseFolders"}}">
            <i class="fa-solid fa-folder-open"></i>
          </button>
        </div>
      </div>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.PasteFolder"}}</label>
        <div class="tie-sa-file-row">
          <input type="text" name="paste-location" value="{{pasteLocation}}" placeholder="{{localize "TOKENIZER-2.SETTINGS_APP.PasteFolderPlaceholder"}}" />
          <button type="button" class="tie-sa-browse-btn" data-action="browse" data-input-name="paste-location" data-picker-type="folder" title="{{localize "TOKENIZER-2.SETTINGS_APP.BrowseFolders"}}">
            <i class="fa-solid fa-folder-open"></i>
          </button>
        </div>
      </div>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.ReusableMaskFolder"}}</label>
        <div class="tie-sa-file-row">
          <input type="text" name="reusable-mask-location" value="{{reusableMaskLocation}}" placeholder="{{localize "TOKENIZER-2.SETTINGS_APP.ReusableMaskFolderPlaceholder"}}" />
          <button type="button" class="tie-sa-browse-btn" data-action="browse" data-input-name="reusable-mask-location" data-picker-type="folder" title="{{localize "TOKENIZER-2.SETTINGS_APP.BrowseFolders"}}">
            <i class="fa-solid fa-folder-open"></i>
          </button>
        </div>
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.ReusableMaskFolderHint"}}</p>
      </div>

      <hr class="tie-sa-divider" />
      <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.TokenNameHint"}}</p>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.TokenNameLinked"}}</label>
        <input type="text" name="token-name-linked" value="{{tokenNameLinked}}" placeholder="{{localize "TOKENIZER-2.SETTINGS_APP.TokenNameLinkedPlaceholder"}}" />
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.TokenNameLinkedHint"}}</p>
      </div>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.TokenNameUnlinked"}}</label>
        <input type="text" name="token-name-unlinked" value="{{tokenNameUnlinked}}" placeholder="{{localize "TOKENIZER-2.SETTINGS_APP.TokenNameUnlinkedPlaceholder"}}" />
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.TokenNameUnlinkedHint"}}</p>
      </div>

      <hr class="tie-sa-divider" />
      <h5 class="tie-sa-section-heading">{{localize "TOKENIZER-2.SETTINGS_APP.AvatarLocationsHeading"}}</h4>
      <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.AvatarLocationsHint"}}</p>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.AvatarPcFolder"}}</label>
        <div class="tie-sa-file-row">
          <input type="text" name="avatar-pc-save-location" value="{{avatarPcSaveLocation}}" placeholder="{{localize "TOKENIZER-2.SETTINGS_APP.AvatarPcFolderPlaceholder"}}" />
          <button type="button" class="tie-sa-browse-btn" data-action="browse" data-input-name="avatar-pc-save-location" data-picker-type="folder" title="{{localize "TOKENIZER-2.SETTINGS_APP.BrowseFolders"}}">
            <i class="fa-solid fa-folder-open"></i>
          </button>
        </div>
      </div>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.AvatarNpcFolder"}}</label>
        <div class="tie-sa-file-row">
          <input type="text" name="avatar-npc-save-location" value="{{avatarNpcSaveLocation}}" placeholder="{{localize "TOKENIZER-2.SETTINGS_APP.AvatarNpcFolderPlaceholder"}}" />
          <button type="button" class="tie-sa-browse-btn" data-action="browse" data-input-name="avatar-npc-save-location" data-picker-type="folder" title="{{localize "TOKENIZER-2.SETTINGS_APP.BrowseFolders"}}">
            <i class="fa-solid fa-folder-open"></i>
          </button>
        </div>
      </div>

      <hr class="tie-sa-divider" />
      <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.AvatarNameHint"}}</p>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.AvatarNameLinked"}}</label>
        <input type="text" name="avatar-name-linked" value="{{avatarNameLinked}}" placeholder="{{localize "TOKENIZER-2.SETTINGS_APP.AvatarNameLinkedPlaceholder"}}" />
      </div>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.AvatarNameUnlinked"}}</label>
        <input type="text" name="avatar-name-unlinked" value="{{avatarNameUnlinked}}" placeholder="{{localize "TOKENIZER-2.SETTINGS_APP.AvatarNameUnlinkedPlaceholder"}}" />
      </div>
    </div>

    {{!-- ── Panel: Background ──────────────────────────────────── --}}
    <div
      class="tie-sa-panel {{#if (eq activeTab "background")}}is-active{{/if}}"
      data-tab-panel="background"
    >
      <div class="tie-sa-field tie-sa-field--checkbox">
        <label class="tie-sa-checkbox-label">
          <input type="checkbox" name="apply-default-background" {{#if applyDefaultBackground}}checked{{/if}} />
          {{localize "TOKENIZER-2.SETTINGS_APP.ApplyDefaultBackground"}}
        </label>
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.ApplyDefaultBackgroundHint"}}</p>
      </div>

      <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.BackgroundHint"}}</p>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.BackgroundImage"}}</label>
        <div class="tie-sa-file-row">
          <input type="text" name="default-background" value="{{defaultBackground}}" placeholder="{{localize "TOKENIZER-2.SETTINGS_APP.BackgroundPlaceholder"}}" />
          <button type="button" class="tie-sa-browse-btn" data-action="browse" data-input-name="default-background" data-picker-type="imagevideo" title="{{localize "TOKENIZER-2.SETTINGS_APP.BrowseFiles"}}">
            <i class="fa-solid fa-folder-open"></i>
          </button>
        </div>
      </div>

      {{#if defaultBackground}}
        <div class="tie-sa-preview">
          <img src="{{defaultBackground}}" alt="{{localize "TOKENIZER-2.SETTINGS_APP.BackgroundPreviewAlt"}}" />
        </div>
      {{/if}}

      <hr />

      <div class="tie-sa-field tie-sa-field--checkbox">
        <label class="tie-sa-checkbox-label">
          <input type="checkbox" name="apply-default-color-layer" {{#if applyDefaultColorLayer}}checked{{/if}} />
          {{localize "TOKENIZER-2.SETTINGS_APP.ApplyDefaultColorLayer"}}
        </label>
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.ApplyDefaultColorLayerHint"}}</p>
      </div>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.DefaultColorLayerColor"}}</label>
        <input type="color" name="default-color-layer-color" value="{{defaultColorLayerColor}}" />
      </div>
    </div>

    {{!-- ── Panel: Advanced ──────────────────────────────────────── --}}
    <div
      class="tie-sa-panel {{#if (eq activeTab "advanced")}}is-active{{/if}}"
      data-tab-panel="advanced"
    >
      <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.AdvancedHint"}}</p>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.ExportSize"}}</label>
        <select name="export-size" class="tie-sa-select">
          <option value="256"  {{#if (eq exportSize 256)}}selected{{/if}}>256 × 256 px</option>
          <option value="512"  {{#if (eq exportSize 512)}}selected{{/if}}>512 × 512 px</option>
          <option value="1024" {{#if (eq exportSize 1024)}}selected{{/if}}>1024 × 1024 px</option>
          <option value="2048" {{#if (eq exportSize 2048)}}selected{{/if}}>2048 × 2048 px</option>
          <option value="4096" {{#if (eq exportSize 4096)}}selected{{/if}}>4096 × 4096 px</option>
        </select>
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.ExportSizeHint"}}</p>
      </div>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.ExportFormat"}}</label>
        <select name="export-format" class="tie-sa-select">
          <option value="webp" {{#if (eq exportFormat "webp")}}selected{{/if}}>WebP (recommended)</option>
          <option value="png"  {{#if (eq exportFormat "png")}}selected{{/if}}>PNG</option>
        </select>
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.ExportFormatHint"}}</p>
      </div>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.ProxyUrl"}}</label>
        <input type="text" name="proxy-url" value="{{proxyUrl}}" placeholder="{{localize "TOKENIZER-2.SETTINGS_APP.ProxyUrlPlaceholder"}}" />
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.ProxyUrlHint"}}</p>
      </div>

      <hr class="tie-sa-divider" />

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.RayMaskEdgeMode"}}</label>
        <select name="ray-mask-edge-mode" class="tie-sa-select">
          <option value="highest-alpha" {{#if (eq rayMaskEdgeMode "highest-alpha")}}selected{{/if}}>{{localize "TOKENIZER-2.RayMaskEdgeModeHighestAlpha"}}</option>
          <option value="first-opaque"  {{#if (eq rayMaskEdgeMode "first-opaque")}}selected{{/if}}>{{localize "TOKENIZER-2.RayMaskEdgeModeFirstOpaque"}}</option>
        </select>
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.RayMaskEdgeModeHint"}}</p>
      </div>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.RayMaskSampleSize"}}</label>
        <input type="number" name="ray-mask-sample-size" min="1" step="1" value="{{rayMaskSampleSize}}" />
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.RayMaskSampleSizeHint"}}</p>
      </div>

      <hr class="tie-sa-divider" />

      <div class="tie-sa-field tie-sa-field--checkbox">
        <label class="tie-sa-checkbox-label">
          <input type="checkbox" name="disable-layer-persistence" {{#if disableLayerPersistence}}checked{{/if}} />
          {{localize "TOKENIZER-2.SETTINGS_APP.DisableLayerPersistence"}}
        </label>
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.DisableLayerPersistenceHint"}}</p>
      </div>

      <div class="tie-sa-field tie-sa-field--checkbox">
        <label class="tie-sa-checkbox-label">
          <input type="checkbox" name="save-dynamic-texture-src" {{#if saveDynamicTextureSrc}}checked{{/if}} />
          {{localize "TOKENIZER-2.SETTINGS_APP.SaveDynamicTextureSrc"}}
        </label>
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.SaveDynamicTextureSrcHint"}}</p>
      </div>

      <div class="tie-sa-field tie-sa-field--checkbox">
        <label class="tie-sa-checkbox-label">
          <input type="checkbox" name="disable-token-frames" {{#if disableTokenFrames}}checked{{/if}} {{#unless tokenFramesInstalled}}disabled{{/unless}} />
          {{localize "TOKENIZER-2.SETTINGS_APP.DisableTokenFrames"}}
        </label>
        <p class="tie-sa-hint">
          {{localize "TOKENIZER-2.SETTINGS_APP.DisableTokenFramesHint"}}
          {{#unless tokenFramesInstalled}}<br /><em>{{localize "TOKENIZER-2.SETTINGS_APP.DisableTokenFramesNotInstalled"}}</em>{{/unless}}
        </p>
      </div>
    </div>

    {{!-- ── Panel: Animation ─────────────────────────────────────── --}}
    <div
      class="tie-sa-panel {{#if (eq activeTab "animation")}}is-active{{/if}}"
      data-tab-panel="animation"
    >
      <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.AnimationHint"}}</p>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.AnimationFps"}}</label>
        <input type="number" name="animation-fps" min="8" max="60" step="1" value="{{animationFps}}" />
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.AnimationFpsHint"}}</p>
      </div>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.AnimationMaxDuration"}}</label>
        <input type="number" name="animation-max-duration" min="0.5" max="10" step="0.5" value="{{animationMaxDuration}}" />
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.AnimationMaxDurationHint"}}</p>
      </div>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.AnimationBitrate"}}</label>
        <input type="number" name="animation-bitrate-mbps" min="0.25" max="16" step="0.25" value="{{animationBitrateMbps}}" />
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.AnimationBitrateHint"}}</p>
      </div>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.AnimationExportSize"}}</label>
        <select name="animation-export-size" class="tie-sa-select">
          <option value="256"  {{#if (eq animationExportSize 256)}}selected{{/if}}>256 × 256 px</option>
          <option value="512"  {{#if (eq animationExportSize 512)}}selected{{/if}}>512 × 512 px</option>
          <option value="1024" {{#if (eq animationExportSize 1024)}}selected{{/if}}>1024 × 1024 px</option>
          <option value="2048" {{#if (eq animationExportSize 2048)}}selected{{/if}}>2048 × 2048 px</option>
        </select>
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.AnimationExportSizeHint"}}</p>
      </div>

      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.AnimationCodec"}}</label>
        <select name="animation-codec" class="tie-sa-select">
          <option value="vp9" {{#if (eq animationCodec "vp9")}}selected{{/if}}>VP9 (recommended)</option>
          <option value="vp8" {{#if (eq animationCodec "vp8")}}selected{{/if}}>VP8</option>
        </select>
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.AnimationCodecHint"}}</p>
      </div>

      {{#if animationEncoders.length}}
      <div class="tie-sa-field">
        <label class="tie-sa-label">{{localize "TOKENIZER-2.SETTINGS_APP.AnimationEncoder"}}</label>
        <select name="animation-encoder" class="tie-sa-select">
          {{#each animationEncoders}}
            <option value="{{id}}" {{#if active}}selected{{/if}}>{{label}}</option>
          {{/each}}
        </select>
        <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.AnimationEncoderHint"}}</p>
      </div>
      {{/if}}
    </div>

    {{!-- ── Panel: Licenses ──────────────────────────────────────── --}}
    <div
      class="tie-sa-panel {{#if (eq activeTab "licenses")}}is-active{{/if}}"
      data-tab-panel="licenses"
    >
      <p class="tie-sa-hint">{{localize "TOKENIZER-2.SETTINGS_APP.LicensesHint"}}</p>

      <div class="tie-sa-license-entry">
        <h4 class="tie-sa-license-name">Magic Wand</h4>
        <p class="tie-sa-license-desc">{{localize "TOKENIZER-2.SETTINGS_APP.LicenseMagicWandDesc"}}</p>
        <p class="tie-sa-license-copy">&copy; 2014 Ryasnoy Paul</p>
        <p class="tie-sa-license-type">{{localize "TOKENIZER-2.SETTINGS_APP.LicenseMIT"}}</p>
        <a href="https://github.com/Tamersoul/magic-wand-js" target="_blank" rel="noopener">github.com/Tamersoul/magic-wand-js</a>
      </div>

      <hr class="tie-sa-divider" />

      <div class="tie-sa-license-entry">
        <h4 class="tie-sa-license-name">Mediabunny</h4>
        <p class="tie-sa-license-desc">{{localize "TOKENIZER-2.SETTINGS_APP.LicenseMediabunnyDesc"}}</p>
        <p class="tie-sa-license-copy">&copy; 2026-present Vanilagy and contributors</p>
        <p class="tie-sa-license-type">{{localize "TOKENIZER-2.SETTINGS_APP.LicenseMPL2"}}</p>
        <a href="https://github.com/Vanilagy/mediabunny" target="_blank" rel="noopener">github.com/Vanilagy/mediabunny</a>
      </div>

      {{#each pluginLicenses}}
      <hr class="tie-sa-divider" />
      <div class="tie-sa-license-entry">
        <h4 class="tie-sa-license-name">{{this.name}}</h4>
        {{#if this.text}}<p class="tie-sa-license-desc">{{this.text}}</p>{{/if}}
        {{#if this.copyright}}<p class="tie-sa-license-copy">{{this.copyright}}</p>{{/if}}
        {{#if this.url}}<a href="{{this.url}}" target="_blank" rel="noopener">{{this.url}}</a>{{/if}}
      </div>
      {{/each}}
    </div>

    {{!-- ── Footer ───────────────────────────────────────────────── --}}
    <div class="tie-sa-footer">
      <button type="button" class="tie-sa-save-btn" data-action="save">
        <i class="fa-solid fa-floppy-disk"></i> {{localize "TOKENIZER-2.SETTINGS_APP.SaveSettings"}}
      </button>
    </div>

  </form>

</div>