{% load wagtailcore_tags i18n %}

<div class="flex items-center justify-between gap-4">
  {% if page.get_prev_sibling %}
  <div
    class="tooltip tooltip-right rtl:tooltip-left tooltip-primary mr-auto rtl:mr-0 rtl:ml-auto"
    data-tip="{% trans 'Previous page' %}"
  >
    <a
      href="{% pageurl page.get_prev_sibling %}"
      class="btn btn-soft btn-primary lg:btn-lg 2xl:btn-xl"
    >
      <i data-lucide="chevron-left" class="size-4 md:size-6 rtl:rotate-180"></i>
      <div class="grid place-items-start">
        <span class="text-xs">{% trans 'Prev' %}</span>
        <span class="text-sm">{{ page.get_prev_sibling }}</span>
      </div>
    </a>
  </div>
  {% endif %}
  <!---->
  {% if page.get_next_sibling %}
  <div
    class="tooltip tooltip-left rtl:tooltip-right tooltip-primary ml-auto rtl:ml-0 rtl:mr-auto"
    data-tip="{% trans 'Next page' %}"
  >
    <a
      href="{% pageurl page.get_next_sibling %}"
      class="btn btn-soft btn-primary lg:btn-lg 2xl:btn-xl"
    >
      <div class="grid place-items-end">
        <span class="text-xs">{% trans 'Next' %}</span>
        <span class="text-sm">{{ page.get_next_sibling }}</span>
      </div>
      <i
        data-lucide="chevron-right"
        class="size-4 md:size-6 rtl:rotate-180"
      ></i>
    </a>
  </div>
  {% endif %}
</div>