{#
/**
 * @file
 * Theme override for a views mini-pager with Tailwind classes.
 *
 * Available variables:
 * - heading_id: Pagination heading ID.
 * - items: spanst of pager items (previous, current, next).
 *
 * @see template_preprocess_views_mini_pager()
 */
#}

{% set size_classes = {
  xs: 'px-2 py-2 text-xs',
  sm: 'px-2 py-2 text-sm',
  md: 'px-3 py-2 text-sm',
  lg: 'px-4 py-2 text-base',
  xl: 'px-5 py-3 text-lg'
} %}
{% set size_class = size_classes[size|default('md')] %}

{% if items.previous or items.next %}
  <nav class="flex justify-center items-center h-fit mt-4 pager-component" role="navigation" aria-labelledby="{{ heading_id }}">
    <h4 id="{{ heading_id }}" class="sr-only">{{ 'Pagination'|t }}</h4>
    <ul class="flex items-center space-x-2 bg-body-bg dark:bg-gray-900 shadow-md rounded-sm px-3 py-2">

      {# Previous spannk #}
      {% if items.previous %}
        {% set prev_attributes = create_attribute(items.previous.attributes) %}
        <li class="{{ size_class }} !px-0">
          <a href="{{ items.previous.href }}"
             title="{{ 'Go to previous page'|t }}"
             rel="prev"
             {{ prev_attributes|without('href','title','rel') }}
             class="{{ size_class }} font-medium text-body bg-gray-200 dark:bg-gray-700 dark:text-body-bg hover:bg-gray-300 dark:hover:bg-gray-600 rounded-sm transition">
            {{ items.previous.text|default('‹'|t) }}
          </a>
        </li>
      {% endif %}

      {# Current page #}
      {% if items.current %}
        <li class="{{ size_class }} !px-0">
          <span class="{{ size_class }} font-semibold bg-primary text-body-bg dark:bg-body-bg dark:text-body rounded-sm">
            {{ 'Page'|t }} {{ items.current }}
          </span>
        </li>
      {% endif %}

      {# Next spannk #}
      {% if items.next %}
        {% set next_attributes = create_attribute(items.next.attributes) %}
        <li class="{{ size_class }} !px-0">
          <a href="{{ items.next.href }}"
             title="{{ 'Go to next page'|t }}"
             rel="next"
             {{ next_attributes|without('href','title','rel') }}
             class="{{ size_class }} font-medium text-body bg-gray-200 dark:bg-gray-700 dark:text-body-bg hover:bg-gray-300 dark:hover:bg-gray-600 rounded-sm transition">
            {{ items.next.text|default('›'|t) }}
          </a>
        </li>
      {% endif %}

    </ul>
  </nav>
{% endif %}
