= mixin('pagination', 'nav = {related: false, next: false}');
  - this.nav = (!this.nav || typeof this.nav === 'string') ? {} : this.nav

  - this.nav.related = (this.nav.hasOwnProperty('related')) ? this.nav.related : false
  - this.nav.next = (this.nav.hasOwnProperty('next')) ? this.nav.next : false

  div class='layout-content page-max'
    div class='wrap mb-4'
      nav class='grid tablet:grid-cols-2 gap-3'
        - if this.nav.related
          a class='btn' href="${this.baseUrl}/${this.nav.related.href}"
            span See related, "${this.nav.related.label}"
        - else
          span

        - if this.nav.next
          a class='btn-secondary' href="${this.baseUrl}/${this.nav.next.href}"
            span Next, "${this.nav.next.label}"

            svg aria-hidden='true' class='icon-ui rtl:flip'
              use href='#lucide-arrow-right'
        - else
          span