{{#if (or this.isEditing (not @userField.id))}}
  <div class="admin-config-area user-field">
    <div class="admin-config-area__primary-content">
      <div class="admin-config-area-card">
        <Form
          @data={{this.formData}}
          @onSubmit={{this.save}}
          {{did-insert this._focusName}}
          as |form transientData|
        >
          <form.Field
            @name="field_type"
            @title={{i18n "admin.user_fields.type"}}
            @format="large"
            @validation="required"
            as |field|
          >
            <field.Select as |select|>
              {{#each @fieldTypes as |fieldType|}}
                <select.Option
                  @value={{fieldType.id}}
                >{{fieldType.name}}</select.Option>
              {{/each}}
            </field.Select>
          </form.Field>

          <form.Field
            @name="name"
            @title={{i18n "admin.user_fields.name"}}
            @format="large"
            @validation="required"
            as |field|
          >
            <field.Input class="user-field-name" maxlength="255" />
          </form.Field>

          <form.Field
            @name="description"
            @title={{i18n "admin.user_fields.description"}}
            @format="large"
            @validation="required"
            as |field|
          >
            <field.Input class="user-field-desc" maxlength="1000" />
          </form.Field>

          {{#if
            (or
              (eq transientData.field_type "dropdown")
              (eq transientData.field_type "multiselect")
            )
          }}
            <form.Field
              @name="options"
              @title={{i18n "admin.user_fields.options"}}
              @format="large"
              @validation="required"
              as |field|
            >
              <field.Custom>
                <ValueList
                  @values={{transientData.options}}
                  @inputType="array"
                  @onChange={{field.set}}
                />
              </field.Custom>
            </form.Field>
          {{/if}}

          <form.Field
            @name="requirement"
            @title={{i18n "admin.user_fields.requirement.title"}}
            @validation="required"
            @onSet={{this.setRequirement}}
            @format="full"
            as |field|
          >
            <field.RadioGroup as |radioGroup|>
              <radioGroup.Radio @value="optional">
                {{i18n "admin.user_fields.requirement.optional.title"}}
              </radioGroup.Radio>
              <radioGroup.Radio @value="for_all_users" as |radio|>
                {{i18n "admin.user_fields.requirement.for_all_users.title"}}
                <radio.Description>{{i18n
                    "admin.user_fields.requirement.for_all_users.description"
                  }}</radio.Description>
              </radioGroup.Radio>
              <radioGroup.Radio @value="on_signup" as |radio|>
                {{i18n "admin.user_fields.requirement.on_signup.title"}}
                <radio.Description>{{i18n
                    "admin.user_fields.requirement.on_signup.description"
                  }}</radio.Description>
              </radioGroup.Radio>
            </field.RadioGroup>
          </form.Field>

          <form.CheckboxGroup
            class="user-field-preferences"
            @title={{i18n "admin.user_fields.preferences"}}
            as |group|
          >
            <group.Field
              @name="editable"
              @showTitle={{false}}
              @title={{i18n "admin.user_fields.editable.title"}}
              as |field|
            >
              <field.Checkbox disabled={{this.editableDisabled}} />
            </group.Field>
            <group.Field
              @name="show_on_profile"
              @showTitle={{false}}
              @title={{i18n "admin.user_fields.show_on_profile.title"}}
              as |field|
            >
              <field.Checkbox />
            </group.Field>
            <group.Field
              @name="show_on_user_card"
              @showTitle={{false}}
              @title={{i18n "admin.user_fields.show_on_user_card.title"}}
              as |field|
            >
              <field.Checkbox />
            </group.Field>
            <group.Field
              @name="searchable"
              @showTitle={{false}}
              @title={{i18n "admin.user_fields.searchable.title"}}
              as |field|
            >
              <field.Checkbox />
            </group.Field>
          </form.CheckboxGroup>

          <form.Actions>
            <form.Submit
              class="save"
              @icon="check"
              @label="admin.user_fields.save"
            />
            <form.Button
              @action={{this.cancel}}
              @label="admin.user_fields.cancel"
              class="btn-default"
            />
          </form.Actions>
        </Form>
      </div>
    </div>
  </div>
{{else}}
  <div class="user-field">
    <div class="row">
      <div class="form-display">
        <b class="name">{{@userField.name}}</b>
        <br />
        <span class="description">{{html-safe @userField.description}}</span>
      </div>
      <div class="form-display field-type">{{@userField.fieldTypeName}}</div>
      <div class="form-element controls">
        <DButton
          @action={{this.edit}}
          @icon="pencil"
          @label="admin.user_fields.edit"
          class="btn-default edit"
        />
        <DButton
          @action={{fn @destroyAction @userField}}
          @icon="trash-can"
          @label="admin.user_fields.delete"
          class="btn-danger cancel"
        />
        <DButton
          @action={{fn @moveUpAction @userField}}
          @icon="arrow-up"
          @disabled={{this.cantMoveUp}}
          class="btn-default"
        />
        <DButton
          @action={{fn @moveDownAction @userField}}
          @icon="arrow-down"
          @disabled={{this.cantMoveDown}}
          class="btn-default"
        />
      </div>
    </div>
    <div class="row user-field-flags">{{this.flags}}</div>
  </div>
{{/if}}