{{!-- Save Tokenizer Output - modal save dialog --}}
<form class="tie-save-dialog__form">

  {{!-- Token row --}}
  <section class="tie-save-row" data-row-body="token">
    <label class="tie-save-row__header">
      <input
        type="checkbox"
        data-row="token"
        {{#if token.checked}}checked{{/if}}
        {{#unless token.available}}disabled data-unavailable="true"{{/unless}}
      />
      <span class="tie-save-row__title">
        <i class="fa-solid fa-id-badge"></i> {{localize "TOKENIZER-2.SaveToken"}}
      </span>
      {{#unless token.available}}
        <span class="tie-save-row__reason">{{token.unavailableReason}}</span>
      {{/unless}}
    </label>

    <div class="tie-save-row__fields">
      <label class="tie-save-row__field">
        <span class="tie-save-row__label">Folder</span>
        <div class="tie-save-row__inputgroup">
          <input
            type="text"
            name="token-folder"
            value="{{token.folder}}"
            data-preview-source="token"
            {{#unless token.available}}disabled{{/unless}}
          />
          <button type="button" class="tie-btn tie-btn--ghost" data-action="browse-folder" data-row="token" {{#unless token.available}}disabled{{/unless}}>
            <i class="fa-solid fa-folder-open"></i>
          </button>
        </div>
      </label>

      <label class="tie-save-row__field">
        <span class="tie-save-row__label">Filename</span>
        <input
          type="text"
          name="token-filename"
          value="{{token.filename}}"
          data-preview-source="token"
          data-locked="{{#if token.filenameLocked}}true{{else}}false{{/if}}"
          {{#if token.filenameLocked}}disabled{{/if}}
          {{#unless token.available}}disabled{{/unless}}
        />
      </label>

      {{#if token.filenameLocked}}
        <p class="tie-save-row__note">Wildcard token - filename is auto-numbered by Foundry's wildcard pattern.</p>
      {{/if}}
      {{#if token.animated}}
        <p class="tie-save-row__note">Animated content detected - extension may change to match the encoder (.webm / .mp4) on save.</p>
      {{/if}}

      <div class="tie-save-row__preview">
        <span class="tie-save-row__label">Will save to</span>
        <code data-preview-target="token">{{token.preview}}</code>
      </div>
    </div>
  </section>

  {{!-- Avatar row --}}
  <section class="tie-save-row" data-row-body="avatar">
    <label class="tie-save-row__header">
      <input
        type="checkbox"
        data-row="avatar"
        {{#if avatar.checked}}checked{{/if}}
        {{#unless avatar.available}}disabled data-unavailable="true"{{/unless}}
      />
      <span class="tie-save-row__title">
        <i class="fa-solid fa-portrait"></i> {{localize "TOKENIZER-2.SaveAvatar"}}
      </span>
      {{#unless avatar.available}}
        <span class="tie-save-row__reason">{{avatar.unavailableReason}}</span>
      {{/unless}}
    </label>

    <div class="tie-save-row__fields">
      <label class="tie-save-row__field">
        <span class="tie-save-row__label">Folder</span>
        <div class="tie-save-row__inputgroup">
          <input
            type="text"
            name="avatar-folder"
            value="{{avatar.folder}}"
            data-preview-source="avatar"
            {{#unless avatar.available}}disabled{{/unless}}
          />
          <button type="button" class="tie-btn tie-btn--ghost" data-action="browse-folder" data-row="avatar" {{#unless avatar.available}}disabled{{/unless}}>
            <i class="fa-solid fa-folder-open"></i>
          </button>
        </div>
      </label>

      <label class="tie-save-row__field">
        <span class="tie-save-row__label">Filename</span>
        <input
          type="text"
          name="avatar-filename"
          value="{{avatar.filename}}"
          data-preview-source="avatar"
          data-locked="false"
          {{#unless avatar.available}}disabled{{/unless}}
        />
      </label>

      <div class="tie-save-row__preview">
        <span class="tie-save-row__label">Will save to</span>
        <code data-preview-target="avatar">{{avatar.preview}}</code>
      </div>
    </div>
  </section>

  <footer class="tie-save-dialog__footer">
    <button type="button" class="tie-btn tie-btn--ghost" data-action="reset-defaults">
      <i class="fa-solid fa-rotate-left"></i> Reset
    </button>
    <span class="tie-save-dialog__spacer"></span>
    <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="save">
      <i class="fa-solid fa-floppy-disk"></i> Save
    </button>
  </footer>

  <div class="tie-save-dialog__busy" aria-hidden="true">
    <i class="fa-solid fa-spinner fa-spin"></i> Saving...
  </div>
</form>