Pagination Component
   - items: array - Array of page items, each with:
     - text: string - Text to display (required)
     - url: string - URL to link to (default: #)
     - active: bool - Whether this is the active page (optional)
     - disabled: bool - Whether this item is disabled (optional)
     - label: string - Aria label for the link (optional)
     - icon: string - Icon HTML to display instead of text (optional)
   - label: string - Aria label for the pagination nav (default: Page navigation)
   - class: string - Additional CSS classes (optional)
   - size: string - Size variant (sm, lg) (optional)
   - alignment: string - Alignment (center, end) (optional)

    ThemedComponent::make("navigation/pagination")
	->active('value') //bool - Whether this is the active page (optional)
	->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
	->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
	->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
	->alignment('value') //string - Alignment (center, end) (optional)
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->class('value') //string - Additional CSS classes (optional)
	->disabled('value') //bool - Whether this item is disabled (optional)
	->icon('value') //string - Icon HTML to display instead of text (optional)
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->items('value') //array - Array of page items, each with:
	->label('value') //string - Aria label for the pagination nav (default: Page navigation)
	->size('value') //string - Size variant (sm, lg) (optional)
	->text('value') //string - Text to display (required)
	->url('value') //string - URL to link to (default: #)
	->render();

// Basic pagination with aria-current
echo ThemedComponent::make('navigation/pagination')
    ->items([
        [
            'text' => 'Previous',
            'disabled' => true
        ],
        [
            'text' => '1'
        ],
        [
            'text' => '2',
            'active' => true
        ],
        [
            'text' => '3'
        ],
        [
            'text' => 'Next'
        ]
    ])
    ->class('mb-3')
    ->render();

// Basic pagination with icons
echo ThemedComponent::make('navigation/pagination')
    ->items([
        [
            'text' => '«',
            'label' => 'Previous',
            'icon' => '«'
        ],
        [
            'text' => '1',
            'active' => true
        ],
        [
            'text' => '2'
        ],
        [
            'text' => '3'
        ],
        [
            'text' => '»',
            'label' => 'Next',
            'icon' => '»'
        ]
    ])
    ->class('mb-3')
    ->render();

// Disabled states
echo ThemedComponent::make('navigation/pagination')
    ->items([
        [
            'text' => '«',
            'label' => 'Previous',
            'icon' => '«',
            'disabled' => true
        ],
        [
            'text' => '1',
            'active' => true
        ],
        [
            'text' => '2'
        ],
        [
            'text' => '3'
        ],
        [
            'text' => '»',
            'label' => 'Next',
            'icon' => '»'
        ]
    ])
    ->render();

// Large pagination
echo ThemedComponent::make('navigation/pagination')
    ->items([
        ['text' => 'Previous'],
        ['text' => '1'],
        ['text' => '2', 'active' => true],
        ['text' => '3'],
        ['text' => 'Next']
    ])
    ->size('lg')
    ->class('mb-3')
    ->render();

// Small pagination
echo ThemedComponent::make('navigation/pagination')
    ->items([
        ['text' => 'Previous'],
        ['text' => '1'],
        ['text' => '2', 'active' => true],
        ['text' => '3'],
        ['text' => 'Next']
    ])
    ->size('sm')
    ->render();

// Center aligned pagination
echo ThemedComponent::make('navigation/pagination')
    ->items([
        ['text' => 'Previous'],
        ['text' => '1'],
        ['text' => '2', 'active' => true],
        ['text' => '3'],
        ['text' => 'Next']
    ])
    ->alignment('center')
    ->class('mb-3')
    ->render();

// Right aligned pagination
echo ThemedComponent::make('navigation/pagination')
    ->items([
        ['text' => 'Previous'],
        ['text' => '1'],
        ['text' => '2', 'active' => true],
        ['text' => '3'],
        ['text' => 'Next']
    ])
    ->alignment('end')
    ->render();

{# Pagination Component
   - items: array - Array of page items, each with:
     - text: string - Text to display (required)
     - url: string - URL to link to (default: #)
     - active: bool - Whether this is the active page (optional)
     - disabled: bool - Whether this item is disabled (optional)
     - label: string - Aria label for the link (optional)
     - icon: string - Icon HTML to display instead of text (optional)
   - label: string - Aria label for the pagination nav (default: Page navigation)
   - class: string - Additional CSS classes (optional)
   - size: string - Size variant (sm, lg) (optional)
   - alignment: string - Alignment (center, end) (optional)
#}
<nav aria-label="{{ content.label|default('...') }}"{% if content.class %} class="{{ content.class }}"{% endif %}>
  <ul class="pagination{% if content.size %} pagination-{{ content.size }}{% endif %}{% if content.alignment %} justify-content-{{ content.alignment }}{% endif %}">
    {% for item in content.items %}
    <li class="page-item{% if item.active %} active{% endif %}{% if item.disabled %} disabled{% endif %}">
      {% if item.disabled %}
      <a class="page-link">{{ item.text }}</a>
      {% else %}
      <a class="page-link" href="{{ item.url|default('#') }}"{% if item.label %} aria-label="{{ item.label }}"{% endif %}{% if item.active %} aria-current="page"{% endif %}>
        {% if item.icon %}
          <span aria-hidden="true">{{ item.icon|raw }}</span>
        {% else %}
          {{ item.text }}
        {% endif %}
      </a>
      {% endif %}
    </li>
    {% endfor %}
  </ul>
</nav>