@forelse($suggestedNurses as $nurse)
    @php $nProfile = $nurse->nurseProfile ?? null; @endphp
    <div class="suggestion-item">
        <a href="{{ route('user.profile.view', $nurse->id) }}" class="suggestion-profile-link">
            <img src="{{ $nurse->displayAvatarUrl() }}" alt="{{ $nurse->name }}" class="suggestion-avatar" width="48" height="48" loading="lazy" decoding="async">
            <div class="suggestion-info">
                <p class="suggestion-name">{{ $nurse->name }}</p>
                <p class="suggestion-specialty">{{ $nProfile?->primary_specialty ?? 'User' }}</p>
                <p class="suggestion-location">
                    @if($nProfile?->country)
                        {{ $nProfile->city ? $nProfile->city . ', ' : '' }}{{ $nProfile->country }}
                    @endif
                </p>

                <div class="suggestion-meta" style="margin-top:6px;">
                    <x-status-badge :status="'none'" :userId="$nurse->id" :mutualCount="0" />
                </div>

                @if($nProfile?->bio)
                    <p class="suggestion-bio">{{ Str::limit($nProfile->bio, 80) }}</p>
                @endif
            </div>
        </a>
        <form method="POST" action="{{ route('nurse.connect.request') }}" class="ajax-connection-form" data-user-id="{{ $nurse->id }}">
            @csrf
            <input type="hidden" name="recipient_id" value="{{ $nurse->id }}">
            <button type="submit" class="btn btn-outline connect-button" data-user-id="{{ $nurse->id }}">
                Connect
            </button>
        </form>
    </div>
@empty
    <div class="empty-state">No suggestions right now.</div>
@endforelse