<f:if condition="{pagination.total} > 1">
    <!-- Pagination Icons -->
    <svg style="display: none;">
        <symbol id="tb-pagination-icon-prev" viewBox="0 0 256 512">
            <path fill="currentColor" d="M231.293 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L70.393 256 251.092 74.87c4.686-4.686 4.686-12.284 0-16.971L231.293 38.1c-4.686-4.686-12.284-4.686-16.971 0L4.908 247.515c-4.686 4.686-4.686 12.284 0 16.971L214.322 473.9c4.687 4.686 12.285 4.686 16.971-.001z"></path>
        </symbol>
        <symbol id="tb-pagination-icon-next" viewBox="0 0 256 512">
            <path fill="currentColor" d="M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908 437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z"></path>
        </symbol>
    </svg>

    <nav class="tb-pagination" data-toubiz-pagination>
        <ul class="tb-pagination__list">
            <!-- First page -->
            <li class="tb-pagination__item-group tb-pagination__item-group--first {f:if(condition: pagination.showStartItems, then: 'tb-pagination__item-group--connect')}">
                <ul>
                    <li class="tb-pagination__item {f:if(condition: pagination.firstItem.isCurrent, then: 'tb-pagination__item--current')}">
                        <a
                            data-toubiz-pagination-page="{pagination.firstItem.page}"
                            class="tb-pagination__link"
                            {f:if(condition: pagination.firstItem.isCurrent, then: 'aria-current="page"')}
                            {f:if(condition: pagination.firstItem.href, then: 'href="{pagination.firstItem.href}"')}>

                            {pagination.firstItem.page}
                        </a>
                    </li>
                </ul>
            <li>

            <f:if condition="{pagination.showStartItems}">
                <li class="tb-pagination__item-group tb-pagination__item-group--start">
                    <ul>
                        <f:for each="{pagination.startItems}" as="item">
                            <li class="tb-pagination__item {f:if(condition: item.isCurrent, then: 'tb-pagination__item--current')}">
                                <a
                                    data-toubiz-pagination-page="{item.page}"
                                    class="tb-pagination__link"
                                    {f:if(condition: item.isCurrent, then: 'aria-current="page"')}
                                    {f:if(condition: item.href, then: 'href="{item.href}"')}>

                                    {item.page}
                                </a>
                            </li>
                        </f:for>
                    </ul>
                </li>

                <f:if condition="{pagination.total} > 7">
                    <!-- Divider -->
                    <li class="tb-pagination__divider">
                        …
                    </li>
                </f:if>
            </f:if>

            <f:if condition="{pagination.showMidItems}">
                <!-- Divider -->
                <li class="tb-pagination__divider">
                    …
                </li>

                <li class="tb-pagination__item-group tb-pagination__item-group--mid">
                    <ul>

                        <f:for each="{pagination.midItems}" as="item">
                            <li class="tb-pagination__item {f:if(condition: item.isCurrent, then: 'tb-pagination__item--current')}">
                                <a
                                    data-toubiz-pagination-page="{item.page}"
                                    class="tb-pagination__link"
                                    {f:if(condition: item.isCurrent, then: 'aria-current="page"')}
                                    {f:if(condition: item.href, then: 'href="{item.href}"')}>

                                    {item.page}
                                </a>
                            </li>
                        </f:for>
                    </ul>
                </li>

                <!-- Divider -->
                <li class="tb-pagination__divider">
                    …
                </li>
            </f:if>

            <f:if condition="{pagination.showEndItems}">
                <!-- Divider -->
                <li class="tb-pagination__divider">
                    …
                </li>

                <li class="tb-pagination__item-group tb-pagination__item-group--end">
                    <ul>
                        <f:for each="{pagination.endItems}" as="item">
                            <li class="tb-pagination__item {f:if(condition: item.isCurrent, then: 'tb-pagination__item--current')}">
                                <a
                                    data-toubiz-pagination-page="{item.page}"
                                    class="tb-pagination__link"
                                    {f:if(condition: item.isCurrent, then: 'aria-current="page"')}
                                    {f:if(condition: item.href, then: 'href="{item.href}"')}>

                                    {item.page}
                                </a>
                            </li>
                        </f:for>
                    </ul>
                </li>
            </f:if>

            <!-- Last page -->
            <li class="tb-pagination__item-group tb-pagination__item-group--last {f:if(condition: pagination.showEndItems, then: 'tb-pagination__item-group--connect')}">
                <ul>
                    <li class="tb-pagination__item {f:if(condition: pagination.lastItem.isCurrent, then: 'tb-pagination__item--current')}">
                        <a
                            data-toubiz-pagination-page="{pagination.lastItem.page}"
                            class="tb-pagination__link"
                            {f:if(condition: pagination.lastItem.isCurrent, then: 'aria-current="page"')}
                            {f:if(condition: pagination.lastItem.href, then: 'href="{pagination.lastItem.href}"')}>

                            {pagination.lastItem.page}
                        </a>
                    </li>
                </ul>
            </li>
        </ul>

        <ul class="tb-pagination__navigation">
            <!-- Prev link -->
            <li class="tb-pagination__item">
                <!-- Mark this as disabled if we are on the first page -->
                <a
                    data-toubiz-pagination-prev
                    class="tb-pagination__link tb-pagination__link--prev tb-button tb-button--secondary tb-button--square"
                    {f:if(condition: pagination.prevItem.href, then: 'href="{pagination.prevItem.href}"')}
                    {f:if(condition: pagination.prevItem.disabled, then: 'disabled')}>

                    <svg
                        class="tb-pagination__icon c-icon"
                        aria-labelledby="pagination-previous-icon-label"
                        role="img">

                        <title id="pagination-previous-icon-label"><f:translate id="label.paginationPrev" package="Newland.NeosCommon" source="ViewHelpers/Pagination" /></title>
                        <use xlink:href="#tb-pagination-icon-prev" />
                    </svg>
                </a>
            </li>

            <!-- Next link -->
            <li class="tb-pagination__item">
                <!-- Mark this as disabled if we are on the last page -->
                <a
                    data-toubiz-pagination-next
                    class="tb-pagination__link tb-pagination__link--next tb-button tb-button--secondary tb-button--square"
                    {f:if(condition: pagination.nextItem.href, then: 'href="{pagination.nextItem.href}"')}
                    {f:if(condition: pagination.nextItem.disabled, then: 'disabled')}>

                    <svg
                        class="tb-pagination__icon c-icon"
                        aria-labelledby="pagination-next-icon-label"
                        role="img">

                        <title id="pagination-next-icon-label"><f:translate id="label.paginationNext" package="Newland.NeosCommon" source="ViewHelpers/Pagination" /></title>
                        <use xlink:href="#tb-pagination-icon-next" />
                    </svg>
                </a>
            </li>
        </ul>
    </nav>
</f:if>
