<div class="user-field">
  {{#if (or this.isEditing (not this.userField.id))}}
    <AdminFormRow @label="admin.user_fields.type">
      <ComboBox
        @content={{this.fieldTypes}}
        @value={{this.buffered.field_type}}
        @onChange={{fn (mut this.buffered.field_type)}}
      />
    </AdminFormRow>

    <AdminFormRow @label="admin.user_fields.name">
      <Input
        @value={{this.buffered.name}}
        class="user-field-name"
        maxlength="255"
      />
    </AdminFormRow>

    <AdminFormRow @label="admin.user_fields.description">
      <Input
        @value={{this.buffered.description}}
        class="user-field-desc"
        maxlength="255"
      />
    </AdminFormRow>

    {{#if this.bufferedFieldType.hasOptions}}
      <AdminFormRow @label="admin.user_fields.options">
        <ValueList @values={{this.buffered.options}} @inputType="array" />
      </AdminFormRow>
    {{/if}}

    <AdminFormRow @wrapLabel="true" @type="checkbox">
      <Input @type="checkbox" @checked={{this.buffered.editable}} />
      <span>{{i18n "admin.user_fields.editable.title"}}</span>
    </AdminFormRow>

    <AdminFormRow @wrapLabel="true" @type="checkbox">
      <Input @type="checkbox" @checked={{this.buffered.required}} />
      <span>{{i18n "admin.user_fields.required.title"}}</span>
    </AdminFormRow>

    <AdminFormRow @wrapLabel="true" @type="checkbox">
      <Input @type="checkbox" @checked={{this.buffered.show_on_profile}} />
      <span>{{i18n "admin.user_fields.show_on_profile.title"}}</span>
    </AdminFormRow>

    <AdminFormRow @wrapLabel="true" @type="checkbox">
      <Input @type="checkbox" @checked={{this.buffered.show_on_user_card}} />
      <span>{{i18n "admin.user_fields.show_on_user_card.title"}}</span>
    </AdminFormRow>

    <AdminFormRow @wrapLabel="true" @type="checkbox">
      <Input @type="checkbox" @checked={{this.buffered.searchable}} />
      <span>{{i18n "admin.user_fields.searchable.title"}}</span>
    </AdminFormRow>

    <PluginOutlet
      @name="after-admin-user-fields"
      @outletArgs={{hash buffered=this.buffered}}
    />

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