.tabs-holder
  %ul.pipelines-tabs.nav-links.no-top.no-bottom
    %li
      = link_to namespace_project_pipeline_path(@project.namespace, @project, @pipeline), data: { target: 'div#js-tab-pipeline', action: 'pipelines', toggle: 'tab' } do
        Pipeline
    %li
      = link_to builds_namespace_project_pipeline_path(@project.namespace, @project, @pipeline), data: {target: 'div#js-tab-builds', action: 'builds', toggle: 'tab' } do
        Builds
        %span.badge= pipeline.statuses.count



.tab-content
  #js-tab-pipeline.tab-pane
    .build-content.middle-block.pipeline-graph
      .pipeline-visualization
        %ul.stage-column-list
          - stages = pipeline.stages_with_latest_statuses
          - stages.each do |stage, statuses|
            %li.stage-column
              .stage-name
                %a{name: stage}
                - if stage
                  = stage.titleize
              .builds-container
                %ul
                  = render "projects/commit/pipeline_stage", statuses: statuses

  #js-tab-builds.tab-pane
    - if pipeline.yaml_errors.present?
      .bs-callout.bs-callout-danger
        %h4 Found errors in your .gitlab-ci.yml:
        %ul
          - pipeline.yaml_errors.split(",").each do |error|
            %li= error
        You can also test your .gitlab-ci.yml in the #{link_to "Lint", ci_lint_path}

    - if pipeline.project.builds_enabled? && !pipeline.ci_yaml_file
      .bs-callout.bs-callout-warning
        \.gitlab-ci.yml not found in this commit

    .table-holder.pipeline-holder
      %table.table.ci-table.pipeline
        %thead
          %tr
            %th Status
            %th Build ID
            %th Name
            %th
            - if pipeline.project.build_coverage_enabled?
              %th Coverage
            %th
        - pipeline.statuses.relevant.stages.each do |stage|
          = render 'projects/commit/ci_stage', stage: stage, statuses: pipeline.statuses.relevant.where(stage: stage)


:javascript
  var pipelines_tab;

  pipelines_tab = new window.gl.LinkedTabs({
    action: "#{controller.action_name}",
    defaultAction: 'pipelines',
    parentEl: '.pipelines-tabs'
  });