- add_page_specific_style 'page_bundles/members'
- page_title _("Members")

= render_if_exists 'shared/ultimate_feature_removal_banner', project: @project

.row.gl-mt-3
  .col-lg-12
    .gl-display-flex.gl-flex-wrap
      - if can_invite_members_for_project?(@project)
        %h4
          = _("Project members")
        %p.gl-w-full.order-md-1
          = project_member_header_subtext(@project)
        .gl-display-flex.gl-flex-wrap.gl-align-items-flex-start.gl-ml-auto.gl-md-w-auto.gl-w-full.gl-mt-3
          - invite_group_top_margin = ''
          - if can_admin_project_member?(@project)
            .js-import-project-members-trigger{ data: { classes: 'gl-md-w-auto gl-w-full' } }
            .js-import-project-members-modal{ data: { project_id: @project.id, project_name: @project.name, reload_page_on_submit: true.to_s } }
            - invite_group_top_margin = 'gl-md-mt-0 gl-mt-3'
          - if @project.allowed_to_share_with_group?
            .js-invite-group-trigger{ data: { classes: "gl-md-w-auto gl-w-full gl-md-ml-3 #{invite_group_top_margin}", display_text: _('Invite a group') } }
            = render 'projects/invite_groups_modal', project: @project, reload_page_on_submit: true
          - if can_admin_project_member?(@project)
            .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: 'project-members-page',
              display_text: _('Invite members') } }
        = render 'projects/invite_members_modal', project: @project, reload_page_on_submit: true
      - else
        - if project_can_be_shared?
          %h4
            = _("Project members")
          - if can?(current_user, :admin_project_member, @project)
            %p.gl-w-full
              = project_member_header_subtext(@project)
          - else
            %p.gl-w-full
              = html_escape(_("Members can be added by project %{i_open}Maintainers%{i_close} or %{i_open}Owners%{i_close}")) % { i_open: '<i>'.html_safe, i_close: '</i>'.html_safe }

    .js-project-members-list-app{ data: { members_data: project_members_app_data_json(@project,
                                                                                      members: @project_members,
                                                                                      invited: @invited_members,
                                                                                      access_requests: @requesters,
                                                                                      include_relations: @include_relations,
                                                                                      search: params[:search_groups]) } }
      = gl_loading_icon(css_class: 'gl-my-5', size: 'md')