@extends('layouts.vpm-mobile-app', ['active' => 'copy-trading'])

@section('title', 'Expert Traders')

@section('content')
<div class="vpm-expert-traders" data-vpm-expert-traders>
    <x-vpm.page-intro
        title="Expert Traders"
        description="View expert traders and their statistics. Click on a trader to see more details. To follow their trades, click the &quot;Copy&quot; button."
    />

    <label class="vpm-expert-traders__search-wrap">
        <span class="sr-only">Search by expert trader name</span>
        <input
            type="search"
            class="vpm-input vpm-expert-traders__search"
            placeholder="Search by expert trader name"
            value=""
            autocomplete="off"
            data-vpm-expert-trader-search
        >
    </label>

    @if ($traders->isEmpty())
        <x-vpm.state-empty
            title="No expert traders available"
            description="Verified strategy managers will appear here when added by the platform."
        />
    @else
        <ul class="vpm-expert-traders__list" data-vpm-expert-trader-list>
            @foreach ($traders as $trader)
                <x-vpm.expert-trader-card
                    :trader="$trader"
                    :request="$userRequests->get($trader->id)"
                />
            @endforeach
        </ul>

        <p class="vpm-expert-traders__empty-search" data-vpm-expert-trader-empty hidden>
            No traders match your search.
        </p>
    @endif

    <a href="{{ route('app.copy-trading.agreement') }}" class="vpm-expert-traders__agreement">
        Copy Trading Agreement
    </a>
</div>
@endsection