- max_first_name_length = max_last_name_length = 127
- omniauth_providers_placement ||= :bottom
- borderless ||= false

.gl-mb-3.gl-p-4{ class: (borderless ? '' : 'gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base') }
  - if show_omniauth_providers && omniauth_providers_placement == :top
    = render 'devise/shared/signup_omniauth_providers_top'

  = form_for(resource, as: "new_#{resource_name}", url: url, html: { class: 'new_user gl-show-field-errors', 'aria-live' => 'assertive' }) do |f|
    .devise-errors
      = render 'devise/shared/error_messages', resource: resource
    - if Gitlab::CurrentSettings.invisible_captcha_enabled
      = invisible_captcha nonce: true, autocomplete: SecureRandom.alphanumeric(12)
    .name.form-row
      .col.form-group
        = f.label :first_name, _('First name'), for: 'new_user_first_name', class: 'label-bold'
        = f.text_field :first_name,
          class: 'form-control gl-form-input top js-block-emoji js-validate-length',
          data: { max_length: max_first_name_length,
          max_length_message: s_('SignUp|First name is too long (maximum is %{max_length} characters).') % { max_length: max_first_name_length },
          qa_selector: 'new_user_first_name_field' },
          required: true,
          title: _('This field is required.')
      .col.form-group
        = f.label :last_name, _('Last name'), for: 'new_user_last_name', class: 'label-bold'
        = f.text_field :last_name,
          class: 'form-control gl-form-input top js-block-emoji js-validate-length',
          data: { max_length: max_last_name_length,
          max_length_message: s_('SignUp|Last name is too long (maximum is %{max_length} characters).') % { max_length: max_last_name_length },
          qa_selector: 'new_user_last_name_field' },
          required: true,
          title: _('This field is required.')
    .username.form-group
      = f.label :username, class: 'label-bold'
      = f.text_field :username,
        class: 'form-control gl-form-input middle js-block-emoji js-validate-length js-validate-username',
        data: signup_username_data_attributes,
        pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
        required: true,
        title: _('Please create a username with only alphanumeric characters.')
      %p.validation-error.gl-text-red-500.gl-field-error-ignore.gl-mt-2.field-validation.hide= _('Username is already taken.')
      %p.validation-success.gl-text-green-600.gl-field-error-ignore.gl-mt-2.field-validation.hide= _('Username is available.')
      %p.validation-pending.gl-field-error-ignore.gl-mt-2.field-validation.hide= _('Checking username availability...')
    .form-group
      = f.label :email, class: 'label-bold'
      = f.email_field :email,
        value: @invite_email,
        class: 'form-control gl-form-input middle',
        data: { qa_selector: 'new_user_email_field' },
        required: true,
        title: _('Please provide a valid email address.')
      %p.gl-field-hint.text-secondary= _('We recommend a work email address.')
    .form-group.gl-mb-5#password-strength
      = f.label :password, class: 'label-bold'
      = f.password_field :password,
        class: 'form-control gl-form-input bottom',
        data: { qa_selector: 'new_user_password_field' },
        autocomplete: 'new-password',
        required: true,
        pattern: ".{#{@minimum_password_length},}",
        title: s_('SignUp|Minimum length is %{minimum_password_length} characters.') % { minimum_password_length: @minimum_password_length }
      %p.gl-field-hint.text-secondary= s_('SignUp|Minimum length is %{minimum_password_length} characters.') % { minimum_password_length: @minimum_password_length }
    = render_if_exists 'devise/shared/phone_verification', form: f
    %div
    - if show_recaptcha_sign_up?
      = recaptcha_tags nonce: content_security_policy_nonce
    .submit-container.gl-mt-5
      = f.submit button_text, class: 'btn gl-button btn-confirm gl-display-block gl-w-full', data: { qa_selector: 'new_user_register_button' }
    = render 'devise/shared/terms_of_service_notice', button_text: button_text
    - if show_omniauth_providers && omniauth_providers_placement == :bottom
      = render 'devise/shared/signup_omniauth_providers'