<div class="registration-form">
  <h1 class="registration-form-username">username: {{this.args.username}}</h1>
  <div class="registration-form-name-mail-wrapper">
    <div class="registration-form-displayname-wrapper">
      <label>
        Displayname
        <Input
          @type="text"
          @value={{this.displayname}}
          placeholder="Displayname"
        />
      </label>
    </div>
    <Util::MailEntry
      @wrapper-classes="registration-form-mail-wrapper"
      @input-classes="registration-form-mail-input"
      @data={{this.mail}}
    />
  </div>
  <div class="registration-form-description-wrapper">
    {{! TODO: Split into entry form on the left and live preview on the right }}
    <label for="registration-description">
      Description
    </label>
    <Textarea
      id="registration-description"
      @value={{this.description}}
      placeholder="Account description"
    />
  </div>
  <fieldset class="registration-form-gender-wrapper">
    <legend class="registration-form-gender-info">Add your preferred pronouns</legend>
    <Util::StringArray
      @list={{this.gender}}
      @onNewElement={{this.genderAddedHandler}}
      @onDeleteElement={{this.genderRemovedHandler}}
      @wrapper-classes=""
      @element-wrapper-classes=""
      @element-classes=""
      @remove-element-classes=""
      @add-element-classes=""
    />
  </fieldset>
  <fieldset class="register-form-being-wrapper">
    <legend class="registration-form-being-info">Select the type of being you are. Multiselect is possible</legend>
    <Util::Multiselect
      @elements={{this.beingTypes}}
      @wrapper-class=""
      @label-class=""
      @input-classes=""
    />
  </fieldset>
  <fieldset class="register-form-default-post-mode-wrapper">
    <legend class="registration-form-default-post-mode-info">Select the default mode for your posts</legend>
    <Util::OneOfArray
      @elements={{array "Public" "Local" "Followers" "Direct"}}
      @selected={{this.defaultpostmode}}
      @name="default-post-mode"
      @required={{true}}
    />
  </fieldset>
  <div class="register-form-follow-approval-wrapper">
    <label>
      Require approval for follow requests
      <Input
        @type="checkbox"
        name="Follow approval"
        @checked={{this.args.followapproval}}
      />
    </label>
  </div>
  <div class="register-form-indexable-wrapper">
    <label>
      Whether the account is indexable
      <Input @type="checkbox" name="Indexable" @checked={{this.indexable}} />
    </label>
  </div>
  <fieldset class="register-form-custom-fields-wrapper">
    <legend>Custom fields</legend>
    <Util::MapEdit @list={{this.customProperties}} />
  </fieldset>
  {{! TODO: Icon, Background, Banner, Bluesky toggle }}
</div>