@props(['trader'])

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

            @if ($trader->photoUrl())
                <img
                    src="{{ $trader->photoUrl() }}"
                    alt="{{ $trader->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">
                    {{ $trader->initials() }}
                </div>
            @endif
        </div>

        <div class="vpm-admin-expert-traders__meta">
            <div class="vpm-admin-expert-traders__stats">
                <p>{{ $trader->name }}</p>
                <p>Copiers: {{ number_format($trader->followers) }}</p>
                <p>Open Trades: {{ number_format($trader->open_trades_count) }}</p>
            </div>
            <p class="vpm-admin-expert-traders__pending">Pending Requests: {{ $trader->pending_requests_count }}</p>
        </div>
    </a>
</li>