<%
  // Server-rendered onboarding wizard. The current step is driven by
  // querystring/locals (?step=N) so each next/back/skip submits a form.
  var _id            = locals.id            || ('onb-' + Math.random().toString(36).substr(2,6));
  var _steps         = locals.steps         || [];
  var _current       = (typeof locals.current === 'number') ? locals.current : 0;
  if (_current < 0) _current = 0;
  if (_current >= _steps.length) _current = Math.max(0, _steps.length - 1);
  var _mode          = locals.mode          || 'page';
  var _open          = (locals.open === undefined) ? true : !!locals.open;
  var _title         = locals.title         || 'Welcome';
  var _allowSkip     = (locals.allowSkip === undefined) ? true : !!locals.allowSkip;
  var _nextLabel     = locals.nextLabel     || 'Next';
  var _prevLabel     = locals.prevLabel     || 'Back';
  var _skipLabel     = locals.skipLabel     || 'Skip';
  var _completeLabel = locals.completeLabel || 'Finish';
  var _indicator     = locals.indicator     || 'dots';
  var _stepAction    = locals.stepAction    || '?';
  var _completeAction= locals.completeAction|| (locals.stepAction ? locals.stepAction + '&complete=1' : '?complete=1');
  var _skipAction    = locals.skipAction    || (locals.stepAction ? locals.stepAction + '&skip=1'     : '?skip=1');
  var _className     = locals.className     ? ' ' + locals.className : '';

  var _step      = _steps[_current] || { title: '', description: '', content: '' };
  var _isFirst   = _current === 0;
  var _isLast    = _current === _steps.length - 1;
  var _pct       = _steps.length > 0 ? Math.min(100, Math.max(0, ((_current + 1) / _steps.length) * 100)) : 0;
%>

<% if (_mode === 'modal') { %>

  

  

    

      
<%= _title %>
    
    

<% } else { %>

<% } %>

  

    

      
        <%= _current + 1 %> / <%= _steps.length %>
      
      

        <% if (_indicator === 'bar') { %>
        

          

        
        <% } else { %>
        

          <% _steps.forEach(function(_s, i) { %>
            <% var dotClass = (i === _current) ? 'w-6 bg-primary' : (i < _current ? 'w-2 bg-primary' : 'w-2 bg-surface-sunken'); %>
            
          <% }); %>
        
        <% } %>
      
    

    

      
<%= _step.title %>
      <% if (_step.description) { %>
        
<%= _step.description %>
      <% } %>
    

    
<%- _step.content || '' %>

    

      

        <% if (!_isFirst) { %>
        

          
          
            
            <%= _prevLabel %>
          
        
        <% } %>
      
      

        <% if (_allowSkip && !_isLast) { %>
        

          
            
            <%= _skipLabel %>
          
        
        <% } %>
        <% if (_isLast) { %>
        

          
            
            <%= _completeLabel %>
          
        
        <% } else { %>
        

          
          
            <%= _nextLabel %>
            
          
        
        <% } %>
      
    
  

<% if (_mode === 'modal') { %>
    
  

<% } else { %>

<% } %>