@props(['client'])

<div class="handler-list">
    <h5 class="fw-bold mb-3 text-uppercase small text-muted">Assigned Handlers</h5>

    <ul class="list-group list-group-flush">
        @forelse($client->handlers as $handler)
            <li class="list-group-item p-0 d-flex justify-content-between align-items-center bg-transparent border-light">
                <div>
                    <span class="d-block fw-bold text-dark small">{{ $handler->type->display_name }}</span>
                    <div class="d-flex align-items-center mt-1">
                        <span class="text-muted">{{ $handler->user->name_first }} {{ $handler->user->name_last }}</span>
                    </div>
                </div>
            </li>
        @empty
            <li class="list-group-item px-0 border-0 bg-transparent">
                <p class="text-muted small mb-0">No handlers assigned yet.</p>
            </li>
        @endforelse
    </ul>
</div>