.sdlc-container-alt.position-relative
  .table-container
    %table.sdlc-table
      %tr
        - Gitlab::Homepage::Stage.all!.select{|stage| stage.marketing}.each do |stage|
          %td.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}

      %tr.single-application-row
        - Gitlab::Homepage::Stage.all!.select{|stage| stage.marketing}.each do |stage|
          %td.solutions-container
            %a.gitlab-logo-container{href: "/stages-devops-lifecycle/#{stage.key}/"}
              .devops-tool-tooltip
                %p.tooltip-text
                  GitLab
                .tooltip-carat
              = image_tag "/images/devops-tools/gitlab-logo.svg", class: "gitlab-logo", alt: "Gitlab logo svg"

      %tr.single-application-row
        -# sorry had to hardcode this.
        -# note the statement in the separate-application-row:
        -# if devops_tool.name != "GitHub" && ...
        -# to update these hardcoded values, see the css sections below.
        - Gitlab::Homepage::Stage.all!.select{|stage| stage.marketing}.each do |stage|
          %td.solutions-container{ id: "#{stage.key}-devops-tools-container" }
            %a.devops-tool-logo-container.github-logo-container{href: "/devops-tools/github-vs-gitlab.html##{stage.key}"}
              .devops-tool-tooltip
                %p.tooltip-text
                  GitHub
                .tooltip-carat
              = image_tag "/images/devops-tools/github-logo.svg", class: "devops-tool-logo github-logo", alt: "GitHub logo svg"
        :css
          #configure-devops-tools-container .github-logo-container,
          #monitor-devops-tools-container .github-logo-container,
          #defend-devops-tools-container .github-logo-container
          {
            display: none;
          }

      %tr.single-application-row
        - Gitlab::Homepage::Stage.all!.select{|stage| stage.marketing}.each do |stage|
          %td.solutions-container{ id: "#{stage.key}-devops-tools-container" }
            %a.devops-tool-logo-container.azure-devops-logo-container{href: "/devops-tools/azure-devops-vs-gitlab.html##{stage.key}"}
              .devops-tool-tooltip
                %p.tooltip-text
                  Azure DevOps (TFS/VSTS)
                .tooltip-carat
              = image_tag "/images/devops-tools/azure-devops-logo.png", class: "devops-tool-logo azure-devops-logo", alt: "Azure DevOps (TFS/VSTS) logo png"
        :css
          #manage-devops-tools-container .azure-devops-logo-container,
          #secure-devops-tools-container .azure-devops-logo-container,
          #configure-devops-tools-container .azure-devops-logo-container,
          #monitor-devops-tools-container .azure-devops-logo-container
          {
            display: none;
          }

      %tr.separate-application-row
        - Gitlab::Homepage::Stage.all!.select{|stage| stage.marketing}.each do |stage|
          %td.devops-tools-container{ id: "#{stage.key}-devops-tools-container" }
            - stage.devops_tools.each do |devops_tool|
              - if devops_tool.name != "GitHub" && devops_tool.name != "Azure DevOps (TFS/VSTS)"
                %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-top10
    * Depending on use case. GitLab does not claim to contain all the functionality of all the tools listed
  .btn-group.margin-top20
    %a.btn.cta-btn.accent.see-all-comparisons{ href: '/devops-tools/' } See and compare all DevOps tools