{{ if .Params.pager | default true }}
  {{ if and .Section (or .NextInSection .PrevInSection) }}
    {{ $next := .NextInSection }}
    {{ $prev := .PrevInSection }}
    {{ if (eq (.Scratch.Get "invert_pager") true) | default .Params.invert_pager | default false }}
      {{ $next = .PrevInSection }}
      {{ $prev = .NextInSection }}
    {{ end }}
<div class="pt-1 no-prose w-full">
  <hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
  <div class="flex flex-col md:flex-row flex-nowrap justify-between gap-5 pt-2">
    <div class="">
      {{ if $prev }}
        <a class="group flex no-underline" href="{{ $prev.RelPermalink }}">
          <span
            class="mt-[-0.3rem] me-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 dark:text-neutral dark:group-hover:text-primary-400"
          ><span class="ltr:inline rtl:hidden">&larr;</span></span>
          <span class="flex flex-col">
            <span
              class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
            >{{ $prev.Title }}</span>
            <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
              {{ if .Params.show_date | default true }}
                {{ time.Format (site.Params.hugoblox.locale.date_format | default ":date_long") $prev.Date }}
              {{ end }}
            </span>
          </span>
        </a>
      {{ end }}
    </div>
    <div class="">
      {{ if $next }}
        <a class="group flex text-right no-underline" href="{{ $next.RelPermalink }}">
          <span class="flex flex-col">
            <span
              class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
            >{{ $next.Title }}</span
            >
            <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
              {{ if .Params.show_date | default true }}
                {{ time.Format (site.Params.hugoblox.locale.date_format | default ":date_long") $next.Date }}
              {{ end }}
            </span>
          </span>
          <span
            class="mt-[-0.3rem] ms-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 dark:text-neutral dark:group-hover:text-primary-400"
          ><span class="ltr:inline">&rarr;</span></span>
        </a>
      {{ end }}
    </div>
  </div>
</div>
{{ end }}
{{ end }}
