- breadcrumb_title _("Projects")
- page_title _("Projects")
- @content_class = "limit-container-width" unless fluid_layout

= render Pajamas::CardComponent.new(card_options: { class: 'gl-mt-3 js-search-settings-section' }, header_options: { class: 'gl-display-flex' }, body_options: { class: 'gl-py-0' }) do |c|
  - c.header do
    .gl-flex-grow-1
      = html_escape(_("%{strong_open}%{group_name}%{strong_close} projects:")) % { strong_open: '<strong>'.html_safe, group_name: @group.name, strong_close: '</strong>'.html_safe }
    - if can? current_user, :admin_group, @group
      .controls
        = render Pajamas::ButtonComponent.new(href: new_project_path(namespace_id: @group.id), size: :small, variant: :confirm) do
          = _("New project")
  - c.body do
    %ul.content-list
      - @projects.each_with_index do |project, idx|
        %li.project-row.gl-align-items-center{ class: 'gl-display-flex!', data: { qa_selector: 'project_row_container', qa_index: idx } }
          .avatar-container.rect-avatar.s40.gl-flex-shrink-0
            = project_icon(project, alt: '', class: 'avatar project-avatar s40', width: 40, height: 40)
          .gl-min-w-0.gl-flex-grow-1
            .title
              = link_to project_path(project), class: 'js-prefetch-document' do
                %span.project-full-name{ data: { qa_selector: 'project_fullname_content' } }
                  %span.namespace-name{ data: { qa_selector: 'project_namespace_content' } }
                    - if project.namespace
                      = project.namespace.human_name
                      \/
                  %span.project-name{ data: { qa_selector: 'project_name_content', qa_project_name: project.name } }
                    = project.name
                  %span{ class: visibility_level_color(project.visibility_level) }
                    = visibility_level_icon(project.visibility_level)

            - if project.description.present?
              .description
                = markdown_field(project, :description)

          .stats.gl-text-gray-500.gl-flex-shrink-0.gl-display-none.gl-sm-display-flex
            = gl_badge_tag storage_counter(project.statistics&.storage_size)
            = render 'project_badges', project: project

          .controls.gl-flex-shrink-0.gl-ml-5
            = render Pajamas::ButtonComponent.new(href: project_project_members_path(project),
              button_options: { data: { qa_selector: 'project_members_button' } }) do
              = _('Members')
            = render Pajamas::ButtonComponent.new(href: edit_project_path(project),
              button_options: { data: { qa_selector: 'project_edit_button' } }) do
              = _('Edit')
            = render 'delete_project_button', project: project, data: { qa_selector: 'project_delete_button' }
      - if @projects.blank?
        .nothing-here-block= _("This group has no projects yet")

= paginate @projects, theme: "gitlab"