- add_page_specific_style 'page_bundles/members'
- page_title _('Group members')

.row.gl-mt-3
  .col-lg-12
    .gl-display-flex.gl-flex-wrap
      - if can_admin_group_member?(@group)
        %h4
          = _('Group members')
        %p.gl-w-full.order-md-1
          = group_member_header_subtext(@group)
        .gl-display-flex.gl-flex-wrap.gl-align-items-flex-start.gl-ml-auto.gl-md-w-auto.gl-w-full.gl-mt-3
          .js-invite-group-trigger{ data: { classes: 'gl-md-w-auto gl-w-full', display_text: _('Invite a group') } }
          .js-invite-members-trigger{ data: { variant: 'confirm',
            classes: 'gl-md-w-auto gl-w-full gl-md-ml-3 gl-md-mt-0 gl-mt-3',
            trigger_source: 'group-members-page',
            display_text: _('Invite members') } }
        = render 'groups/invite_groups_modal', group: @group, reload_page_on_submit: true
        = render 'groups/invite_members_modal', group: @group, reload_page_on_submit: true

    = 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,
                                                                             banned: @banned || [],
                                                                             include_relations: @include_relations,
                                                                             search: params[:search_groups]).to_json } }
      = gl_loading_icon(css_class: 'gl-my-5', size: 'md')