{% load i18n %}
{# @description The links that end a page: the page before it and the page after it in reading order, each naming the page it leads to. Draws nothing when the page has neither. #}
{# @prop previous:dict | description:"The page before this one, a dict with title (safe markup) and href; empty when there is none." #}
{# @prop next:dict | description:"The page after this one, a dict with title (safe markup) and href; empty when there is none." #}
<c-vars previous next />

{% if previous or next %}
  <nav aria-label="{% translate "Previous and next page" %}"
       class="flex gap-4 mt-12 pt-6 border-t border-base-300">
    {% if previous %}
      <a href="{{ previous.href }}"
         rel="prev"
         class="block max-w-prose p-4 border border-base-300 rounded-box hover:bg-base-200 focus-visible:bg-base-200">
        <span class="block text-xs opacity-70">{% translate "Previous" %}</span>
        <span class="block font-medium">{{ previous.title }}</span>
      </a>
    {% endif %}
    {% if next %}
      <a href="{{ next.href }}"
         rel="next"
         class="block max-w-prose ms-auto p-4 border border-base-300 rounded-box text-end hover:bg-base-200 focus-visible:bg-base-200">
        <span class="block text-xs opacity-70">{% translate "Next" %}</span>
        <span class="block font-medium">{{ next.title }}</span>
      </a>
    {% endif %}
  </nav>
{% endif %}