@forelse($advocates as $advocate)

<div class="col-lg-3 col-md-6 col-sm-12">
    <div class="adv-card">

        <div class="adv-top">
            @if($advocate->image)
            <img src="{{ asset($advocate->image) }}" alt="{{ $advocate->fullname }}">
            @else
            <img src="{{ asset('frontend/images/advocate_dummy_img.jpg') }}" alt="advocate_img">
            @endif
            <div class="adv-exp">44+ Yrs</div>
        </div>

        <div class="adv-body">
            <h3>Advocate {{ $advocate->fullname }}</h3>

            <p class="adv-location">
                <i class="fa-solid fa-location-dot"></i>
                {{ $advocate->city }}, {{ $advocate->state }}
            </p>

            @if(isset($advocate->practice_area))
            <div class="practicing_area">
                <h3>Practicing Area </h3>
                <p class="adv-tags">
                    {{ implode(', ', $advocate->practice_area) }}
                </p>
            </div>
            @endif

        </div>

        <div class="adv-footer">
            <a href="{{ route('advocate.profile', ['advocate' => $advocate->slug]) }}" class="view-profile">
                View Profile <i class="fa-solid fa-arrow-right"></i>
            </a>
        </div>

    </div>
</div>

@empty

<p>No advocates found.</p>
@endforelse


<!-- PAGINATION -->
@if ($advocates->hasPages())
<div class="jobs-pagination mt-4">
    @if ($advocates->onFirstPage())
    <span class="page-btn disabled">Prev</span>
    @else
    <a href="javascript:void(0)" class="page-btn" data-page="{{ $advocates->currentPage() - 1 }}">Prev</a>
    @endif

    @foreach ($advocates->getUrlRange(1, $advocates->lastPage()) as $page => $url)
    <a href="javascript:void(0)" class="page-num {{ $page == $advocates->currentPage() ? 'active' : '' }}" data-page="{{ $page }}">{{ $page }}</a>
    @endforeach

    @if ($advocates->hasMorePages())
    <a href="javascript:void(0)" class="page-btn" data-page="{{ $advocates->currentPage() + 1 }}">Next</a>
    @else
    <span class="page-btn disabled">Next</span>
    @endif
</div>
@endif