@props(['data', 'first'=>true])

@if ($data->lastPage() > 1)

@php($range = 3)
@php($hoverCss = 'transition-colors duration-300 transform bg-white hover:bg-secondary-300 hover:text-white ')
@php($arrowCss = 'items-center justify-center w-6 w-6 text-gray-400 text-sm')
@php($baseCss = 'hidden sm:flex items-center justify-center min-w-6 h-6 px-0.5 mr-1 ')
@php($dotCss = $baseCss.' text-secondary-700 text-sm')
@php($currentCss = $baseCss.'rounded-full text-xs font-bold text-white bg-primary-700')
@php($itemsCss = $baseCss. $hoverCss. 'rounded-full text-xs font-bold text-gray-700')

<div class="flex items-center border rounded-md p-1">

<!-- first -->
@if($data->currentPage()==1)
<span class="flex {{$arrowCss}}">
    <i class="fa-solid fa-caret-left fa-fw"></i>
</span>
@else
<a id="pager_first" href="javascript:pagerLink('first')" data-url="{{$data->url(1)}}" class="hidden sm:flex {{$arrowCss}}"  >
    <i class="fa-solid fa-caret-left fa-fw"></i>
</a>
<a id="pager_first_sm" href="javascript:pagerLink('first_sm')" data-url="{{$data->url($data->currentPage()-1)}}" class="flex sm:hidden {{$arrowCss}}"  >
    <i class="fa-solid fa-caret-left fa-fw"></i>
</a>
@endif

<!-- to first -->
@if (($data->currentPage() - $range) > 1)
	<span class="hidden sm:inline px-2 py-1 text-secondary-700 text-sm">...</span>
@endif

<!-- before current -->
@for ($lp = $range; $lp >= 1; $lp--)
	@php($pagecnt = $data->currentPage() - $lp)
	@if ($pagecnt > 0)
	<a id="pager_{{ $pagecnt }}" href="javascript:pagerLink({{ $pagecnt }})" data-url="{{ $data->url($pagecnt) }}" class="{{$itemsCss}}">
		{{ $pagecnt }}
	</a>
	@endif
@endfor

<!-- current -->
<span class="{{$currentCss}}">{{ $data->currentPage() }}</span>

<!-- after current -->
@for ($lp = 1; $lp <= $range; $lp++)
	@php($pagecnt = $data->currentPage() + $lp)
	@if ($data->lastPage() >= $pagecnt)
	<a id="pager_{{ $pagecnt }}" href="javascript:pagerLink({{ $pagecnt }})" data-url="{{ $data->url($pagecnt) }}" class="{{$itemsCss}}">
		{{ $pagecnt }}
	</a>
	@endif
@endfor

<!-- to last -->
@if ($data->lastPage() > ($data->currentPage() + $range))
	<span class="{{$dotCss}}">...</span>
@endif

<!-- last -->
@if($data->currentPage()==$data->lastPage())
<span class="flex {{$arrowCss}}">
    <i class="fa-solid fa-caret-right fa-fw"></i>
</span>
@else
<a id="pager_last" href="javascript:pagerLink('last')" data-url="{{ $data->url($data->lastPage()) }}" class="hidden sm:flex {{$arrowCss}}">
    <i class="fa-solid fa-caret-right fa-fw"></i>
</a>
<a id="pager_last_sm" href="javascript:pagerLink('last_sm')" data-url="{{ $data->url($data->currentPage() + 1) }}" class="flex sm:hidden {{$arrowCss}}">
    <i class="fa-solid fa-caret-right fa-fw"></i>
</a>
@endif

</div>
@endif

<!-- add open parameter -->
<script>
    @if($first)
    const pagerLink = (page)=> {
        let url = document.querySelector('#pager_' + page).dataset.url;
        url = url.replace(/\/search(\?|$)/, '$1');
        location.href = url;
        return false;
    };
    @endif
</script>