- if @pipeline.name
  .gl-border-t.gl-p-5.gl-px-0
    %h3.gl-m-0.gl-text-body
      = @pipeline.name
- else
  .commit-box
    %h3.commit-title
      = markdown(commit.title, pipeline: :single_line)
    - if commit.description.present?
      %pre.commit-description<
        = preserve(markdown(commit.description, pipeline: :single_line))

.info-well
  .well-segment.pipeline-info{ class: "gl-align-items-baseline!" }
    .icon-container
      = sprite_icon('clock', css_class: 'gl-top-0!')
    - jobs = n_('%d job', '%d jobs', @pipeline.total_size) % @pipeline.total_size
    - if @pipeline.duration
      = s_('Pipelines|%{jobs} %{ref_text} in %{duration}').html_safe % { jobs: jobs, ref_text: @pipeline.ref_text, duration: time_interval_in_words(@pipeline.duration) }
    - else
      = jobs
      = @pipeline.ref_text
    - if @pipeline.queued_duration
      = s_("Pipelines|(queued for %{queued_duration})") % { queued_duration: time_interval_in_words(@pipeline.queued_duration)}

  - if has_pipeline_badges?(@pipeline)
    .well-segment
      .icon-container
        = sprite_icon('flag', css_class: 'gl-top-0!')
      - if @pipeline.schedule?
        = gl_badge_tag _('Scheduled'), { variant: :info, size: :sm }, { class: 'js-pipeline-url-scheduled', title: _('This pipeline was triggered by a schedule.') }
      - if @pipeline.child?
        - text = sprintf(s_('Pipelines|Child pipeline (%{link_start}parent%{link_end})'), { link_start: "<a href='#{pipeline_path(@pipeline.triggered_by_pipeline)}' class='text-underline'>", link_end: "</a>"}).html_safe
        = gl_badge_tag text, { variant: :info, size: :sm }, { class: 'js-pipeline-child has-tooltip', title: s_("Pipelines|This is a child pipeline within the parent pipeline") }
      - if @pipeline.latest?
        = gl_badge_tag s_('Pipelines|latest'), { variant: :success, size: :sm }, { class: 'js-pipeline-url-latest has-tooltip', title: _("Latest pipeline for the most recent commit on this branch") }
      - if @pipeline.merge_train_pipeline?
        = gl_badge_tag s_('Pipelines|merge train'), { variant: :info, size: :sm }, { class: 'js-pipeline-url-train has-tooltip', title: s_("Pipelines|This pipeline ran on the contents of this merge request combined with the contents of all other merge requests queued for merging into the target branch.") }
      - if @pipeline.has_yaml_errors?
        = gl_badge_tag s_('Pipelines|yaml invalid'), { variant: :danger, size: :sm }, { class: 'js-pipeline-url-yaml has-tooltip', title: @pipeline.yaml_errors }
      - if @pipeline.failure_reason?
        = gl_badge_tag s_('Pipelines|error'), { variant: :danger, size: :sm }, { class: 'js-pipeline-url-failure has-tooltip', title: @pipeline.failure_reason }
      - if @pipeline.auto_devops_source?
        - popover_title_text = html_escape(_('This pipeline makes use of a predefined CI/CD configuration enabled by %{b_open}Auto DevOps.%{b_close}')) % { b_open: '<b>'.html_safe, b_close: '</b>'.html_safe }
        - popover_content_url = help_page_path('topics/autodevops/index.md')
        - popover_content_text = _('Learn more about Auto DevOps')
        = gl_badge_tag s_('Pipelines|Auto DevOps'), { variant: :info, size: :sm }, { class: 'js-pipeline-url-autodevops', href: "#", tabindex: "0", role: "button", data: { container: 'body', toggle: 'popover', placement: 'top', html: 'true', triggers: 'focus', title: "<div class='gl-font-weight-normal gl-line-height-normal'>#{popover_title_text}</div>", content: "<a href='#{popover_content_url}' target='_blank' rel='noopener noreferrer nofollow'>#{popover_content_text}</a>" } }
      - if @pipeline.detached_merge_request_pipeline?
        = gl_badge_tag s_('Pipelines|merge request'), { variant: :info, size: :sm }, { class: 'js-pipeline-url-mergerequest has-tooltip', data: { qa_selector: 'merge_request_badge_tag' }, title: s_("Pipelines|This pipeline ran on the contents of this merge request's source branch, not the target branch.") }
      - if @pipeline.stuck?
        = gl_badge_tag s_('Pipelines|stuck'), { variant: :warning, size: :sm }, { class: 'js-pipeline-url-stuck has-tooltip' }

  .well-segment{ 'data-testid': 'commit-row' }
    .icon-container.commit-icon
      = sprite_icon('commit', css_class: 'gl-top-0!')
    - if @pipeline.name
      = markdown(commit.title, pipeline: :single_line)
      = clipboard_button(text: @pipeline.sha, title: _("Copy commit SHA"))
      = link_to commit.short_id, project_commit_path(@project, @pipeline.sha), class: "commit-sha"
    - else
      = link_to commit.short_id, project_commit_path(@project, @pipeline.sha), class: "commit-sha"
      = clipboard_button(text: @pipeline.sha, title: _("Copy commit SHA"))

  .well-segment.related-merge-request-info
    .icon-container
      = sprite_icon("git-merge", css_class: 'gl-top-0!')
    %span.related-merge-requests
      %span.js-truncated-mr-list
        = @pipeline.all_related_merge_request_text(limit: 1)
      - if @pipeline.has_many_merge_requests?
        = link_to("#", class: "js-toggle-mr-list") do
          %span.text-expander
            = sprite_icon('ellipsis_h', size: 12)
        %span.js-full-mr-list.hide
          = @pipeline.all_related_merge_request_text