app/views/users/show.html.haml

- @hide_top_links = true
- @no_container = true
- breadcrumb_title user_display_name(@user)
- page_title       user_display_name(@user)
- page_description @user.bio unless @user.blocked? || !@user.confirmed?
- page_itemtype    'http://schema.org/Person'
- add_page_specific_style 'page_bundles/profile'
- add_page_specific_style 'page_bundles/projects'
- @force_desktop_expanded_sidebar = true
- nav "user_profile"
- allowable_actions = profile_actions(@user)

= content_for :meta_tags do
  = auto_discovery_link_tag(:atom, user_url(@user, format: :atom), title: "#{@user.name} activity")

%div{ class: container_class }
  .user-profile-header.gl-flex.gl-justify-between.gl-flex-col.md:gl-flex-row-reverse.gl-my-5{ 'data-testid': 'user-profile-header' }
    %div
      .cover-controls.gl-flex.gl-gap-3.gl-mb-4.md:gl-justify-end.md:gl-flex-row-reverse
        .js-user-profile-actions{ data: user_profile_actions_data(@user) }
        = render 'users/follow_user'
        -# The following edit button is mutually exclusive to the follow user button, they won't be shown together
        - if @user == current_user
          = render Pajamas::ButtonComponent.new(href: user_settings_profile_path,
            button_options: { title: s_('UserProfile|Edit profile') }) do
            = s_("UserProfile|Edit profile")
        = render 'users/view_gpg_keys'
        = render 'users/view_user_in_admin_area'
    .gl-flex.gl-flex-row.gl-items-center.gl-gap-x-5.gl-mt-2.sm:gl-mt-0
      .user-image.gl-relative.gl-md-py-3
        = link_to avatar_icon_for_user(@user, 400, current_user: current_user), target: '_blank', rel: 'noopener noreferrer', title: s_('UserProfile|View large avatar') do
          = render Pajamas::AvatarComponent.new(@user, alt: s_('UserProfile|User profile picture'), size: 96, avatar_options: { itemprop: "image" })
        - if @user.status&.busy?
          = render Pajamas::BadgeComponent.new(s_('UserProfile|Busy'), variant: 'warning', class: 'gl-absolute gl-flex gl-justify-center gl-items-center gl-left-1/2 gl-border gl-border-white -gl-translate-x-1/2 gl-top-full -gl-mt-3')
      %div
        %h1.gl-heading-1.gl-leading-1.gl-mr-2{ class: '!gl-my-0', itemprop: 'name' }
          = user_display_name(@user)
        .gl-text-size-h2.gl-text-subtle.gl-font-normal.gl-my-0
          = @user.to_reference
        - if !@user.blocked? && @user.confirmed? && @user.status&.customized?
          .gl-my-2.cover-status.gl-text-sm.gl-pt-2.gl-flex.gl-flex-col
            .gl-inline-flex.gl-gap-3.gl-items-baseline
              = emoji_icon(@user.status.emoji)
              = markdown_field(@user.status, :message)
  .user-profile{ class: @user.blocked? ? '' : 'user-profile-with-sidebar' }
    .user-profile-content
      - if allowable_actions.any?
        - if Feature.enabled?(:profile_tabs_vue, current_user)
          #js-user-profile-app{ data: user_profile_app_data(@user) }
        - else
          = render 'users/legacy_tabs', action: @action, endpoint: @endpoint, allowable_actions: allowable_actions
        .loading.hide
          = render Pajamas::SpinnerComponent.new(size: :md)
      - else
        - if @user.blocked?
          = render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-access-md.svg',
            title: s_('UserProfile|This user is blocked'))
        - else
          = render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-private-md.svg',
            title: s_('UserProfile|This user has a private profile'))
    - unless @user.blocked?
      = render 'users/profile_sidebar'