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

.js-remove-member-modal
.row.gl-mt-3
  .col-lg-12
    - if can_invite_members_for_project?(@project) || can_invite_group_for_project?(@project)
      .row
        .col-md-12.col-lg-6.gl-display-flex
          .gl-flex-direction-column.gl-flex-wrap.align-items-baseline
            %h4
              = _("Project members")
            .gl-justify-content-bottom.gl-display-flex.align-items-center
              - if can_manage_project_members?(@project)
                %p= share_project_description(@project)
              - else
                %p
                  = 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 }
        .col-md-12.col-lg-6
          .gl-display-flex.gl-flex-wrap.gl-justify-content-end
            - if can_import_members?
              = link_to _("Import a project"),
                import_project_project_members_path(@project),
                class: "btn btn-default btn-md gl-button gl-mt-3 gl-sm-w-auto gl-w-full",
                title: _("Import members from another project")
            - if @project.allowed_to_share_with_group?
              .js-invite-group-trigger{ data: { classes: 'gl-mt-3 gl-sm-w-auto gl-w-full gl-sm-ml-3', display_text: _('Invite a group') } }
            - if !membership_locked?
              .js-invite-members-trigger{ data: { variant: 'success', classes: 'gl-mt-3 gl-sm-w-auto gl-w-full gl-sm-ml-3', display_text: _('Invite members') } }
        = render 'projects/invite_members_modal', project: @project

    - else
      - if project_can_be_shared?
        %h4
          = _("Project members")
        - if can_manage_project_members?(@project)
          %p= share_project_description(@project)
        - else
          %p
            = 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 }

    - if Feature.disabled?(:invite_members_group_modal, @project.group) && can_manage_project_members?(@project) && project_can_be_shared?
      - if !membership_locked? && @project.allowed_to_share_with_group?
        %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', class: ('active' if membership_locked?) }
            %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 'shared/members/invite_member', submit_url: project_project_members_path(@project), access_levels: ProjectMember.access_level_roles, default_access_level: @project_member.access_level, can_import_members?: can_import_members?, import_path: import_project_project_members_path(@project)
          .tab-pane{ id: 'invite-group-pane', role: 'tabpanel', class: ('active' if membership_locked?) }
            = render 'shared/members/invite_group', submit_url: project_group_links_path(@project), access_levels: ProjectGroupLink.access_options, default_access_level: ProjectGroupLink.default_access, group_link_field: 'link_group_id', group_access_field: 'link_group_access'
      - elsif !membership_locked?
        .invite-member= render 'shared/members/invite_member', submit_url: project_project_members_path(@project), access_levels: ProjectMember.access_level_roles, default_access_level: @project_member.access_level, can_import_members?: can_import_members?, import_path: import_project_project_members_path(@project)
      - elsif @project.allowed_to_share_with_group?
        .invite-group= render 'shared/members/invite_group', access_levels: ProjectGroupLink.access_options, default_access_level: ProjectGroupLink.default_access, submit_url: project_group_links_path(@project), group_link_field: 'link_group_id', group_access_field: 'link_group_access'
    %ul.nav-links.mobile-separator.nav.nav-tabs
      %li.nav-item
        = link_to '#tab-members', class: ['nav-link', ('active' unless groups_tab_active?)], data: { toggle: 'tab' } do
          %span
            = _('Members')
          %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= @project_members.total_count
      - if show_groups?(@group_links)
        %li.nav-item
          = link_to '#tab-groups', class: ['nav-link', ('active' if groups_tab_active?)] , data: { toggle: 'tab', qa_selector: 'groups_list_tab' } do
            %span
              = _('Groups')
            %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= @group_links.count
      - if show_invited_members?(@project, @invited_members)
        %li.nav-item
          = link_to '#tab-invited-members', class: 'nav-link', data: { toggle: 'tab' } do
            %span
              = _('Invited')
            %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= @invited_members.count
      - if show_access_requests?(@project, @requesters)
        %li.nav-item
          = link_to '#tab-access-requests', class: 'nav-link', data: { toggle: 'tab' } do
            %span
              = _('Access requests')
            %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= @requesters.count
    .tab-content
      #tab-members.tab-pane{ class: ('active' unless groups_tab_active?) }
        .js-project-members-list{ data: { members_data: project_members_list_data_json(@project, @project_members, { param_name: :page, params: { search_groups: nil } }) } }
          .loading
            .gl-spinner.gl-spinner-md
      - if show_groups?(@group_links)
        #tab-groups.tab-pane{ class: ('active' if groups_tab_active?) }
          .js-project-group-links-list{ data: { members_data: project_group_links_list_data_json(@project, @group_links) } }
            .loading
              .gl-spinner.gl-spinner-md
      - if show_invited_members?(@project, @invited_members)
        #tab-invited-members.tab-pane
          .js-project-invited-members-list{ data: { members_data: project_members_list_data_json(@project, @invited_members) } }
            .loading
              .gl-spinner.gl-spinner-md
      - if show_access_requests?(@project, @requesters)
        #tab-access-requests.tab-pane
          .js-project-access-requests-list{ data: { members_data: project_members_list_data_json(@project, @requesters) } }
            .loading
              .gl-spinner.gl-spinner-md