@props(['trader', 'request' => null])

<li
    class="vpm-expert-traders__item"
    data-vpm-trader-name="{{ strtolower($trader->name) }}"
>
    <article class="vpm-expert-trader-card">
        <div class="vpm-expert-trader-card__profile">
            @if ($trader->photoUrl())
                <img
                    src="{{ $trader->photoUrl() }}"
                    alt="{{ $trader->name }}"
                    class="vpm-expert-trader-card__avatar"
                    width="80"
                    height="80"
                    loading="lazy"
                >
            @else
                <div class="vpm-expert-trader-card__avatar vpm-expert-trader-card__avatar--fallback" aria-hidden="true">
                    {{ $trader->initials() }}
                </div>
            @endif

            <div class="vpm-expert-trader-card__identity">
                <h3 class="vpm-expert-trader-card__name">{{ $trader->name }}</h3>

                @if ($request?->status === 'approved')
                    <button type="button" class="vpm-expert-trader-card__btn vpm-expert-trader-card__btn--copy" disabled>Copying</button>
                @elseif ($request?->status === 'pending')
                    <button type="button" class="vpm-expert-trader-card__btn vpm-expert-trader-card__btn--pending" disabled>Pending</button>
                @elseif ($request?->status === 'rejected')
                    <button type="button" class="vpm-expert-trader-card__btn vpm-expert-trader-card__btn--pending" disabled>Rejected</button>
                @else
                    <form method="POST" action="{{ route('app.copy-trading.request', $trader) }}" class="vpm-expert-trader-card__form">
                        @csrf
                        <button type="submit" class="vpm-expert-trader-card__btn vpm-expert-trader-card__btn--copy">Copy</button>
                    </form>
                @endif
            </div>
        </div>

        <div class="vpm-expert-trader-card__stats" aria-label="{{ $trader->name }} statistics">
            <div class="vpm-expert-trader-card__stat">
                <p class="vpm-expert-trader-card__stat-value">{{ $trader->formattedWinPercent() }}</p>
                <h4 class="vpm-expert-trader-card__stat-label">Return Rate</h4>
            </div>
            <div class="vpm-expert-trader-card__stat">
                <p class="vpm-expert-trader-card__stat-value">{{ number_format($trader->followers) }}</p>
                <h4 class="vpm-expert-trader-card__stat-label">Followers</h4>
            </div>
            <div class="vpm-expert-trader-card__stat">
                <p class="vpm-expert-trader-card__stat-value">{{ $trader->formattedMinimum() }}</p>
                <h4 class="vpm-expert-trader-card__stat-label">Minimum</h4>
            </div>
        </div>
    </article>
</li>