@php

    $prevRoute = route('blog.index', [
        'author' => request()->get('author', null),
        'categories' => request()->get('categories', null),
        'sortColumn' => request()->get('sortColumn', 'latest'),
        'sortDirection' => request()->get('sortDirection', 'DESC'),
        'page' => ($posts->currentPage() == 1) ? 1 : ($posts->currentPage() -1),
        'perPage' => request()->get('perPage', 12),
    ]);
    $nextRoute = route('blog.index', [
        'author' => request()->get('author', null),
        'categories' => request()->get('categories', null),
        'sortColumn' => request()->get('sortColumn', 'latest'),
        'sortDirection' => request()->get('sortDirection', 'DESC'),
        'page' => ($posts->currentPage() == $posts->lastPage()) ? $posts->lastPage() : ($posts->currentPage() + 1),
        'perPage' => request()->get('perPage', 12),
    ]);
@endphp
<x-pagination-footer
    currentPage="{{ $posts->currentPage() }}"
    perPage="{{ $posts->perPage() }}"
    lastPage="{{ $posts->lastPage() }}"
    total="{{ $posts->total() }}"
>

    <x-slot name="nextRoute">
        <a
            href="{{ $nextRoute }}"
            class="{{ ($posts->currentPage() == $posts->lastPage()) ? "disabled" : '' }}"
        >
            <!-- right-arrow -->
            <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362.04 102.38">
            <path d="M358.37,193.63c4.9-2.45,4.9-10.4,0-12.85C320.43,160,281.87,141,240.26,130c-6.12-1.22-12.24,5.51-8.57,11a139.91,139.91,0,0,0,31.21,31.82C177.22,170.37,88.48,158.74,4,178.94c-6.12,1.22-4.9,11.63,1.23,11,87.52-11,174.42-2.45,261.94-1.22-9.18,10.4-18.36,20.81-27.54,30.6-4.28,4.28-1.84,13.46,5.51,12.85C285.54,227.29,323.49,213.82,358.37,193.63Zm-72.83-6.73c5.51-3.67,4.28-14.08-4.28-14.08H280c-7.34-7.34-14.69-14.08-22-22,28.15,9.79,54.47,22,80.78,36.11-23.87,12.24-48.35,21.42-74.66,26.32,6.12-6.73,12.24-14.08,19-20.81A4.52,4.52,0,0,0,285.54,186.89Z" transform="translate(0 -129.83)"/>
            </svg>
            <div class="hover-notification">
                <!-- left-arrow -->
                <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 346.39 63.22">
                <path d="M58.52,141.74C37.1,146,18.74,157,2.22,170.5c-3.67,3.06-2.45,9.18,1.22,11.63,19.58,11,41,20.2,63.65,22.64,6.73.61,7.35-9.79,1.22-11A226.21,226.21,0,0,1,20.58,175.4a107.78,107.78,0,0,1,14.08-8.57c-4.28,4.28-2.45,14.08,5.51,14.08,99.76.61,202.57,23.26,301.1,5.51,8-1.22,6.12-14.69-1.84-14.08-100.37,8-198.9-7.35-299.27-8H38.94a94.81,94.81,0,0,1,23.26-8C72,155.2,68.31,139.9,58.52,141.74Z" transform="translate(0 -141.59)"/>
                </svg>
                <span>Sledeća</span>
            </div>
            <!-- hover-notification end -->
        </a>
    </x-slot>

    <x-slot name="prevRoute">
        <a
            href="{{ $prevRoute }}"
            @if ($posts->currentPage() == 1)
                disabled="disabled"
            @endif
            class="{{ ($posts->currentPage() == 1) ? "disabled" : '' }}"
        >
            <!-- left-arrow -->
            <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362.04 102.38">
            <path d="M3.67,168.42c-4.9,2.45-4.9,10.4,0,12.85,37.94,20.81,76.5,39.78,118.12,50.8,6.12,1.22,12.24-5.51,8.57-11a139.91,139.91,0,0,0-31.21-31.82c85.68,2.45,174.42,14.08,258.88-6.12,6.12-1.22,4.9-11.63-1.23-11-87.52,11-174.42,2.45-261.94,1.22,9.18-10.4,18.36-20.81,27.54-30.6,4.28-4.28,1.84-13.46-5.51-12.85C76.5,134.76,38.56,148.22,3.67,168.42Zm72.83,6.73c-5.51,3.67-4.28,14.08,4.28,14.08H82c7.34,7.34,14.69,14.08,22,22-28.15-9.79-54.47-22-80.78-36.11,23.87-12.24,48.35-21.42,74.66-26.32-6.12,6.73-12.24,14.08-19,20.81A4.52,4.52,0,0,0,76.5,175.15Z" transform="translate(0 -129.83)"/>
            </svg>
            <div class="hover-notification">
                <!-- right-arrow -->
                <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 346.39 63.22">
                <path d="M287.87,204.65c21.42-4.28,39.78-15.3,56.31-28.76,3.67-3.06,2.45-9.18-1.22-11.63-19.58-11-41-20.2-63.65-22.64-6.73-.61-7.35,9.79-1.22,11A226.21,226.21,0,0,1,325.81,171a107.78,107.78,0,0,1-14.08,8.57c4.28-4.28,2.45-14.08-5.51-14.08-99.76-.61-202.57-23.26-301.1-5.51C-2.83,161.2-1,174.66,7,174.05c100.37-8,198.9,7.35,299.27,8h1.22a94.81,94.81,0,0,1-23.26,8C274.41,191.19,278.08,206.49,287.87,204.65Z" transform="translate(0 -141.59)"></path>
                </svg>
                <span>Prethodna</span>
            </div>
            <!-- hover-notification end -->
        </a>
    </x-slot>
</x-pagination-footer>

<!-- page-pagination end -->
{{-- @if ($posts->total() > 18)
    <div class="col-12 load-more-container">
        <div class="load-more">
            <div class="load-more-holder">
                <p class="text-light">Prikazuje {{ ($posts->currentPage() - 1) * $posts->perPage() + count($posts) }} od {{ $posts->total() }}</p>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: {{ (((($posts->currentPage() - 1) * $posts->perPage() + count($posts)) / $posts->total()) * 100) }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                @if ($posts->currentPage() != $posts->lastPage())
                    <button id="showMore" class="btn btn-pill-blue-45" type="button" data-page_number="{{ $posts->currentPage() + 1 }}">Prikaži više</button>
                @endif
            </div>
        </div>
    </div>
@endif --}}