- @content_class = "limit-container-width" unless fluid_layout
- page_itemtype    'https://schema.org/Organization'
- @skip_current_level_breadcrumb = true
- add_page_specific_style 'page_bundles/group'

- if show_thanks_for_purchase_alert?
  = render_if_exists 'shared/thanks_for_purchase_alert', plan_title: plan_title, quantity: params[:purchased_quantity].to_i

= render_if_exists 'shared/qrtly_reconciliation_alert', group: @group
= render_if_exists 'shared/free_user_cap_alert', source: @group

- if show_invite_banner?(@group)
  = content_for :group_invite_members_banner do
    .container-fluid.container-limited{ class: "gl-pb-2! gl-pt-6! #{@content_class}" }
      .js-group-invite-members-banner{ data: { svg_path: image_path('illustrations/merge_requests.svg'),
        track_label: 'invite_members_banner',
        invite_members_path: group_group_members_path(@group),
        callouts_path: group_callouts_path,
        callouts_feature_id: Users::GroupCalloutsHelper::INVITE_MEMBERS_BANNER,
        group_id: @group.id } }
  = render 'groups/invite_members_modal', group: @group

= content_for :meta_tags do
  = auto_discovery_link_tag(:atom, group_url(@group, rss_url_options), title: "#{@group.name} activity")

= render partial: 'flash_messages'

= render_if_exists 'trials/alert', namespace: @group

= render 'groups/home_panel'

= render_if_exists 'groups/self_or_ancestor_marked_for_deletion_notice', group: @group

= render_if_exists 'groups/group_activity_analytics', group: @group

- if Feature.enabled?(:group_overview_tabs_vue, @group)
  #js-group-overview-tabs{ data: group_overview_tabs_app_data(@group) }
- else
  .groups-listing{ data: { endpoints: { default: group_children_path(@group, format: :json), shared: group_shared_projects_path(@group, format: :json) } } }
    .top-area.group-nav-container.justify-content-between
      .scrolling-tabs-container.inner-page-scroll-tabs
        .fade-left= sprite_icon('chevron-lg-left', size: 12)
        .fade-right= sprite_icon('chevron-lg-right', size: 12)
        -# `item_active` is set to `false` as the active state is set by `app/assets/javascripts/pages/groups/shared/group_details.js`
        -# TODO: Replace this approach in https://gitlab.com/gitlab-org/gitlab/-/issues/23466
        = gl_tabs_nav({ class: 'nav-links scrolling-tabs gl-display-flex gl-flex-grow-1 gl-flex-nowrap gl-border-0' }) do
          = gl_tab_link_to group_path, item_active: false, tab_class: 'js-subgroups_and_projects-tab', data: { target: 'div#subgroups_and_projects', action: 'subgroups_and_projects', toggle: 'tab' } do
            = _("Subgroups and projects")
          = gl_tab_link_to group_shared_path, item_active: false, tab_class: 'js-shared-tab', data: { target: 'div#shared', action: 'shared', toggle: 'tab' } do
            = _("Shared projects")
          = gl_tab_link_to group_archived_path, item_active: false, tab_class: 'js-archived-tab', data: { target: 'div#archived', action: 'archived', toggle: 'tab' } do
            = _("Archived projects")

      .nav-controls.d-block.d-md-flex
        .group-search
          = render "shared/groups/search_form"

        = render "shared/groups/dropdown", options_hash: subgroups_sort_options_hash

    .tab-content
      #subgroups_and_projects.tab-pane
        = render "subgroups_and_projects", group: @group

      #shared.tab-pane
        = render "shared_projects", group: @group

      #archived.tab-pane
        = render "archived_projects", group: @group