//- TODO 1. remove placeholders, 2. consider solving it with mixin?

mixin pager(currentPage = 1, id="pagination")
  .pager.d-flex(id=id)
    button.d-flex.first-page.px-2.py-1.align-self-center.no-bg-and-borders(
      disabled=currentPage === 1
    )
      img.align-self-center.align-self-center.d-flex(
        src="/images/chevron-double-left.svg"
        alt=""
      )
    button.d-flex.previous-page.px-2.py-1.align-self-center.align-self-center.no-bg-and-borders(
      disabled=currentPage === 1
    )
      img.align-self-center.d-flex(src="/images/chevron-left.svg" alt="")
    form.mx-2.no-bg-and-border.d-flex
      input.d-flex.align-self-center.pager-input.me-1.text-gray-1(
        name="page"
        value=currentPage
        disabled=!numberOfAllPages || numberOfAllPages <= 1
      )
      span.d-flex.align-self-center.me-1.text-gray-1= ' / '
      span.d-flex.align-self-center.pages-total.text-gray-1= numberOfAllPages > 0 ? numberOfAllPages : 1
    button.d-flex.next-page.px-2.py-1.align-self-center.align-self-center.no-bg-and-borders(
      disabled=!numberOfAllPages || currentPage >= numberOfAllPages
    )
      img.align-self-center.d-flex(src="/images/chevron-right-2.svg" alt="")
    button.d-flex.px-2.py-1.align-self-center.align-self-center.last-page.no-bg-and-borders(
      disabled=!numberOfAllPages || currentPage >= numberOfAllPages
    )
      img.align-self-center.d-flex(
        src="/images/chevron-double-right.svg"
        alt=""
      )