<h2 class="toc">Tours</h2>

{% apply view_source %}
<button class="btn btn-primary tour-start">Start!</button>
<button class="btn btn-default first">First</button>
<button class="btn btn-default second">Second</button>
<button class="btn btn-default third">Last</button>
{% end %}

{% apply view_source %}
<script>
  /* globals Shepherd */
  // more: http://github.hubspot.com/shepherd/docs/welcome/
  var tour = new Shepherd.Tour({
    defaults: {
      classes: 'shepherd-theme-dark'
    }
  })

  var buttonActions = [{
    text: 'Back',
    classes: 'shepherd-button-secondary',
    action: tour.back
  }, {
    text: 'Next',
    classes: 'shepherd-button-example-primary',
    action: tour.next
  }, {
    text: 'Exit',
    classes: 'shepherd-button-secondary',
    action: tour.cancel
  }]

  var buttonExitActions = [{
    text: 'Back',
    classes: 'shepherd-button-secondary',
    action: tour.back
  }, {
    text: 'Exit',
    classes: 'shepherd-button-example-primary',
    action: tour.cancel
  }]

  tour.addStep('tour', {
    title: 'Welcome to Dashboard Tour!',
    text: 'Click Next',
    attachTo: '.first top',
    buttons: buttonActions
  })

  tour.addStep('middle', {
    title: '2nd step',
    text: 'Second step, click for final tour step',
    attachTo: '.second top',
    buttons: buttonActions
  })

  tour.addStep('final', {
    title: 'Last step',
    text: 'Exit',
    attachTo: '.third top',
    buttons: buttonExitActions
  })
  $('body').on('click', '.tour-start', function () {
    tour.start()
  })
</script>
{% end %}
