jelhan/croodle

<div class="cr-form-wrapper box">
  <BsForm
    @formLayout="horizontal"
    @model={{this}}
    @onInvalid={{(scroll-first-invalid-element-into-view-port)}}
    @onSubmit={{this.createPoll}}
    novalidate
    as |form|
  >
    <form.element
      @label={{t "create.settings.answerType.label"}}
      @property="answerType"
      @showValidationOn={{array "change" "focusOut"}}
      @useIcons={{false}}
      class="answer-type"
      as |el|
    >
      <select
        id={{el.id}}
        class="custom-select"
        {{on "change" (pick "target.value" el.setValue)}}
        {{autofocus}}
      >
        {{#each this.answerTypes as |answerType|}}
          <option
            value={{answerType.id}}
            selected={{eq el.value answerType.id}}
          >
            {{t answerType.labelTranslation}}
          </option>
        {{/each}}
      </select>
    </form.element>
    <form.element
      @controlType="select"
      @label={{t "create.settings.expirationDate.label"}}
      @property="expirationDuration"
      @showValidationOn={{array "change" "focusOut"}}
      @useIcons={{false}}
      class="expiration-duration"
      as |el|
    >
      <select
        id={{el.id}}
        {{on "change" (pick "target.value" el.setValue)}}
        class="custom-select"
      >
        {{#each this.expirationDurations as |duration|}}
          <option value={{duration.id}} selected={{eq el.value duration.id}}>
            {{t duration.labelTranslation}}
          </option>
        {{/each}}
      </select>
    </form.element>
    <form.element
      @controlType="checkbox"
      @label={{t "create.settings.anonymousUser.label"}}
      @showValidationOn="change"
      @property="anonymousUser"
      class="anonymous-user"
    />
    <form.element
      @controlType="checkbox"
      @label={{t "create.settings.forceAnswer.label"}}
      @showValidationOn="change"
      @property="forceAnswer"
      class="force-answer"
    />

    <div class="row cr-steps-bottom-nav">
      <div class="col-6 col-md-8 order-12">
        <SaveButton
          @isPending={{form.isSubmitting}}
          data-test-button="submit"
        />
      </div>
      <div class="col-6 col-md-4 order-1 text-right">
        <BackButton @onClick={{this.previousPage}} />
      </div>
    </div>

    <BsModal
      @onHidden={{this.resetSavingPollFailedState}}
      @onSubmit={{form.submit}}
      @open={{this.savingPollFailed}}
      data-test-modal="saving-failed"
      as |modal|
    >
      <modal.header
        @closeButton={{false}}
        @title={{t "error.poll.savingFailed.title"}}
      />
      <modal.body>
        <p>
          {{t "error.poll.savingFailed.description"}}
        </p>
      </modal.body>
      <modal.footer>
        <BsButton @onClick={{modal.close}} data-test-button="abort">
          {{t "action.abort"}}
        </BsButton>
        <SaveButton
          @isPending={{form.isSubmitting}}
          @onClick={{modal.submit}}
          data-test-button="retry"
          type="button"
        >
          {{t "modal.save-retry.button-retry"}}
        </SaveButton>
      </modal.footer>
    </BsModal>
  </BsForm>
</div>