- const arrowAlign = $attrs['arrow-align']
- const hide = $attrs['hide']
- const hideFooter = $attrs['hide-footer']
- const placement = $attrs['placement']
- const showNext = $attrs['next-button']

.mp-tutorial-tooltip-stage
  if !hide
    .mp-tutorial-tooltip-wrapper(class={
      'mp-tutorial-tooltip-hide-footer': hideFooter,
      [`mp-tutorial-tooltip-placement-${placement}`]: placement,
      [`mp-tutorial-tooltip-arrow-align-${arrowAlign}`]: arrowAlign,
      delayed: {'mp-tutorial-tooltip-in': true},
      remove: {'mp-tutorial-tooltip-out': true, delayRemove},
    })
      .mp-tutorial-tooltip-content
        slot
      if $attrs['closeable']
        .mp-tutorial-tooltip-close-btn(on={click: $helpers.close})
          svg-icon(attrs={icon: 'x'})
      if !$attrs['hide-footer']
        .mp-tutorial-tooltip-footer
          - const steps = $helpers.getSteps()
          ul.mp-tutorial-tooltip-steps
            each step in steps
              li.mp-tutorial-tooltip-step(class={
                'mp-tutorial-tooltip-active': step === currStep,
              })
          if showNext
            if currStep < steps.length - 1
              .mp-tutorial-tooltip-next(on={click: $helpers.next}) next
            else
              .mp-tutorial-tooltip-done(on={click: $helpers.close}) ok, got it