- can_create_subgroups = can?(current_user, :create_subgroup, @group)
- can_create_projects = can?(current_user, :create_projects, @group)
- emails_disabled = @group.emails_disabled?

.group-home-panel
  .gl-display-flex.gl-justify-content-space-between.gl-flex-wrap.gl-sm-flex-direction-column.gl-gap-3.gl-my-5
    .home-panel-title-row.gl-display-flex.gl-align-items-center
      .avatar-container.rect-avatar.s64.home-panel-avatar.gl-flex-shrink-0.float-none{ class: 'gl-mr-3!' }
        = group_icon(@group, class: 'avatar avatar-tile s64', width: 64, height: 64, itemprop: 'logo')
      %div
        %h1.home-panel-title.gl-font-size-h1.gl-mt-3.gl-mb-2.gl-display-flex{ itemprop: 'name' }
          = @group.name
          %span.visibility-icon.gl-text-secondary.has-tooltip.gl-ml-2{ data: { container: 'body' }, title: visibility_icon_description(@group) }
            = visibility_level_icon(@group.visibility_level, options: {class: 'icon'})
          = render_if_exists 'shared/tier_badge', source: @group, source_type: 'Group'
        .home-panel-metadata.gl-text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal{ data: { qa_selector: 'group_id_content' }, itemprop: 'identifier' }
          - if can?(current_user, :read_group, @group)
            %span.gl-display-inline-block.gl-vertical-align-middle
              = s_("GroupPage|Group ID: %{group_id}") % { group_id: @group.id }
              = clipboard_button(title: s_('GroupPage|Copy group ID'), text: @group.id)
          - if current_user
            %span.gl-ml-3.gl-mb-3
              = render 'shared/members/access_request_links', source: @group

    - if current_user
      .home-panel-buttons.gl-display-flex.gl-justify-content-md-end.gl-align-items-center.gl-flex-wrap.gl-gap-3{ data: { testid: 'group-buttons' } }
        - if current_user.admin?
          = render Pajamas::ButtonComponent.new(href: [:admin, @group], icon: 'admin', button_options: { title: _('View group in admin area'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } })
        - if @notification_setting
          .js-vue-notification-dropdown{ data: { disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(@notification_setting).to_json, notification_level: @notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), group_id: @group.id, container_class: 'gl-vertical-align-top', no_flip: 'true' } }
        - if can_create_subgroups
          .gl-sm-w-auto.gl-w-full
            = render Pajamas::ButtonComponent.new(href: new_group_path(parent_id: @group.id, anchor: 'create-group-pane'), button_options: { data: { qa_selector: 'new_subgroup_button' }, class: 'gl-sm-w-auto gl-w-full'}) do
              = _("New subgroup")

        - if can_create_projects
          .gl-sm-w-auto.gl-w-full
            = render Pajamas::ButtonComponent.new(href: new_project_path(namespace_id: @group.id), variant: :confirm, button_options: { data: { qa_selector: 'new_project_button' }, class: 'gl-sm-w-auto gl-w-full' }) do
              = _('New project')

  - if @group.description.present?
    .group-home-desc.mt-1
      .home-panel-description
        .home-panel-description-markdown.read-more-container{ itemprop: 'description' }
          = markdown_field(@group, :description)
        = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'js-read-more-trigger gl-lg-display-none' }) do
          = _("Read more")