<!--
@int:
update translation for aria-label if we have additional languages
add disabled class only if we have no previous/ next pages
-->
<nav class="c-pagination c-pagination--center o-space-b:small" aria-label="Pagination-Navigation">
<ul class="c-pagination__list">
<!-- show previous pages -->
<li class="c-pagination__item c-pagination__item--prev">
<a href="" class="c-pagination__link c-link c-link--with-icon disabled" aria-label="Gehe zur vorherigen Seite" aria-current="false">
<svg width="32px" height="32px" viewBox="0 0 32 32" class="o-icons o-icons--arrow-left" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#arrow-left"></use>
</svg>
</a>
</li>
<!-- pages -->
<li class="c-pagination__item">
<!-- current page -->
<span class="c-pagination__link c-link c-link--with-icon" aria-label="Aktuelle Seite, Seite 1" aria-current="true">1</span>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link c-link c-link--with-icon" aria-label="Gehe zu Seite 2" aria-current="false">2</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link c-link c-link--with-icon" aria-label="Gehe zu Seite 3" aria-current="false">3</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link c-link c-link--with-icon" aria-label="Gehe zu Seite 4" aria-current="false">4</a>
</li>
<!-- show next pages -->
<li class="c-pagination__item c-pagination__item--next">
<a href="" class="c-pagination__link c-link c-link--with-icon" aria-label="Gehe zur nächsten Seite" aria-current="false">
<svg width="32px" height="32px" viewBox="0 0 32 32" class="o-icons o-icons--arrow-right" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#arrow-right"></use>
</svg>
</a>
</li>
</ul>
</nav>
<!--
@int:
update translation for aria-label if we have additional languages
add disabled class only if we have no previous/ next pages
-->
<nav class="c-pagination c-pagination--{{navModifier}} {{spaceAfter}}" aria-label="Pagination-Navigation">
<ul class="c-pagination__list">
<!-- show previous pages -->
<li class="c-pagination__item c-pagination__item--prev">
<a href="{{url}}" class="c-pagination__link {{modifier}} disabled" aria-label="Gehe zur vorherigen Seite" aria-current="false">
{{render '@icons--arrow-left'}}
</a>
</li>
<!-- pages -->
{{#each paginationItems}}
<li class="c-pagination__item">
{{#if currentPage}}
<!-- current page -->
<span class="c-pagination__link {{modifier}}" aria-label="Aktuelle Seite, Seite {{currentPage}}" aria-current="true">{{currentPage}}</span>
{{/if}}
{{#if page}}
<a href="{{url}}" class="c-pagination__link {{modifier}}" aria-label="Gehe zu Seite {{page}}" aria-current="false">{{page}}</a>
{{/if}}
</li>
{{/each}}
<!-- show next pages -->
<li class="c-pagination__item c-pagination__item--next">
<a href="{{url}}" class="c-pagination__link {{modifier}}" aria-label="Gehe zur nächsten Seite" aria-current="false">
{{render '@icons--arrow-right'}}
</a>
</li>
</ul>
</nav>
{
"navModifier": "center",
"modifier": "c-link c-link--with-icon",
"spaceAfter": "o-space-b:small",
"paginationItems": [
{
"currentPage": "1",
"modifier": "c-link c-link--with-icon",
"url": "#"
},
{
"page": "2",
"modifier": "c-link c-link--with-icon",
"url": "#"
},
{
"page": "3",
"modifier": "c-link c-link--with-icon",
"url": "#"
},
{
"page": "4",
"modifier": "c-link c-link--with-icon",
"url": "#"
}
]
}