<li
  id={{this.elementId}}
  class={{if
    @question.isArchived
    "cfb-form-editor__question-list__item__archived"
  }}
  {{did-insert (fn (optional @onRegister) this.elementId @question.slug)}}
  {{will-destroy (fn (optional @onUnregister) this.elementId @question.slug)}}
  ...attributes
>
  <div class="uk-flex uk-flex-middle">
    {{#if (eq @mode "reorder")}}
      <i
        role="button"
        data-test-sort-handle
        uk-icon="menu"
        class="uk-sortable-handle uk-margin-small-right"
      >
      </i>
    {{else if (eq @mode "remove")}}
      <i
        role="button"
        data-test-remove-item
        uk-icon="minus"
        class="cfb-pointer uk-text-danger uk-margin-small-right"
        {{on "click" (fn (optional @onRemoveQuestion) @question)}}
      >
      </i>
    {{else if (eq @mode "add")}}
      <i
        role="button"
        data-test-add-item
        uk-icon="plus"
        class="cfb-pointer uk-text-success uk-margin-small-right"
        {{on "click" (fn (optional @onAddQuestion) @question)}}
      >
      </i>
    {{/if}}

    {{#if (eq @mode "reorder")}}
      <a
        data-test-edit-question
        href="#"
        class={{if
          this.isActive
          "uk-width-auto uk-margin-small-right uk-text-bold"
          "uk-width-auto uk-margin-small-right"
        }}
        {{on "click" (fn this.editQuestion @question)}}
      >
        {{@question.slug}}
        {{#if @question.isArchived}}({{t
            "caluma.form-builder.question.isArchived"
          }}){{/if}}
      </a>
    {{else}}
      <span
        class={{if
          this.isActive
          "uk-width-auto uk-margin-small-right uk-text-bold"
          "uk-width-auto uk-margin-small-right"
        }}
      >{{@question.slug}}</span>
    {{/if}}

    <span
      class="{{if this.showFormLink 'uk-width-auto' 'uk-width-expand'}}
        uk-margin-small-right uk-text-small uk-text-muted uk-text-truncate"
    >
      {{@question.label}}
    </span>
    {{#if this.showFormLink}}
      <span uk-icon="link" class="uk-flex-none"></span>
      <a
        data-test-link-subform
        href="#"
        class="uk-width-expand uk-margin-small-right uk-text-small uk-text-truncate"
        {{on
          "click"
          (fn this.clickForm (or @question.subForm @question.rowForm))
        }}
      >
        {{or @question.subForm.name @question.rowForm.name}}
      </a>
    {{/if}}

    <span class="uk-position-relative uk-width-auto">
      <UkBadge
        {{uk-tooltip
          (if
            this.hidden
            (t
              (concat
                "caluma.form-builder.question-list.hidden." this.hiddenType
              )
            )
          )
          pos="left"
        }}
        class="cfb-form-editor__question-list__item__type
          {{if
            this.hidden
            'cfb-form-editor__question-list__item__type--hidden'
          }}"
        @label={{t
          (concat "caluma.form-builder.question.types." @question.__typename)
        }}
        title={{if
          this.hidden
          (t
            (concat "caluma.form-builder.question-list.hidden." this.hiddenType)
          )
        }}
      />
      {{#if this.required}}
        <span
          {{uk-tooltip
            (t
              (concat
                "caluma.form-builder.question-list.required." this.requiredType
              )
            )
            pos="top-left"
          }}
          title={{t
            (concat
              "caluma.form-builder.question-list.required." this.requiredType
            )
          }}
          class="uk-position-top-right cfb-form-editor__question-list__item__required cfb-form-editor__question-list__item__required--{{this.requiredType}}"
        >
        </span>
      {{/if}}
    </span>
  </div>
</li>