{% 
  const { panels, options: { properties = {} } } = ctx
  let currentStep = ctx.currentPage + 1
  let numSteps = panels.length
  for (let i = 0; i < panels.length; i++) {
    if (panels[i].properties.hideFromNavigation === 'true') {
      numSteps--
      currentStep--
    }
  }
%}

<nav role="navigation" aria-label="navigation" id="{{ ctx.wizardKey }}-header" class="fg-light-slate mb-60 mb-md-0 ml-md-96 mt-md-1">
  <div data-toggle-container>
    <div aria-expanded="false" aria-controls="nav-content" id="nav-accordion" class="small d-md-none bg-dark-blue border-0 fg-white round-1">
      <div class="d-flex">
        <div class="flex-auto" style="width:100%">
          Section <span>{{ currentStep }} of {{ numSteps }}</span>
        </div>
        <div>
          <span class="d-block" data-icon="chevron"></span>
        </div>
      </div>
    </div>
    <div aria-labeledby="nav-accordion" id="nav-content" class="p-md-0" hidden>
      <ul class="nav-list m-0 p-0 pt-2 pt-md-0">
        {% ctx.panels.forEach(function(panel, index) { %}
          {%
            const { hideFromNavigation } = panel.properties
            const { unlockNavigation } = ctx.options
          %}
          {% if (hideFromNavigation !== 'false') { %}
            {%
              const completed = index < ctx.currentPage
              const active = index === ctx.currentPage
              const enabled = active || completed || unlockNavigation
              const color = active || completed ? 'fg-slate' : 'fg-inherit'
              const style = ctx.classnames(color, {
                'font-medium': active,
                underline: completed && !active
              }, enabled ? 'cursor-pointer' : 'cursor-default')
              const last = index === ctx.panels.length - 1
            %}
            <li
              class="mb-0 d-flex flex-items-start {{ last ? 'pb-2' : '' }} {{ hideFromNavigation === 'true' ? 'd-none first-hidden' : '' }}"
              style="padding-bottom: 30px;"
              {% if (active) { %} 
                data-current
              {% } %} 
              {% if (completed) { %} 
                data-complete 
              {% } %}
            >
              
              {% if (completed) { %}
                <span
                  class="bg-green-3 round-round fg-white flex-no-shrink"
                  style="
                    margin-top: 2px;
                    margin-right: -5px;
                    margin-left: -9px;
                    width: 20px;
                    height: 20px;
                  "
                  data-icon="check"
                  data-width="10"></span>
              {% } else { %}
                <span
                  class="flex-no-shrink {{ active ? color : 'fg-grey-4' }}"
                  style="margin: -1px 0 0 -.24em;"
                  data-icon="square"
                  data-width="10"></span>
              {% } %}
              <button
                class="font-inherit border-0 bg-none flex-auto align-left pl-2 py-0 {{ style }}"
                {% if (active) { %}
                  aria-current="page"
                {% } %}
                {% if (enabled) { %}
                  ref="{{ ctx.wizardKey }}-link"
                {% } else { %}
                  disabled
                  style="cursor:default"
                {% } %}>
                {{
                  ctx.t([
                    `${panel.key}.displayTitle`,
                    `${panel.key}.title`,
                    panel.properties.displayTitle || panel.title
                  ])
                }}
              </button>
            </li>
          {%
            } else {
              // if we don't render something, the nav indexes are wrong and nav clicks go to the wrong place
          %}
            <li ref="{{ ctx.wizardKey }}-link" hidden></li>
          {% } %}

        {% }) %}
      </ul>
    </div>
  </div>
</nav>