<form class='{{cssClass}}' autocomplete='off'>
  <div class='move-mode-editor table'>
    <div class='label'>{{localize 'GURPS.moveModeType'}}</div>
    <div class='label'>{{localize 'GURPS.basic'}}</div>
    <div class='label'>{{localize 'GURPS.enhanced'}}</div>
    <div class='label'>{{localize 'GURPS.default'}}</div>
    <a id='template-add' class='move-mode-control button icon' data-action='create'><i class='fas fa-plus'></i></a>

    {{#each modes}}
      <div style='display: flex; flex-flow: column nowrap'>
        <select class='move-mode-control' data-action='mode' data-key='{{@key}}' style='width: 100%;'>
          {{#each (moveOptions this)}}
            <option value='{{this}}' {{select-if this ../mode}}>{{localize this}}</option>
          {{/each}}
          <option value='other'>&lt;{{localize 'GURPS.moveModeOther'}}&gt;</option>
        </select>
        <div class='expand-container' style='overflow: hidden; line-height: 0;'>
          <input id='expand-contract-{{@key}}' class='expand-contract move-mode-control contracted' data-action='other'
            data-key='{{@key}}' type='text' value='{{localize mode}}' />
        </div>
      </div>
      <input class='move-mode-control' data-action='basic' data-key='{{@key}}' type='number' value='{{basic}}'
        style='text-align: center;' />
      <input class='move-mode-control' data-action='enhanced' data-key='{{@key}}' type='number' value='{{enhanced}}'
        style='text-align: center;' />
      <input class='move-mode-control' data-action='default' data-key='{{@key}}' type='checkbox' {{checked default}}
        {{disabled (lt (length ../modes) 2)}} />
      {{#unless default}}
        <a class='move-mode-control' data-action='delete' data-key='{{@key}}' title='{{localize "GURPS.delete"}}'
          style='padding: 6px 20px 0 10px;' {{disabled default}}>
          <i class='fas fa-trash'></i>
        </a>
      {{else}}
        <div></div>
      {{/unless}}
    {{/each}}
  </div>
</form>