.pricing-page-test
  .container
    .header
      %h1 Choose a plan that suits <br/> your needs
      %p All plans have unlimited collaborators and <br/> private or public repositories

    .row.flex-row.plans
      - data.pricing_test.plans.each_with_index do |plan, index|
        - free = plan.id == 'free'
        .col-md-3.plan
          .image= image_tag "pricing/#{plan.id}.svg"
          .content
            .title= plan.title
            .description= plan.description
            .price $#{plan.monthly_price}
            .price-monthly /user/month
            - unless free
              .price-annually (USD, billed annually at $#{plan.monthly_price * 12})
            .btn{ data: { target: "##{plan.id}-modal", toggle: 'modal' } }= free ? 'Start now' : 'Buy now'
          .features
            .feature-title= free ? 'Includes' : "Everything in #{data.pricing_test.plans[index - 1].title}&nbsp;+"
            %ul
              - plan.features.each do |feature|
                %li= feature
            .compare= link_to 'Compare features', '#feature-comparison'

    #feature-comparison
      %h2 Feature comparison
      .row.tabs
        %ul{ role: 'tablist' }
          - data.pricing_test.stages.each_with_index do |stage, index|
            %li{ class: ('active' if index.zero?), role: 'presentation' }
              %a{ href: "##{stage.id}", role: 'tab', 'data-toggle': 'tab', 'aria-controls': stage.id }= stage.tab
      .row.tab-content
        - data.pricing_test.stages.each_with_index do |stage, index|
          .tab-pane{ id: stage.id, class: ('active' if index.zero?), role: 'tabpanel' }
            .container.table-responsive
              %table
                %thead
                  %tr
                    %th
                      .title
                        .icon= partial "/includes/icons/sdlc-icons/#{stage.id}.svg"
                        = stage.title
                      .subtitle= stage.subtitle
                    - data.pricing_test.plans.each do |plan|
                      %th
                        .title= plan.title
                        .price $#{plan.monthly_price}
                        .price-monthly /user/month
                        .btn{ data: { target: "##{plan.id}-modal", toggle: 'modal' } }
                          = plan.id == 'free' ? 'Start now' : 'Buy now'
                %tbody
                  - stage.features.each do |feature|
                    %tr
                      %td
                        .title= feature.title
                        .description= feature.description
                        %a{ href: feature.link } Feature Details
                      - data.pricing_test.plans.each do |plan|
                        %td
                          - if feature.availability_level <= plan.level
                            = partial 'includes/icons/comparison/yes-icon.svg'
                          - else
                            .nope
      .row.compare-all
        %a{ href: '/pricing/gitlab-com/feature-comparison/' } Compare all features &rarr;

    = partial 'includes/home/customer-logos-transparent'

    .row.faq
      %h2 Frequently asked questions
      .faq-holder
        - size = (data.pricing_test.questions.size / Float(2)).ceil
        - data.pricing_test.questions.each_slice(size) do |group|
          = partial 'includes/layout/question_group', locals: { group: group }

  .contact
    %h1 Still have questions? Get in touch.
    = link_to 'Contact Sales', '/sales/', class: 'btn'

  - data.pricing_test.plans.each do |plan|
    - free = plan.id == 'free'
    .modal.fade{ id: "#{plan.id}-modal", role: 'dialog' }
      .modal-dialog{ role: 'document' }
        .modal-content
          .modal-header
            %button.close{ type: 'button', 'data-dismiss': 'modal', 'aria-label': 'Close' }
              %span{ 'aria-hidden': 'true' } &times;
          .modal-body
            .hosted
              .title GitLab SaaS
              .subtitle (We host)
              .logo= partial 'includes/icons/free-trial-cloud.svg'
              .setup No technical setup required.
              .explanation If you don't want to worry about downloading and installing GitLab yourself.
              .button
                - link_text = free ? 'Sign-up for free' : 'Purchase SaaS'
                = link_to link_text, plan.links.hosted, class: 'btn btn-pricing'
            .self-managed
              .title GitLab Self-Managed
              .subtitle (You host)
              .logo= partial 'includes/icons/free-trial-self-managed.svg'
              .setup Requires Linux Experience.
              .explanation Download and install GitLab on your own infrastructure or in our public cloud environment.
              .button
                - link_text = free ? 'Install GitLab for free' : 'Purchase Self-managed'
                = link_to link_text, plan.links.self_managed, class: 'btn btn-pricing'