---
title: Choose the tools you use
suppress_header: true
extra_css:
  - category-roi-calculator.css
extra_js:
  - libs/wNumb.min.js
  - category-roi-calculator.js
---

.wrapper
  .container-fluid.landing-container
    .row
      .col-md-10.col-md-offset-1
        .row.page-head-container
          .col-xs-12
            %h1.h2.text-center.page-section-header.u-margin-top-lg
              Choose the tools you use
            %p.text-center
              Click on a tool below to select it, then click on "create" to see an ROI calculation of your DevOps toolchain vs GitLab

.wrapper
  .container
    .sdlc-container-alt.position-relative.roi-calculator-choose.js-roi-choose
      .table-container
        %table.sdlc-table
          %tr
            - Gitlab::Homepage::Stage.all!.select{|stage| stage.marketing}.each do |stage|
              %td.stage-container
                = partial "/includes/icons/sdlc-icons/#{stage.key}.svg"
                %p #{stage.display_name}

          %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|
                  %span.devops-tool-logo-container.js-roi-choose-tool{ data: { stage: stage.key, devops_tool: devops_tool.key } }
                    .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"
                %span.add-tool.js-add-tool{ data: { stage: stage.key } }
                  = partial "images/icons/add.svg"


.wrapper
  .container.text-center
    = link_to "/roi/calculator/", class: "btn cta-btn btn-red js-roi-choose-report-link" do
      Create ROI Report