#tour-out(data-test-id='feature-tour-modal')
  #tour-bg
  #tour
    .modal-header
      h2(data-hook='title')
      button.tour-close-button(data-test-id='close-tour-button') ×
    #animation
      - var first = features[0].image
      img#animation-gif(src="./images/tour/#{first}")
    #features
      each feature, i in features
        - var id = 'f' + i + '-content'
        - var cls = 'feature-content'
        - cls += (i === 0) ? ' active' : ''
        div(id='#{id}', class='#{cls}')
          h3.feature-title= feature.title
          p.feature-description= feature.description
      .pager
        button.previous-slide.hide Previous
        button.next-slide Next
      .get-started-button-holder
        button#tour-remove.hide(type="button", class="btn btn-info") Get Started
    .clearfix
    .pager
      ul
        each feature, i in features
          - var id = 'f' + i
          - var cls = (i === 0) ? 'selected' : null
          li(id='#{id}', class='#{cls}', data-n='#{i}', title='#{feature.title}')