{{/* - Multi-page guide: render a progress bar - */}}
<div class="my-4 flex flex-col items-start text-sm">
  {{ $totalPages := len .CurrentSection.Pages }}
  {{/* - initialize the page store

    $stepper_seen controls the color of the item in the stepper

    green: "completed" - index is lower than current page
    blue: current page
    gray: next in section
    for the section page, they're all gray

    default to true if kind = section
    (make all entries gray)

    -
  */}}
  {{ page.Store.Set "stepper_seen" .IsSection }}
  {{/* - Loop over the pages in this guide - */}}
  {{ range $i, $e := .CurrentSection.Pages }}
    {{ $isLast := eq (add $i 1) $totalPages }}
    <div class="flex">
      <div class="flex flex-col items-center">
        {{/* - Render the page's index digit (1,2,3,4 etc) - */}}
        <a
          href="{{ .Permalink }}"
          class="{{ if (page.Store.Get "stepper_seen") }}
            bg-gray-400 dark:bg-gray-500
          {{ else if (eq . page) }}
            {{ .Store.Set "stepper_seen" true }} bg-blue-400 dark:bg-blue-800
          {{ else }}
            bg-green-400 dark:bg-green-dark-400
          {{ end }} flex h-8 w-8 items-center justify-center rounded-full text-white no-underline"
        >
          {{ add $i 1 }}
        </a>
        {{/* - Render the vertical border - */}}
        {{ if not $isLast }}
          <div
            class="{{ if (page.Store.Get "stepper_seen") }}
              border-gray-400 dark:border-gray-400
            {{ else if (eq . page) }}
              border-blue-400 dark:border-blue-400
            {{ else }}
              border-green-400 dark:border-green-400
            {{ end }} h-6 border-l-2"
          ></div>
        {{ end }}
      </div>
      {{/* - Render the page's title - */}}
      <div class="ml-2 flex h-8 items-center self-start">
        <a href="{{ .Permalink }}">
          {{ .LinkTitle }}
        </a>
      </div>
    </div>
  {{ end }}
</div>
