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

= render_if_exists 'shared/user_over_limit_free_plan_alert', source: @project

.row.gl-mt-3
  .col-lg-12
    - if can_invite_members_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?(current_user, :admin_project_member, @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_admin_project_member?(@project)
              .js-import-a-project-modal{ data: { project_id: @project.id, project_name: @project.name } }
            - 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') } }
              = render 'projects/invite_groups_modal', project: @project
            - if can_admin_project_member?(@project)
              .js-invite-members-trigger{ data: { variant: 'confirm',
                classes: 'gl-mt-3 gl-sm-w-auto gl-w-full gl-sm-ml-3',
                trigger_source: 'project-members-page',
                display_text: _('Invite members') } }
        = render 'projects/invite_members_modal', project: @project

    - else
      - if project_can_be_shared?
        %h4
          = _("Project members")
        - if can?(current_user, :admin_project_member, @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 }

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