{{#if this.data.isLoading}}
  <div class="uk-flex uk-flex-center uk-flex-middle uk-height-small">
    <UkSpinner ratio="2" />
  </div>
{{else if this.dataIsLoaded}}
  <ValidatedForm
    @model={{changeset this.data.value this.Validations}}
    @on-submit={{this.submit.perform}}
    as |f|
  >
    <f.input
      @type="text"
      @label={{t "caluma.form-builder.form.name"}}
      @name="name"
      @required={{true}}
      @on-update={{this.updateName}}
    />

    <f.input
      @type="text"
      @name="slug"
      @label={{t "caluma.form-builder.form.slug"}}
      @required={{true}}
      @disabled={{not (is-empty @slug)}}
      @renderComponent={{component
        "cfb-slug-input"
        onUnlink=(fn (mut this.slugUnlinked) true)
      }}
    />

    <f.input
      @name="description"
      @type="textarea"
      @label={{t "caluma.form-builder.form.description"}}
      {{autoresize mode="height"}}
    />

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

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

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

    <div class="uk-text-right">
      <CfbFormEditor::CopyModal @item={{this.data.value}} as |modal|>
        <f.button
          @disabled={{f.loading}}
          @label={{t "caluma.form-builder.copy-modal.submit"}}
          {{on "click" modal.toggle}}
          data-test-copy-form-button={{@slug}}
        />
      </CfbFormEditor::CopyModal>

      <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.form.not-found" slug=@slug}}</p>
  </div>
{{/if}}