{{#let @form as |form|}}
  {{#each options as |option index|}}
    <form.element
      {{! show label only on first item }}
      @label={{unless index (t "create.options.options.label")}}
      @model={{option}}
      @property="title"
      class="option"
      as |el|
    >
      <div class="input-group">
        <el.control
          {{! first control should be autofocused }}
          @autofocus={{unless index true false}}
          @onChange={{action (mut el.value)}}
          @value={{el.value}}
          id={{el.id}}
        />
        <div class="input-group-append">
          <BsButton
            @onClick={{action "deleteOption" option}}
            @type="link"
            class="delete"
            {{! disable delete button if there is only one option }}
            disabled={{lte options.length 1}}
          >
            <span class="oi oi-trash" title={{t "create.options.button.delete.label"}} aria-hidden="true"></span>
            <span class="sr-only">{{t "create.options.button.delete.label"}}</span>
          </BsButton>
        </div>
      </div>

      <BsButton
        @onClick={{action "addOption" option}}
        @type="link"
        @size="sm"
        class="add float-left"
      >
        <span class="oi oi-plus" title={{t "create.options.button.add.label"}} aria-hidden="true"></span>
        <span class="sr-only">{{t "create.options.button.add.label"}}</span>
      </BsButton>
    </form.element>
  {{/each}}
{{/let}}