{% 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 %}
  <nav class="flex justify-center items-center mt-6 space-x-2 pager-component" role="navigation" aria-labelledby="{{ heading_id }}">
    <{{ pagination_heading_level }} id="{{ heading_id }}" class="sr-only">{{ 'Pagination'|t }}</{{ pagination_heading_level }}>
    <ul class="flex items-center space-x-1 bg-body-bg dark:bg-gray-900  shadow-md px-4 py-3">
      
      {# First Page #}
      {% if items.first %}
        <li>
          <a href="{{ items.first.href }}" title="{{ 'Go to first page'|t }}" 
             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 transition">
             {{ items.first.text|default('First'|t) }}
          </a>
        </li>
      {% endif %}

      {# Previous Page #}
      {% if items.previous %}
        <li class "">
          <a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev" 
             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 transition">
             {{ items.previous.text|default('Previous'|t) }}
          </a>
        </li>
      {% endif %}

      {# Ellipsis for Previous Pages #}
      {% if ellipses.previous %}
        <li class=" text-gray-500 dark:text-gray-400">…</li>
      {% endif %}

      {# Page Numbers #}
      {% for key, item in items.pages %}
        <li class = "">
          <a href="{{ item.href }}" title="{{ current == key ? 'Current page'|t : 'Go to page @key'|t({'@key': key}) }}" 
             class=" {{ size_class }} font-medium  transition 
                    {{ current == key ? 'bg-primary text-body-bg dark:bg-body-bg dark:text-body' : 'text-body bg-gray-200 dark:bg-gray-700 dark:text-body-bg hover:bg-gray-300 dark:hover:bg-gray-600' }}">
            {{ key }}
          </a>
        </li>
      {% endfor %}

      {# Ellipsis for Next Pages #}
      {% if ellipses.next %}
        <li class=" "><span class="{{ size_class }} text-center hover:bg-gray-300 dark:hover:bg-gray-600 text-body dark:text-gray-400  bg-gray-200 dark:bg-gray-700 "> … </span></li>
      {% endif %}

      {# Next Page #} 
      {% if items.next %}
        <li>
          <a href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next" 
             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 transition">
            {{ items.next.text|default('Next'|t) }} 
          </a>
        </li>
      {% endif %}

      {# Last Page #}
      {% if items.last %}
        <li>
          <a href="{{ items.last.href }}" title="{{ 'Go to last page'|t }}" 
             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 transition">
            {{ items.last.text|default('Last'|t) }} 
          </a>
        </li>
      {% endif %}

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