- add_page_specific_style 'page_bundles/members'
- page_title _('Group members')
- groups_select_tag_data = group_select_data(@group).merge({ skip_groups: @skip_groups })

.row.gl-mt-3
  .col-lg-12
    .gl-display-flex.gl-flex-wrap
      - if can_admin_group_member?(@group)
        .gl-w-half.gl-xs-w-full
          %h4
            = _('Group members')
          %p
            = html_escape(_('You can invite a new member to %{strong_start}%{group_name}%{strong_end}.')) % { group_name: @group.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
        - if Feature.enabled?(:invite_members_group_modal, @group, default_enabled: :yaml)
          .gl-w-half.gl-xs-w-full
            .gl-display-flex.gl-flex-wrap.gl-justify-content-end.gl-mb-3
              .js-invite-group-trigger{ data: { classes: 'gl-mt-3 gl-sm-w-auto gl-w-full', display_text: _('Invite a group') } }
              .js-invite-members-trigger{ data: { variant: 'success',
                classes: 'gl-mt-3 gl-sm-w-auto gl-w-full gl-sm-ml-3',
                trigger_source: 'group-members-page',
                display_text: _('Invite members') } }
          = render 'groups/invite_groups_modal', group: @group
          = render 'groups/invite_members_modal', group: @group
    - if can_admin_group_member?(@group) && Feature.disabled?(:invite_members_group_modal, @group, default_enabled: :yaml)
      %hr.gl-mt-4
        %ul.nav-links.nav.nav-tabs.gitlab-tabs{ role: 'tablist' }
          %li.nav-tab{ role: 'presentation' }
            %a.nav-link.active{ href: '#invite-member-pane', id: 'invite-member-tab', data: { toggle: 'tab' }, role: 'tab' }= _('Invite member')
            %li.nav-tab{ role: 'presentation' }
              %a.nav-link{ href: '#invite-group-pane', id: 'invite-group-tab', data: { toggle: 'tab', qa_selector: 'invite_group_tab' }, role: 'tab' }= _('Invite group')
        .tab-content.gitlab-tab-content
          .tab-pane.active{ id: 'invite-member-pane', role: 'tabpanel' }
            = render_invite_member_for_group(@group, @group_member.access_level)
          .tab-pane{ id: 'invite-group-pane', role: 'tabpanel' }
            = render 'shared/members/invite_group', submit_url: group_group_links_path(@group), access_levels: GroupMember.access_level_roles, default_access_level: @group_member.access_level, group_link_field: 'shared_with_group_id', group_access_field: 'shared_group_access', groups_select_tag_data: groups_select_tag_data

    = render_if_exists 'groups/group_members/ldap_sync'

    .js-group-members-list-app{ data: { members_data: group_members_app_data(@group,
                                                                             members: @members,
                                                                             invited: @invited_members,
                                                                             access_requests: @requesters).to_json } }
      .loading
        .gl-spinner.gl-spinner-md