@props(['client'])

<li
    class="vpm-admin-expert-traders__item"
    data-vpm-client-name="{{ strtolower($client->name) }}"
>
    <a href="{{ route('admin.clients.show', $client) }}" class="vpm-admin-expert-traders__row">
        <div class="vpm-admin-expert-traders__lead">
            <time datetime="{{ $client->created_at->toIso8601String() }}" class="vpm-admin-expert-traders__date">
                <span class="vpm-admin-expert-traders__date-month">{{ $client->created_at->format('M') }}</span>
                <span class="vpm-admin-expert-traders__date-day">{{ $client->created_at->format('d') }}</span>
            </time>

            @if ($client->profilePhotoUrl())
                <img
                    src="{{ $client->profilePhotoUrl() }}"
                    alt="{{ $client->name }}"
                    class="vpm-admin-expert-traders__avatar"
                    width="64"
                    height="64"
                    loading="lazy"
                >
            @else
                <div class="vpm-admin-expert-traders__avatar vpm-admin-expert-traders__avatar--fallback" aria-hidden="true">
                    {{ $client->initials() }}
                </div>
            @endif
        </div>

        <div class="vpm-admin-expert-traders__meta">
            <div class="vpm-admin-expert-traders__stats">
                <p>{{ $client->name }}</p>
                <p>{{ $client->email }}</p>
                <p>{{ $client->mobile }}</p>
            </div>
            <p class="vpm-admin-expert-traders__pending">Copying Traders: {{ number_format($client->copying_traders_count) }}</p>
        </div>
    </a>
</li>