{{!-- tokenize-config.hbs --}}
{{!-- Root element for the TokenizerConfigDialog ApplicationV2 window body --}}
{{!-- Collects tokenization options once and returns them as a config object   --}}
{{!-- (e.g. for DDB Importer to apply across many imported actors).            --}}

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

  {{#if description}}<p class="tie-at-description">{{description}}</p>{{/if}}

  <div class="tie-at-columns">
    <div class="tie-at-col-options">

      <fieldset class="tie-at-options tie-at-frame">
        <legend class="tie-at-modes__legend">{{localize "TOKENIZER-2.AutoToken.Frame"}}</legend>
        <label class="tie-at-mode">
          <input type="checkbox" name="use-dynamic" {{#if dynamicDefault}}checked{{/if}}>
          {{localize "TOKENIZER-2.AutoToken.UseDynamic"}}
        </label>
        <div class="tie-at-frame__row">
          {{#if frameThumb}}<img class="tie-at-frame__thumb" src="{{frameThumb}}" alt="" />{{/if}}
          <button type="button" class="tie-btn tie-btn--ghost" data-action="change-frame" {{#if dynamicDefault}}disabled{{/if}}>
            {{localize "TOKENIZER-2.AutoToken.ChangeFrame"}}
          </button>
        </div>
      </fieldset>

      <fieldset class="tie-at-options tie-at-mask">
        <legend class="tie-at-modes__legend">{{localize "TOKENIZER-2.AutoToken.MaskSource"}}</legend>
        <label class="tie-at-mode">
          <input type="radio" name="mask-source" value="auto" {{#unless suppliedMaskMode}}checked{{/unless}}>
          {{localize "TOKENIZER-2.AutoToken.MaskAuto"}}
        </label>
        <label class="tie-at-mode">
          <input type="radio" name="mask-source" value="supplied" {{#if suppliedMaskMode}}checked{{/if}}>
          {{localize "TOKENIZER-2.AutoToken.MaskSupplied"}}
        </label>
        <div class="tie-at-frame__row">
          {{#if maskThumb}}<img class="tie-at-frame__thumb" src="{{maskThumb}}" alt="" />{{/if}}
          <button type="button" class="tie-btn tie-btn--ghost" data-action="change-mask" {{#unless suppliedMaskMode}}disabled{{/unless}}>
            {{localize "TOKENIZER-2.AutoToken.ChooseMask"}}
          </button>
        </div>
      </fieldset>

      <fieldset class="tie-at-options">
        <legend class="tie-at-modes__legend">{{localize "TOKENIZER-2.AutoToken.PortraitFit"}}</legend>
        <label class="tie-at-mode">
          <input type="radio" name="portrait-fit" value="contain" {{#if portraitFitContain}}checked{{/if}}>
          {{localize "TOKENIZER-2.AutoToken.PortraitFitContain"}}
        </label>
        <label class="tie-at-mode">
          <input type="radio" name="portrait-fit" value="cover" {{#if portraitFitCover}}checked{{/if}}>
          {{localize "TOKENIZER-2.AutoToken.PortraitFitCover"}}
        </label>
      </fieldset>

      <fieldset class="tie-at-options">
        <legend class="tie-at-modes__legend">{{localize "TOKENIZER-2.AutoToken.ImageSource"}}</legend>
        <label class="tie-at-mode">
          <input type="radio" name="image-source" value="token" {{#unless useActorImg}}checked{{/unless}}>
          {{localize "TOKENIZER-2.AutoToken.ImageSourceToken"}}
        </label>
        <label class="tie-at-mode">
          <input type="radio" name="image-source" value="avatar" {{#if useActorImg}}checked{{/if}}>
          {{localize "TOKENIZER-2.AutoToken.ImageSourceAvatar"}}
        </label>
      </fieldset>

      <fieldset class="tie-at-options">
        <legend class="tie-at-modes__legend">{{localize "TOKENIZER-2.AutoToken.WildcardHandling"}}</legend>
        <label class="tie-at-mode">
          <input type="radio" name="wildcard-mode" value="keep" {{#unless wildcardRemove}}checked{{/unless}}>
          {{localize "TOKENIZER-2.AutoToken.WildcardKeep"}}
        </label>
        <label class="tie-at-mode">
          <input type="radio" name="wildcard-mode" value="remove" {{#if wildcardRemove}}checked{{/if}}>
          {{localize "TOKENIZER-2.AutoToken.WildcardRemove"}}
        </label>
      </fieldset>

      <fieldset class="tie-at-options">
        <legend class="tie-at-modes__legend">{{localize "TOKENIZER-2.ConfigDialog.SaveFolder"}}</legend>
        <div class="tie-save-row__inputgroup">
          <input type="text" name="save-folder" value="{{saveFolder}}" placeholder="{{localize "TOKENIZER-2.ConfigDialog.SaveFolderPlaceholder"}}" />
          <button type="button" class="tie-btn tie-btn--ghost" data-action="browse-folder">
            <i class="fa-solid fa-folder-open"></i>
          </button>
        </div>
      </fieldset>

    </div>

    <div class="tie-at-col-preview">
      <div class="tie-at-preview">
        <div class="tie-at-preview__frame">
          <img class="tie-at-preview__img" src="{{previewSrc}}" alt="Token preview" />
          <div class="tie-at-preview__loading">
            <i class="fa-solid fa-spinner fa-spin"></i>
            <span>{{localize "TOKENIZER-2.AutoToken.PreviewLoading"}}</span>
          </div>
        </div>
        <p class="tie-at-preview__caption">{{localize "TOKENIZER-2.AutoToken.PreviewCaption"}}</p>
      </div>
    </div>
  </div>

  <footer class="tie-at-footer">
    <button type="button" class="tie-btn tie-btn--ghost" data-action="cancel">
      {{localize "TOKENIZER-2.Cancel"}}
    </button>
    <button type="button" class="tie-btn tie-btn--primary" data-action="ok">
      <i class="fa-solid fa-check"></i>
      {{localize "TOKENIZER-2.ConfigDialog.Ok"}}
    </button>
  </footer>

</div>