- page_title _("Blame"), @blob.path, @ref
- add_page_specific_style 'page_bundles/tree'
- dataset = { testid: 'blob-content-holder', qa_selector: 'blame_file_content', per_page: @blame_per_page }

#blob-content-holder.tree-holder.js-per-page{ data: dataset }
  = render "projects/blob/breadcrumb", blob: @blob, blame: true

  .file-holder
    = render "projects/blob/header", blob: @blob, blame: true

    .file-blame-legend
      %span.left-label Newer
      %span.legend-box.legend-box-0
      %span.legend-box.legend-box-1
      %span.legend-box.legend-box-2
      %span.legend-box.legend-box-3
      %span.legend-box.legend-box-4
      %span.legend-box.legend-box-5
      %span.legend-box.legend-box-6
      %span.legend-box.legend-box-7
      %span.legend-box.legend-box-8
      %span.legend-box.legend-box-9
      %span.right-label Older

    .table-responsive.blame-table
      .blame-table-wrapper
        = render partial: 'page'

    - if @blame_pagination && @blame_pagination.total_pages > 1
      .gl-display-flex.gl-justify-content-center.gl-flex-direction-column.gl-align-items-center.gl-p-3.gl-bg-gray-50.gl-border-t-solid.gl-border-t-1.gl-border-gray-100
        = _('For faster browsing, not all history is shown.')
        = render Pajamas::ButtonComponent.new(href: namespace_project_blame_path(namespace_id: @project.namespace, project_id: @project, id: @id, no_pagination: true), size: :small, button_options: { class: 'gl-mt-3' }) do |c|
          = _('View entire blame')

  - if @blame_pagination
    = paginate(@blame_pagination, theme: "gitlab")