<form class="{{classes}}" autocomplete="off">
  <section>
    <header class="effect-change effects-header flexrow">
      <div class="key">{{localize "midi-qol.MacroName"}}</div>
      <div class="value">{{localize "midi-qol.MacroPass"}}</div>
      <div class="effect-controls">
          <a class="effect-control macro-control add-macro" data-action="add"><i class="far fa-plus-square"></i></a>
      </div>
  </header>
    <div class="midi-qol-box">
      <ol class="changes-list">
        {{#each onUseMacroParts.items}}
        <li class="effect-change macro-change flexrow" data-macroPart="{{@index}}">
          <div class = "key">
          <input type="text" name="onUseMacroParts.items.{{@index}}.macroName" value="{{this.macroName}}">
          </div>
          <div class="value">
          <select name="onUseMacroParts.items.{{@index}}.option" data-dtype="String">
            {{selectOptions ../MacroPassOptions selected=this.option}}
          </select>
        </div>
        <div class="effect-controls">
          <a class="effect-control macro-control delete-macro" data-action="delete"><i class="fas fa-trash"></i></a>
        </div>
        </li>
        {{/each}}
      </ol>
    </div>
  </section>
</form>