{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<!-- Pagination Icons -->
<svg style="display: none;">
    <symbol id="tb-search-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-search-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-search-pagination">
    <ul class="tb-search-pagination__list">
        <!-- First page -->
        <li class="tb-search-pagination__item-group tb-search-pagination__item-group--first {f:if(condition: pagination.showStartItems, then: 'tb-search-pagination__item-group--connect')}">
            <ul>
                <li class="tb-search-pagination__item {f:if(condition: '{pagination.current} == 1', then: 'tb-search-pagination__item--current')}">
                    <a
                        class="tb-search-pagination__link"
                        {f:if(condition: '{pagination.current} == 1', then: 'aria-current="page"', else: 'href="{currentPath}?search={searchTerm}"')}>

                        1
                    </a>
                </li>
            </ul>
        <li>

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

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

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

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

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

                    <f:for each="{pagination.midItems}" as="item">
                        <li class="tb-search-pagination__item {f:if(condition: '{pagination.current} == {item}', then: 'tb-search-pagination__item--current')}">
                            <a
                                class="tb-search-pagination__link"
                                {f:if(condition: '{pagination.current} == {item}', then: 'aria-current="page"', else: 'href="{currentPath}?search={searchTerm}&page={item}"')}>

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

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

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

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

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

        <!-- Last page -->
        <li class="tb-search-pagination__item-group tb-search-pagination__item-group--last {f:if(condition: pagination.showEndItems, then: 'tb-search-pagination__item-group--connect')}">
            <ul>
                <li class="tb-search-pagination__item {f:if(condition: '{pagination.current} == {pagination.total}', then: 'tb-search-pagination__item--current')}">
                    <a
                        class="tb-search-pagination__link"
                        {f:if(condition: '{pagination.current} == {pagination.total}', then: 'aria-current="page"', else: 'href="{currentPath}?search={searchTerm}&page={pagination.total}"')}>

                        {pagination.total}
                    </a>
                </li>
            </ul>
        </li>
    </ul>

    <ul class="tb-search-pagination__navigation">
        <!-- Prev link -->
        <li class="tb-search-pagination__item">
            <!-- Mark this as disabled if we are on the first page -->
            <a
                class="tb-search-pagination__link tb-search-pagination__link--prev tb-button tb-button--secondary tb-button--square"
                {f:if(condition: '{pagination.current} > 1', else: 'disabled')}
                href="{currentPath}?search={searchTerm}&page={pagination.prevPage}">

                <svg
                    class="tb-search-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.Toubiz.Search.Neos" source="Views/Shared" /></title>
                    <use xlink:href="#tb-search-pagination-icon-prev" />
                </svg>
            </a>
        </li>

        <!-- Next link -->
        <li class="tb-search-pagination__item">
            <!-- Mark this as disabled if we are on the last page -->
            <a
                class="tb-search-pagination__link tb-search-pagination__link--prev tb-button tb-button--secondary tb-button--square"
                {f:if(condition: '{pagination.current} < {pagination.total}', else: 'disabled')}
                href="{currentPath}?search={searchTerm}&page={pagination.nextPage}">

                <svg
                    class="tb-search-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.Toubiz.Search.Neos" source="Views/Shared" /></title>
                    <use xlink:href="#tb-search-pagination-icon-next" />
                </svg>
            </a>
        </li>
    </ul>
</nav>