<form autocomplete="off">
  <div class="left-column">
    {{> "dnd5e.advancement-controls"}}
    <div class="form-group">
      <label>{{localize "DND5E.AdvancementScaleValueTypeLabel"}}</label>
      <div class="form-fields">
        <select name="configuration.type">
          {{selectOptions types selected=configuration.type}}
        </select>
        {{#if (eq configuration.type "distance")}}
          <select name="configuration.distance.units">
            {{selectOptions movementUnits selected=configuration.distance.units}}
          </select>
        {{/if}}
      </div>
      <p class="hint type-hint">
        {{localize type.hint}}
      </p>
    </div>
    <hr>

    <div class="form-group">
      <label>{{localize "DND5E.Identifier"}}</label>
      <div class="form-fields">
        <input name="configuration.identifier" type="text" value="{{configuration.identifier}}"
          placeholder="{{previewIdentifier}}">
      </div>
      <p class="hint identifier-hint">
        {{{localize "DND5E.AdvancementScaleValueIdentifierHint" class=classIdentifier identifier=previewIdentifier}}}
        <a class="identifier-hint-copy" data-tooltip="DND5E.IdentifierCopy">
          <i class="far fa-clipboard"></i>
        </a>
      </p>
    </div>
  </div>

  <div class="right-column level-list scale-values">
    {{#each levels as |data level|}}
      <div class="form-group">
        <label>{{level}}</label>
        <div class="form-fields">
          {{#if (eq @root.configuration.type "dice")}}
            {{numberInput data.value.number name=(concat "configuration.scale." level ".number") min=1 step=1
                          placeholder=data.placeholder.number}}
            <select name="configuration.scale.{{level}}.faces" data-dtype="Number" class="{{data.className}}">
              {{selectOptions @root.faces selected=data.value.faces blank=data.placeholder.faces}}
            </select>
          {{else}}
            <input type="{{#if @root.type.isNumeric}}number{{else}}text{{/if}}" step="any"
                   name="configuration.scale.{{level}}.value" value="{{data.value.value}}"
                   data-level="{{level}}" placeholder="{{data.placeholder.value}}">
          {{/if}}
        </div>
      </div>
    {{/each}}
  </div>
</form>
