{{ if .Params.showPagination | default (.Site.Params.article.showPagination | default true) }}
  {{ if or .NextInSection .PrevInSection }}
    <div class="pt-8 article-pagination">
      <hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
      <div class="flex justify-between pt-3">
        <span>
          {{ if .NextInSection }}
            <a class="flex" href="{{ .NextInSection.RelPermalink }}">
              <span
                class="mr-3 ltr:inline rtl:hidden article-pagination-direction text-neutral-700 dark:text-neutral"
                >&larr;</span
              >
              <span
                class="ml-3 ltr:hidden rtl:inline article-pagination-direction text-neutral-700 dark:text-neutral"
                >&rarr;</span
              >
              <span class="flex flex-col">
                <span class="article-pagination-title mt-[0.1rem] leading-6"
                  >{{ .NextInSection.Title | emojify }}</span
                >
                <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
                  {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
                    {{ partial "meta/date.html" .NextInSection }}
                  {{ end }}
                </span>
              </span>
            </a>
          {{ end }}
        </span>
        <span>
          {{ if .PrevInSection }}
            <a class="flex text-right" href="{{ .PrevInSection.RelPermalink }}">
              <span class="flex flex-col">
                <span class="article-pagination-title mt-[0.1rem] leading-6"
                  >{{ .PrevInSection.Title | emojify }}</span
                >
                <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
                  {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
                    {{ partial "meta/date.html" .PrevInSection }}
                  {{ end }}
                </span>
              </span>
              <span
                class="ml-3 ltr:inline rtl:hidden article-pagination-direction text-neutral-700 dark:text-neutral"
                >&rarr;</span
              >
              <span
                class="mr-3 ltr:hidden rtl:inline article-pagination-direction text-neutral-700 dark:text-neutral"
                >&larr;</span
              >
            </a>
          {{ end }}
        </span>
      </div>
    </div>
  {{ end }}
{{ end }}
