.sdlc-container.position-relative
  .sdlc-description
    = link_to "/concurrent-devops", class: "title-link" do
      %h2 GitLab is a complete DevOps platform
    %p
      :markdown
        With GitLab, you get a complete CI/CD toolchain in a single application. One interface. One conversation. One permission model. Thousands of features. You'll be amazed at everything GitLab can do today. And we're just getting started.

  .table-container

    %p.table-label.single-application-label GitLab is a complete DevOps platform, delivered as a single application.
    %p.table-label.separate-application-label Compare to

    .sdlc-table
      - Gitlab::Homepage::Stage.all!.select{|stage| stage.marketing}.each do |stage|
        .sdlc-column
          .stage-container
            %a{href: "/stages-devops-lifecycle/#{stage.key}/"}
              = partial "/includes/icons/sdlc-icons/#{stage.key}.svg"
            %a{href: "/stages-devops-lifecycle/#{stage.key}/"}
              %p #{stage.display_name}
          .solutions-container
            - active_categories = stage.categories.select { |c| c.marketing && c.maturity && c.maturity != "planned"}
            - upcoming_categories = stage.categories.select { |c| c.marketing && c.maturity && c.maturity == "planned"}
            - if active_categories.length >= 1
              .current-categories
                %p.font-bold
                  Since
                  #{stage.established}
                  GitLab added:
                - active_categories.each do |category|
                  %p
                    - url = category.best_link
                    %a{ href: "#{url}" } #{category.name}
            .future-categories
              %p.font-bold
                Future
                %br
                - if upcoming_categories.length >= 1
                  = succeed ':' do
                    %a.font-bold{ href: "#{stage.direction}"} direction
                - else
                  %a.font-bold{ href: "#{stage.direction}"} direction
              - upcoming_categories.each do |category|
                %p
                  - url = category.best_link
                  %a.future-category{ href: "#{url}", target: "_blank" } #{category.name}

          .devops-tools-wrapper{ id: "#{stage.key}-devops_tools-container" }
            %p.replace-text.font-bold Functionally similar to
            .devops-tools-container
              - stage.devops_tools.each do |devops_tool|
                %a.devops-tool-logo-container{ href: "/devops-tools/#{devops_tool.key.dup.tr('_', '-')}-vs-gitlab.html" }
                  .devops-tool-tooltip
                    %p.tooltip-text
                      = devops_tool.name
                    .tooltip-carat
                  = image_tag "#{devops_tool.logo}", class: "devops-tool-logo", alt: "#{devops_tool.name} logo png"

    %p.text-center.color-gray.font-small.margin-top30

    .btn-group.margin-top20
      %a.btn.cta-btn.orange.see-all-comparisons{ href: '/devops-tools/' } Compare all DevOps tools

    .btn-group.margin-top20
      %a.btn.cta-btn.btn-primary{ href: '/direction/maturity/' } GitLab feature maturity

%script{ src: "/javascripts/rotate-devops_tools.js" }
%script{ src: "/javascripts/libs/tweenmax.min.js" }