<div ...attributes {{on "moved" this._handleMoved}}>
  <div class="uk-text-center uk-margin">
    {{#if (includes this.mode (array "remove" "add"))}}
      <button
        data-test-cancel
        type="button"
        class="uk-icon-button uk-animation-slide-top"
        uk-icon="close"
        title={{t "caluma.form-builder.global.cancel"}}
        {{on "click" (fn this.setMode "reorder")}}
      >
      </button>
    {{else}}
      <button
        data-test-remove-question
        type="button"
        class="uk-icon-button uk-animation-slide-left"
        uk-icon="minus"
        title={{t "caluma.form-builder.question.remove"}}
        {{on "click" (fn this.setMode "remove")}}
      >
      </button>
      <button
        data-test-add-question
        type="button"
        class="uk-icon-button uk-margin-left uk-animation-slide-right"
        uk-icon="plus"
        title={{t "caluma.form-builder.question.add"}}
        {{on "click" (fn this.setMode "add")}}
      >
      </button>
    {{/if}}
  </div>

  {{#if (includes this.mode (array "remove" "add"))}}
    <div class="uk-search uk-search-default uk-width-1-1">
      <span class="uk-search-icon-flip" uk-search-icon></span>
      <input
        class="uk-search-input"
        type="search"
        placeholder="{{t 'caluma.form-builder.global.search'}}..."
        aria-label="{{t 'caluma.form-builder.global.search'}}"
        value={{this.search}}
        {{on "input" this.searchTask.perform}}
      />
    </div>
  {{/if}}

  <ul
    data-test-question-list
    uk-sortable="handle: .uk-sortable-handle;"
    class="uk-list"
    id="question-list"
  >
    {{#if (eq this.mode "add")}}
      <li class="uk-text-small uk-text-muted">
        {{t "caluma.form-builder.question.search"}}
        <a
          href="#"
          data-test-new-question
          {{on "click" this.createNewQuestion}}
        >
          {{t "caluma.form-builder.question.create"}}
        </a>
      </li>
    {{/if}}
    {{#if this.questions.isRunning}}
      <li class="uk-text-center"><UkSpinner @ratio={{1.5}} /></li>
    {{else}}
      {{#each this.questions.value key="node.slug" as |item|}}
        <CfbFormEditor::QuestionList::Item
          data-test-question-list-item={{item.node.slug}}
          @mode={{this.mode}}
          @question={{item.node}}
          @onEditQuestion={{@onEditQuestion}}
          @onRemoveQuestion={{this.removeQuestion.perform}}
          @onAddQuestion={{this.addQuestion.perform}}
          @onClickForm={{@onClickForm}}
        />
      {{else}}
        <li
          data-test-question-list-empty
          class="uk-text-small uk-text-muted uk-text-center"
        >
          <UkIcon @icon="search" @ratio={{4}} />
          <p>
            {{#if (eq this.mode "reorder")}}
              {{t "caluma.form-builder.question.empty"}}
            {{else}}
              {{t "caluma.form-builder.global.empty-search"}}
            {{/if}}
          </p>
        </li>
      {{/each}}
      {{#if (and this.hasNextPage (eq this.mode "add"))}}
        <li class="uk-text-center cfb-pointer"><a
            href="#"
            {{on "click" this.loadMore}}
          >{{t "caluma.form-builder.question.loadMore"}}</a></li>
      {{/if}}
    {{/if}}
  </ul>
</div>