- parent = @group.parent
- group_path = root_url
- group_path << parent.full_path + '/' if parent


- if Feature::enabled?(:group_name_path_vue, current_user)
  = render 'shared/groups/group_name_and_path_fields', f: f
- else
  .row
    .form-group.group-name-holder.col-sm-12
      = f.label :name, class: 'label-bold' do
        = s_('Groups|Group name')
      = f.text_field :name, placeholder: _('My awesome group'), class: 'js-autofill-group-name form-control input-lg', data: { qa_selector: 'group_name_field' },
        required: true,
        title: s_('Groups|Enter a descriptive name for your group.'),
        autofocus: true
      .text-muted
        = s_('Groups|Must start with letter, digit, emoji, or underscore. Can also contain periods, dashes, spaces, and parentheses.')

  .row
    .form-group.col-xs-12.col-sm-8
      = f.label :path, class: 'label-bold' do
        = s_('Groups|Group URL')
      .input-group.gl-field-error-anchor
        .group-root-path.input-group-prepend.has-tooltip{ title: group_path, :'data-placement' => 'bottom' }
          .input-group-text
            %span>= root_url
            - if parent
              %strong= parent.full_path + '/'
        = f.hidden_field :parent_id
        = f.text_field :path, placeholder: _('my-awesome-group'), class: 'form-control js-validate-group-path js-autofill-group-path', data: { qa_selector: 'group_path_field' },
          autofocus: local_assigns[:autofocus] || false, required: true,
          pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
          title: group_url_error_message,
          maxlength: ::Namespace::URL_MAX_LENGTH,
          "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
      %p.validation-error.gl-field-error.field-validation.hide
        = s_('Groups|Group path is unavailable. Path has been replaced with a suggested available path.')
      %p.validation-success.gl-field-success.field-validation.hide= s_('Groups|Group path is available.')
      %p.validation-pending.gl-field-error-ignore.field-validation.hide= s_('Groups|Checking group URL availability...')

    - if @group.persisted?
      .gl-alert.gl-alert-warning.gl-mt-3.gl-mb-3
        = sprite_icon('warning', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
        .gl-alert-body
          = s_('Groups|Changing group URL can have unintended side effects.')
          = succeed '.' do
            = link_to s_('Groups|Learn more'), help_page_path('user/group/index', anchor: 'change-a-groups-path'), target: '_blank', class: 'gl-link'

  - if @group.persisted?
    .row
      .form-group.group-name-holder.col-sm-8
        = f.label :id, class: 'label-bold' do
          = s_('Groups|Group ID')
        = f.text_field :id, class: 'form-control', readonly: true