<style>
    .page-item.active .page-link {background: #eff2f7 !important; border-color: #e7e7e7 !important; color: #555; font-weight: bold;}
</style>

@if ($paginator->hasPages())
    <nav aria-label="Page navigation example">
        <ul class="pagination pagination-rounded justify-content-end">
            @if ($paginator->onFirstPage())
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1"><i class="typcn typcn-chevron-left"></i></a>
                </li>
            @else
                <li class="page-item"><a class="page-link waves-effect" href="{{ $paginator->previousPageUrl() }}"><i class="typcn typcn-chevron-left"></i></a></li>
            @endif
            @foreach ($elements as $element)
                @if (is_string($element))
                    <li class="page-item disabled pt-1 px-1 font-weight-bold">{{ $element }}</li>
                @endif
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <li class="page-item active">
                                <a class="page-link">{{ $page }}</a>
                            </li>
                        @elseif($page==1 || ($page < $paginator->currentPage()+3 && $page > $paginator->currentPage()-1 ) )
                            <li class="page-item">
                                <a class="page-link waves-effect" href="{{ $url }}">{{ $page }}</a>
                            </li>
                        @endif
                    @endforeach
                @endif
            @endforeach

            @if ($paginator->hasMorePages())
                <li class="page-item">
                    <a class="page-link waves-effect" href="{{ $paginator->nextPageUrl() }}" rel="next"><i class="typcn typcn-chevron-right"></i></a>
                </li>
            @else
                <li class="page-item disabled">
                    <a class="page-link" href="#"><i class="typcn typcn-chevron-right"></i></a>
                </li>
            @endif
        </ul>
@endif
