.page-content-header
  .header-main-content
    = render partial: 'signature', object: @commit.signature
    %strong
      #{ s_('CommitBoxTitle|Commit') }
      %span.commit-sha{ data: { qa_selector: 'commit_sha_content' } }= @commit.short_id
    = clipboard_button(text: @commit.id, title: _('Copy commit SHA'))
    %span.d-none.d-sm-inline= _('authored')
    #{time_ago_with_tooltip(@commit.authored_date)}
    %span= s_('ByAuthor|by')
    = author_avatar(@commit, size: 24, has_tooltip: false)
    %strong
      = commit_author_link(@commit, avatar: true, size: 24)
    = user_status(@commit.author)
    - if @commit.different_committer?
      %span.light= _('Committed by')
      %strong
        = commit_committer_link(@commit, avatar: true, size: 24)
      #{time_ago_with_tooltip(@commit.committed_date)}

  #js-commit-comments-button{ data: { comments_count: @notes_count.to_i } }
  = link_to _('Browse files'), project_tree_path(@project, @commit), class: "btn gl-button btn-default gl-mr-3 gl-xs-w-full gl-xs-mb-3"
  #js-commit-options-dropdown{ data: commit_options_dropdown_data(@project, @commit) }

.commit-box{ data: { project_path: project_path(@project) } }
  %h3.commit-title
    = markdown_field(@commit, :title)
  - if @commit.description.present?
    %pre.commit-description<
      = preserve(markdown_field(@commit, :description))

.info-well
  .well-segment
    .icon-container.commit-icon
      = custom_icon("icon_commit")
    %span.cgray= n_('parent', 'parents', @commit.parents.count)
    - @commit.parents.each do |parent|
      = link_to parent.short_id, project_commit_path(@project, parent), class: "commit-sha"
    #js-commit-branches-and-tags{ data: { full_path: @project.full_path, commit_sha: @commit.short_id } }

  .well-segment.merge-request-info
    .icon-container
      = custom_icon('mr_bold')
    %span.commit-info.merge-requests{ 'data-project-commit-path' => merge_requests_project_commit_path(@project, @commit.id, format: :json) }
      = gl_loading_icon(inline: true, css_class: 'gl-vertical-align-middle')

  - if can?(current_user, :read_pipeline, @last_pipeline)
    .well-segment.pipeline-info
      .js-commit-pipeline-status{ data: { full_path: @project.full_path, iid: @last_pipeline.iid, graphql_resource_etag: graphql_etag_pipeline_path(@last_pipeline) } }
      #{ _('Pipeline') }
      = link_to "##{@last_pipeline.id}", project_pipeline_path(@project, @last_pipeline.id)
      = ci_label_for_status(@last_pipeline.status)
      - if @last_pipeline.stages_count.nonzero?
        #{ n_(s_('Pipeline|with stage'), s_('Pipeline|with stages'), @last_pipeline.stages_count) }
        .js-commit-pipeline-mini-graph{ data: { stages: @last_pipeline_stages.to_json.html_safe, full_path: @project.full_path, iid: @last_pipeline.iid, graphql_resource_etag: graphql_etag_pipeline_path(@last_pipeline) } }
      - if @last_pipeline.duration
        in
        = time_interval_in_words @last_pipeline.duration

  - if @merge_request
    .well-segment
      = sprite_icon('information-o', css_class: 'gl-vertical-align-middle! gl-mr-2')

      - link_to_merge_request = link_to(@merge_request.to_reference, diffs_project_merge_request_path(@project, @merge_request, commit_id: @commit.id))
      = _('This commit is part of merge request %{link_to_merge_request}. Comments created here will be created in the context of that merge request.').html_safe % { link_to_merge_request: link_to_merge_request }