<div {{did-insert this.fetchData}} {{did-update this.fetchData @slug @form}}>
  {{#if this.data.isRunning}}
    <div class="uk-flex uk-flex-center uk-flex-middle uk-height-small">
      <UkSpinner @ratio={{2}} />
    </div>
  {{else if this.changeset}}
    <ValidatedForm
      @model={{this.changeset}}
      @on-submit={{this.submit.perform}}
      as |f|
    >
      {{#if (and f.model.isDirty @slug)}}
        <div class="uk-alert-warning uk-animation-fade" uk-alert>
          <div uk-grid class="uk-grid-small">
            <div class="uk-width-auto uk-flex uk-flex-middle">
              <UkIcon @icon="warning" @ratio={{1.2}} />
            </div>
            <div class="uk-width-expand">
              <strong>{{t
                  "caluma.form-builder.question.minor-info-title"
                }}</strong>
              {{t "caluma.form-builder.question.minor-info"}}
            </div>
          </div>
        </div>
      {{/if}}

      <f.input
        @type="select"
        @options={{this.possibleTypes}}
        @optionLabelPath="label"
        @optionTargetPath="value"
        @label={{t "caluma.form-builder.question.type"}}
        @hint={{t "caluma.form-builder.question.type-disabled"}}
        @name="__typename"
        @required={{true}}
        @disabled={{not (is-empty @slug)}}
        @on-update={{this.updateType}}
      />

      <f.input
        @label={{t "caluma.form-builder.question.label"}}
        @name="label"
        @required={{true}}
        @on-update={{this.updateLabel}}
      />

      <div uk-grid class="uk-grid-small uk-margin">
        <div class="uk-width-expand">
          <f.input
            @name="slug"
            @label={{t "caluma.form-builder.question.slug"}}
            @required={{true}}
            @disabled={{not (is-empty @slug)}}
            @renderComponent={{component
              "cfb-slug-input"
              onUnlink=(fn (mut this.slugUnlinked) true)
            }}
          />
        </div>

        {{#if
          (not
            (or
              (has-question-type
                f.model "static" "calculated-float" "action-button"
              )
              (not (includes f.model.isRequired (array "true" "false")))
            )
          )
        }}
          <f.input
            @name="isRequired"
            @label={{t "caluma.form-builder.question.isRequired"}}
            @required={{true}}
            @renderComponent={{component
              "cfb-jexl-boolean-toggle-switch"
              size="small"
            }}
          />
        {{/if}}
      </div>

      {{#if (has-question-type f.model "calculated-float")}}
        <f.input
          @label={{t "caluma.form-builder.question.calcExpression"}}
          @name="calcExpression"
          @renderComponent={{component "cfb-code-editor" language="jexl"}}
        />
      {{/if}}

      {{#if (has-question-type f.model "static")}}
        <f.input
          @label={{t "caluma.form-builder.question.staticContent"}}
          @name="staticContent"
          @renderComponent={{component "cfb-code-editor" language="markdown"}}
        />
      {{/if}}

      {{#if (has-question-type f.model "action-button")}}
        <f.input
          @label={{t "caluma.form-builder.question.confirmationText"}}
          @name="infoText"
          @type="textarea"
          {{autoresize mode="height"}}
        />
      {{else}}
        <f.input
          @label={{t "caluma.form-builder.question.infoText"}}
          @name="infoText"
          @renderComponent={{component "cfb-code-editor" language="markdown"}}
        />
      {{/if}}

      {{#if (not (has-question-type f.model "action-button" "static" "form"))}}
        <f.input
          @name="hintText"
          @label={{t "caluma.form-builder.question.hintText"}}
        />
      {{/if}}

      {{#if (has-question-type f.model "text" "textarea" "integer" "float")}}
        <f.input
          @name="placeholder"
          @label={{t "caluma.form-builder.question.placeholder"}}
        />
      {{/if}}

      {{#if
        (and
          @slug
          (has-question-type
            f.model
            "text"
            "textarea"
            "integer"
            "float"
            "choice"
            "multiple-choice"
            "date"
            "table"
          )
        )
      }}
        <f.input
          @name="defaultAnswer"
          @label={{t "caluma.form-builder.question.defaultValue"}}
          @renderComponent={{component "cfb-form-editor/question/default"}}
        />
      {{/if}}

      {{#if (has-question-type f.model "text" "textarea")}}
        <f.input
          @type="number"
          @name="minLength"
          @label={{t "caluma.form-builder.question.min-length"}}
        />

        <f.input
          @type="number"
          @name="maxLength"
          @label={{t "caluma.form-builder.question.max-length"}}
        />
      {{/if}}

      {{#if
        (not
          (has-question-type
            f.model "action-button" "calculated-float" "static" "form"
          )
        )
      }}
        <f.input
          @name="formatValidators"
          @label={{t "caluma.form-builder.question.formatValidators"}}
          @placeholder={{t "caluma.form-builder.question.no-selection"}}
          @required={{false}}
          @renderComponent={{component
            "cfb-form-editor/question/validation"
            questionType=f.model.__typename
          }}
          @on-update={{changeset-set f.model "formatValidators"}}
          @value={{changeset-get f.model "formatValidators"}}
        />
      {{/if}}

      {{#if (has-question-type f.model "action-button")}}
        <f.input
          @type="select"
          @options={{this.possibleActions}}
          @optionLabelPath="label"
          @optionTargetPath="value"
          @label={{t "caluma.form-builder.question.action"}}
          @name="action"
          @required={{true}}
        />
        <f.input
          @type="select"
          @options={{this.possibleColors}}
          @optionLabelPath="label"
          @optionTargetPath="value"
          @label={{t "caluma.form-builder.question.color"}}
          @name="color"
          @required={{true}}
        />
      {{/if}}

      {{#if (has-question-type f.model "float")}}
        <div uk-grid class="uk-grid-small uk-child-width-1-2 uk-margin">
          <div>
            <f.input
              @type="number"
              @name="floatMinValue"
              @label={{t "caluma.form-builder.question.min-value"}}
              step="any"
            />
          </div>
          <div>
            <f.input
              @type="number"
              @name="floatMaxValue"
              @label={{t "caluma.form-builder.question.max-value"}}
              step="any"
            />
          </div>
          <div>
            <f.input
              @type="number"
              @name="floatStep"
              @label={{t "caluma.form-builder.question.step"}}
              step="any"
            />
          </div>
        </div>
      {{/if}}

      {{#if (has-question-type f.model "integer")}}
        <div uk-grid class="uk-grid-small uk-child-width-1-2 uk-margin">
          <div>
            <f.input
              @type="number"
              @name="integerMinValue"
              @label={{t "caluma.form-builder.question.min-value"}}
            />
          </div>

          <div>
            <f.input
              @type="number"
              @name="integerMaxValue"
              @label={{t "caluma.form-builder.question.max-value"}}
            />
          </div>
        </div>
      {{/if}}

      {{#if (has-question-type f.model "choice" "multiple-choice")}}
        <f.input
          @name="options"
          @label={{t "caluma.form-builder.question.options"}}
          @required={{true}}
          @renderComponent={{component "cfb-form-editor/question/options"}}
        />
      {{/if}}

      {{#if
        (has-question-type f.model "dynamic-choice" "dynamic-multiple-choice")
      }}
        <f.input
          @name="dataSource"
          @type="select"
          @required={{true}}
          @label={{t "caluma.form-builder.question.dataSource"}}
          @options={{or this.availableDataSources.lastSuccessful.value (array)}}
          @optionTargetPath="name"
          @optionLabelPath="info"
          @prompt={{t "caluma.form-builder.question.no-selection"}}
        />
      {{/if}}

      {{#if (not (has-question-type f.model "action-button"))}}
        <f.input
          @name="meta.hideLabel"
          @required={{true}}
          @label={{t "caluma.form-builder.question.hideLabel"}}
          @renderComponent={{component "cfb-toggle-switch" size="small"}}
          @on-update={{changeset-set f.model "meta.hideLabel"}}
          @value={{changeset-get f.model "meta.hideLabel"}}
        />
      {{/if}}

      {{#if (has-question-type f.model "table")}}
        <div class="uk-margin">
          <f.input
            @name="rowForm.slug"
            @label={{t "caluma.form-builder.question.rowForm"}}
            @required={{true}}
            @on-update={{this.updateRowForm}}
            @value={{find-by
              "slug"
              (changeset-get f.model "rowForm.slug")
              this.availableForms.lastSuccessful.value
            }}
            as |fi|
          >
            <PowerSelect
              @options={{or this.availableForms.lastSuccessful.value (array)}}
              @selected={{fi.value}}
              @placeholder={{t "caluma.form-builder.question.no-selection"}}
              @onBlur={{fi.setDirty}}
              @onChange={{fi.update}}
              @searchField="slug"
              @searchEnabled={{true}}
              @searchPlaceholder={{t
                "caluma.form-builder.question.search-placeholder"
              }}
              @noMatchesMessage={{t
                "caluma.form-builder.question.search-empty"
              }}
              @renderInPlace={{true}}
              @dropdownClass="select-row-form-dropdown"
              data-test-select-row-form
              as |form|
            >
              <span
                class="uk-width-auto uk-margin-small-right uk-text-truncate"
              >
                {{form.slug}}
              </span>
              <span
                class="highlight-option uk-text-muted uk-width-expand uk-margin-small-right uk-text-small uk-text-truncate"
              >
                {{form.name}}
              </span>
            </PowerSelect>
          </f.input>
        </div>

        {{#if @slug}}
          <f.input
            @type="checkbox-group"
            @name="meta.columnsToDisplay"
            @label={{t "caluma.form-builder.question.columnsToDisplay"}}
            @options={{this.columnsToDisplayOptions}}
          />
        {{/if}}
      {{/if}}

      {{#if (has-question-type f.model "form")}}
        <f.input
          @name="subForm.slug"
          @label={{t "caluma.form-builder.question.subForm"}}
          @required={{true}}
          @on-update={{this.updateSubForm}}
          @value={{find-by
            "slug"
            (changeset-get f.model "subForm.slug")
            this.availableForms.lastSuccessful.value
          }}
          as |fi|
        >
          <PowerSelect
            @options={{or this.availableForms.lastSuccessful.value (array)}}
            @selected={{fi.value}}
            @placeholder={{t "caluma.form-builder.question.no-selection"}}
            @onBlur={{fi.setDirty}}
            @onChange={{fi.update}}
            @searchField="slug"
            @searchEnabled={{true}}
            @searchPlaceholder={{t
              "caluma.form-builder.question.search-placeholder"
            }}
            @noMatchesMessage={{t "caluma.form-builder.question.search-empty"}}
            @renderInPlace={{true}}
            @dropdownClass="select-sub-form-dropdown"
            data-test-select-sub-form
            as |form|
          >
            <span class="uk-width-auto uk-margin-small-right uk-text-truncate">
              {{form.slug}}
            </span>
            <span
              class="highlight-option uk-text-muted uk-width-expand uk-margin-small-right uk-text-small uk-text-truncate"
            >
              {{form.name}}
            </span>
          </PowerSelect>
        </f.input>
      {{/if}}

      <f.input
        @name="meta.widgetOverride"
        @label={{t "caluma.form-builder.question.widgetOverride"}}
        @type="select"
        @allowClear={{true}}
        @optionTargetPath="component"
        @optionLabelPath="label"
        @options={{this.availableOverrides}}
        @prompt={{t "caluma.form-builder.question.no-selection"}}
        @promptIsSelectable={{true}}
      />

      <f.input
        @name="isArchived"
        @label={{t "caluma.form-builder.question.isArchived"}}
        @required={{true}}
        @renderComponent={{component "cfb-toggle-switch" size="small"}}
      />

      <CfbFormEditor::CfbAdvancedSettings>
        {{#if (has-question-type f.model "action-button")}}
          <f.input
            @name="validateOnEnter"
            @required={{true}}
            @label={{t "caluma.form-builder.question.validateOnEnter"}}
            @renderComponent={{component "cfb-toggle-switch" size="small"}}
          />
          <f.input
            @name="showValidation"
            @required={{true}}
            @label={{t "caluma.form-builder.question.showValidation"}}
            @renderComponent={{component "cfb-toggle-switch" size="small"}}
          />
        {{/if}}

        <f.input
          @label={{t "caluma.form-builder.question.isHidden"}}
          @name="isHidden"
          @renderComponent={{component "cfb-code-editor" language="jexl"}}
        />

        {{#if
          (not
            (has-question-type
              f.model "static" "calculated-float" "action-button"
            )
          )
        }}
          <f.input
            @label={{t "caluma.form-builder.question.isRequired"}}
            @name="isRequired"
            @renderComponent={{component "cfb-code-editor" language="jexl"}}
          />
        {{/if}}

        <f.input
          @label={{t "caluma.form-builder.question.meta"}}
          @name="meta"
          @renderComponent={{component "cfb-code-editor" language="json"}}
        />
      </CfbFormEditor::CfbAdvancedSettings>

      <div class="uk-flex uk-flex-between uk-flex-middle uk-flex-row-reverse">
        {{#unless this.isNew}}
          <CfbFormEditor::QuestionUsage
            @slug={{changeset-get f.model "slug"}}
            class="uk-flex-last"
          />
        {{/unless}}

        <f.submit
          @disabled={{f.loading}}
          @label={{t "caluma.form-builder.global.save"}}
        />
      </div>
    </ValidatedForm>
  {{else}}
    <div
      class="uk-text-center uk-text-muted uk-padding uk-padding-remove-horizontal"
    >
      <UkIcon @icon="bolt" @ratio={{5}} />
      <p>{{t "caluma.form-builder.question.not-found" slug=@slug}}</p>
    </div>
  {{/if}}
</div>