<form class='{{cssClass}}' autocomplete='off'>
  <div class='splitdr-editor table' style='display: grid; grid-template-columns: 1fr min-content min-content;'>
    <div class='label'>{{localize 'GURPS.addDamageType'}}</div>
    <div class='label'>{{localize 'GURPS.splitDrValue'}}</div>
    {{#unless location.split}}
      <a id='template-add' class='splitdr-control button icon' data-action='create'><i class='fas fa-plus'></i></a>
    {{else}}
      <div></div>
    {{/unless}}

    {{#each location.split as |this key|}}
      {{! trickery to get @key ... there will be only one property}}
      <div style='display: flex; flex-flow: column nowrap'>
        <select class='splitdr-control' data-action='type' style='width: 100%;'>
          {{#each (damageTypeOptions key)}}
            <option value='{{this}}' {{select-if this key}}>{{localize (concat 'GURPS.damageAbbrev' 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-splitdr'
            class='expand-contract splitdr-control contracted'
            data-action='other'
            type='text'
            value='{{localize type}}'
          />
        </div>
      </div>
      <input class='splitdr-control' data-action='value' type='number' value='{{this}}' style='text-align: center;' />
      <a
        class='splitdr-control'
        data-action='delete'
        data-key='{{@key}}'
        title='{{localize "GURPS.delete"}}'
        style='padding: 6px 20px 0 10px;'
      >
        <i class='fas fa-trash'></i>
      </a>
    {{/each}}
  </div>
</form>