<form class="challenge-builder-form">
  <datalist id="dc-presets">
    {{#each dcPresets}}
    <option value="{{this.dc}}" label="{{this.name}}">
    {{/each}}
    {{#if dcOptions}}
    {{#each dcOptions}}
    <option value="{{this.dc}}" label="{{this.label}}">
    {{/each}}
    {{/if}}
  </datalist>

  <div class="challenge-dialog-content">
    <label>
      {{localize "STORYFRAME.ChallengeBuilder.ChallengeName"}}
      <input type="text" name="challengeName" placeholder="{{localize "STORYFRAME.ChallengeBuilder.ChallengeNamePlaceholder"}}" value="{{#if initialData}}{{initialData.name}}{{/if}}" required autofocus>
    </label>

    <label>
      {{localize "STORYFRAME.ChallengeBuilder.ChallengeImage"}}
      <input type="text" name="challengeImage" placeholder="{{localize "STORYFRAME.ChallengeBuilder.ChallengeImagePlaceholder"}}" value="{{#if initialData}}{{initialData.image}}{{/if}}">
      <button type="button" class="challenge-pick-image" data-action="pickImage">
        <i class="fas fa-image"></i> {{localize "STORYFRAME.ChallengeBuilder.PickImage"}}
      </button>
    </label>

    {{#unless editMode}}
    <div class="save-checkbox-wrapper">
      <input type="checkbox" name="saveToLibrary" id="save-to-library">
      <label for="save-to-library">{{localize "STORYFRAME.ChallengeBuilder.SaveToLibrary"}}</label>
    </div>
    {{/unless}}

    <div class="options-section-label">{{localize "STORYFRAME.ChallengeBuilder.ChallengeOptions"}}</div>
    <div class="challenge-options-list">
      {{#if hasInitialOption}}
      <div class="challenge-option-card" data-option-index="0">
        <div class="challenge-option-header">
          <input type="text" name="option-0-name" class="option-name-input" value="" placeholder="{{localize "STORYFRAME.ChallengeBuilder.OptionLabel" num=1}}">
        </div>
        <div class="challenge-option-fields">
          <div class="challenge-option-field">
            <label>{{localize "STORYFRAME.UI.Labels.Skills"}}</label>
            <div class="skills-list" data-option-index="0">
              <div class="skill-dc-row" data-skill-index="0">
                <div class="skill-select">
                  <select name="option-0-skill-0" class="skill-dropdown" data-skill-index="0">
                    <option value="">{{localize "STORYFRAME.UI.Labels.SelectSkill"}}</option>
                    {{#each skills}}
                    <option value="{{this.slug}}" data-actions="{{this.actionsJson}}" data-check-type="skill">{{this.name}}</option>
                    {{/each}}
                    {{#if hasLoreSkills}}
                    <optgroup label="{{localize "STORYFRAME.ChallengeBuilder.LoreSkills"}}">
                      {{#each loreSkills}}
                      <option value="{{this.slug}}" data-check-type="skill">{{this.name}}</option>
                      {{/each}}
                    </optgroup>
                    {{/if}}
                  </select>
                </div>
                {{#if isPF2e}}
                <div class="action-select" style="display: none;">
                  <select name="option-0-action-0" class="action-dropdown">
                    <option value="">{{localize "STORYFRAME.ChallengeBuilder.NoAction"}}</option>
                  </select>
                </div>
                <div class="variant-select" style="display: none;">
                  <select name="option-0-variant-0" class="variant-dropdown">
                    <option value="">—</option>
                  </select>
                </div>
                {{/if}}
                <div class="dc-input-group">
                  <input type="number" name="option-0-dc-0" class="dc-number-input" min="1" placeholder="{{localize "STORYFRAME.ChallengeBuilder.DC"}}">
                  <button type="button" class="dc-preset-btn" data-action="toggleDCPreset" data-row-type="skill" data-option-index="0" data-row-index="0">
                    <i class="fas fa-bookmark"></i>
                  </button>
                </div>
                <div class="proficiency-select sf-hidden">
                  <select name="option-0-proficiency-0" class="proficiency-dropdown" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.MinProficiency"}}">
                    <option value="0">{{localize "STORYFRAME.ChallengeBuilder.Proficiency.Any"}}</option>
                    {{#if isPF2e}}
                    <option value="1">{{localize "STORYFRAME.ChallengeBuilder.Proficiency.Trained"}}</option>
                    <option value="2">{{localize "STORYFRAME.ChallengeBuilder.Proficiency.Expert"}}</option>
                    <option value="3">{{localize "STORYFRAME.ChallengeBuilder.Proficiency.Master"}}</option>
                    <option value="4">{{localize "STORYFRAME.ChallengeBuilder.Proficiency.Legendary"}}</option>
                    {{else}}
                    <option value="1">{{localize "STORYFRAME.ChallengeBuilder.Proficiency.Proficient"}}</option>
                    <option value="2">{{localize "STORYFRAME.ChallengeBuilder.Proficiency.Expertise"}}</option>
                    {{/if}}
                  </select>
                </div>
                <div class="secret-checkbox sf-hidden">
                  <input type="checkbox" name="option-0-secret-0" id="option-0-secret-0" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.SecretRoll"}}">
                  <label for="option-0-secret-0" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.SecretRoll"}}">
                    <i class="fas fa-eye-slash"></i>
                  </label>
                </div>
              </div>
            </div>
            <button type="button" class="add-skill-btn" data-action="addSkill" data-option-index="0">
              <i class="fas fa-plus"></i> {{localize "STORYFRAME.UI.Labels.AddSkill"}}
            </button>
          </div>
          {{#if hasSaves}}
          <div class="challenge-option-field saves-section">
            <label>{{localize "STORYFRAME.UI.Categories.SavingThrows"}}</label>
            <div class="saves-list" data-option-index="0">
              <!-- Saves will be added dynamically via addSave action -->
            </div>
            <button type="button" class="add-save-btn" data-action="addSave" data-option-index="0">
              <i class="fas fa-plus"></i> {{localize "STORYFRAME.UI.Labels.AddSave"}}
            </button>
          </div>
          {{/if}}
        </div>
      </div>
      {{/if}}
    </div>

    <button type="button" class="challenge-add-option" data-action="addOption">
      <i class="fas fa-plus"></i> {{localize "STORYFRAME.ChallengeBuilder.AddOption"}}
    </button>
  </div>

  <footer class="form-footer">
    <button type="button" class="save-only-btn" data-action="saveOnly">
      <i class="fas fa-save"></i> {{#if editMode}}{{localize "STORYFRAME.UI.Labels.Update"}}{{else}}{{localize "STORYFRAME.UI.Labels.SaveToLibrary"}}{{/if}}
    </button>
    <button type="button" class="submit-btn" data-action="submit">
      <i class="fas fa-paper-plane"></i> {{#if editMode}}{{localize "STORYFRAME.ChallengeBuilder.UpdateAndPresent"}}{{else}}{{localize "STORYFRAME.ChallengeBuilder.PresentChallenge"}}{{/if}}
    </button>
  </footer>
</form>
