<form autocomplete="off" onsubmit="event.preventDefault();">
  <p class="instructions">
    {{localize instructions}}
  </p>
  {{#each settings as |setting|}}
    <!-- {{setting.key}} -->
    <div class="form-group">
      <label for="{{setting.key}}">
        {{localize setting.name}}
      </label>
      <div class="form-fields">
        {{#if setting.isSelect}}
          <select name="{{setting.key}}">
            {{#select setting.value}}
              {{#each setting.choices as |label value|}}
                <option value="{{value}}">
                  {{localize label}}
                </option>
              {{/each}}
            {{/select}}
          </select>
        {{else if setting.isCheckbox}}
          <input type="checkbox" name="{{setting.key}}" {{checked setting.value}} />
        {{else if setting.isRange}}
          <input
            type="range"
            name="{{setting.key}}"
            value="{{setting.value}}"
            data-dtype="{{setting.type}}"
            value="{{setting.range.value}}"
            min="{{setting.range.min}}"
            max="{{setting.range.max}}"
            step="{{setting.range.step}}"
          />
          <span class="range-value">
            {{setting.value}}
          </span>
        {{else if setting.isNumber}}
          <input type="number" name="{{setting.key}}" value="{{setting.value}}" data-dtype="{{setting.type}}" />
        {{else if setting.isText}}
          <input type="text" name="{{setting.key}}" value="{{setting.value}}" data-dtype="{{setting.type}}" />
        {{else if setting.isFilepicker}}
          {{filePicker target=setting.name type="imagevideo"}}
          <input
            class="image"
            type="text"
            name="{{setting.key}}"
            value="{{setting.value}}"
            data-dtype="{{setting.type}}"
          />
        {{/if}}
      </div>
      <p class="notes">
        {{localize setting.hint}}
      </p>
    </div>
  {{/each}}
  <div class="form-group buttons">
    <button type="submit" name="submit">
      <i class="far fa-save"></i>
      {{localize "SETTINGS.Save"}}
    </button>
    <button type="reset" name="reset">
      <i class="fas fa-undo"></i>
      {{localize "pf2e-dorako-ui.settings.reset-changes"}}
    </button>
  </div>
</form>