Pagination

<div class="grid gap-8">
  <div class="flex items-center justify-center small:gap-2 medium:gap-8 large:gap-12">

    {% if prev  %}
      {% render '@button', {
        icon: 'chev-left',
        variant: 'square'
      } %}
    {% endif %}

    {% if pagination  %}
      <div class="flex items-center small:gap-0 medium:gap-4 large:gap-8">
        {% for index in pagination %}
          {% render '@button', {
            label: { default: index },
            variant: 'square',
            isActive: loop.index == 1
          } %}
          {% if dots and (not loop.last) %}
            <span class="text-shade-50 text-style-mini hidden small:block">&bull;</span>
          {% endif %}
        {% endfor %}
      </div>
    {% endif %}

    {% if itemOf  %}
      <span class="w-full medium:w-auto mx-4">Eintrag 9 von 32</span>
    {% endif %}

    {% if next  %}
      {% render '@button', {
        icon: 'chev-right',
        variant: 'square'
      } %}
    {% endif %}
  </div>

  {% if pageof  %}
  <div class="text-center _w-full _medium:w-auto _mx-4">
    <span>Seite 1 von 32</span>
  </div>
  {% endif %}
</div>