{{!-- auto-tokenize.hbs --}}
{{!-- Root element for the AutoTokenizeDialog ApplicationV2 window body --}}

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

  {{!-- ── Selection phase ───────────────────────────────────────── --}}
  {{#if (eq phase "select")}}
    <p class="tie-at-description">{{description}}</p>

    <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" checked>
        {{localize "TOKENIZER-2.AutoToken.MaskAuto"}}
      </label>
      <label class="tie-at-mode">
        <input type="radio" name="mask-source" value="supplied">
        {{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-modes">
      <legend class="tie-at-modes__legend">{{localize "TOKENIZER-2.AutoToken.ChooseMode"}}</legend>
      <label class="tie-at-mode">
        <input type="radio" name="mode" value="all" checked>
        {{localize "TOKENIZER-2.AutoToken.ModeAll"}}
      </label>
      <label class="tie-at-mode">
        <input type="radio" name="mode" value="untokenized">
        {{localize "TOKENIZER-2.AutoToken.ModeUntokenized"}}
      </label>
    </fieldset>

    <fieldset class="tie-at-options">
      <legend class="tie-at-modes__legend">{{localize "TOKENIZER-2.AutoToken.Options"}}</legend>
      <label class="tie-at-mode">
        <input type="checkbox" name="skip-wildcards" checked>
        {{localize "TOKENIZER-2.AutoToken.SkipWildcards"}}
      </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" checked>
        {{localize "TOKENIZER-2.AutoToken.ImageSourceToken"}}
      </label>
      <label class="tie-at-mode">
        <input type="radio" name="image-source" value="avatar">
        {{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" checked>
        {{localize "TOKENIZER-2.AutoToken.WildcardKeep"}}
      </label>
      <label class="tie-at-mode">
        <input type="radio" name="wildcard-mode" value="remove">
        {{localize "TOKENIZER-2.AutoToken.WildcardRemove"}}
      </label>
    </fieldset>

    </div>
    {{#if previewActorName}}
    <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"}}: <strong>{{previewActorName}}</strong></p>
      </div>
    </div>
    {{/if}}
    </div>

    <footer class="tie-at-footer">
      <button type="button" class="tie-btn tie-btn--primary" data-action="start">
        <i class="fa-solid fa-play"></i>
        {{localize "TOKENIZER-2.AutoToken.Start"}}
      </button>
    </footer>

  {{!-- ── Progress phase ───────────────────────────────────────── --}}
  {{else if (eq phase "progress")}}
    <p class="tie-at-status">
      {{localize "TOKENIZER-2.AutoToken.Processing"}}:
      <strong>{{progress.actorName}}</strong>
      ({{progress.current}} / {{progress.total}})
    </p>
    <progress class="tie-at-progress" value="{{progress.current}}" max="{{progress.total}}"></progress>

  {{!-- ── Done phase ──────────────────────────────────────────── --}}
  {{else}}
    <p class="tie-at-done">{{summary}}</p>

    <footer class="tie-at-footer">
      <button type="button" class="tie-btn tie-btn--primary" data-action="cancel">
        {{localize "TOKENIZER-2.AutoToken.Close"}}
      </button>
    </footer>

  {{/if}}

</div>