@extends('layouts.vpm-dashboard', ['active' => 'traders', 'area' => 'admin'])

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

@section('content')
<div class="vpm-page vpm-admin-expert-traders-page">
    <x-vpm.page-intro
        title="Expert Traders"
        description="View, manage, and oversee the performance of expert traders, ensuring all trader profiles are up-to-date within the admin panel."
    />

    <button
        type="button"
        class="vpm-btn vpm-btn--primary vpm-btn--create-expert"
        data-vpm-dialog-open="create-expert-trader-dialog"
    >
        Create expert trader
    </button>

    <div class="vpm-admin-expert-traders" data-vpm-expert-traders>
        <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"
                autocomplete="off"
                spellcheck="false"
                data-vpm-expert-trader-search
            >
        </label>

        @if ($traders->isEmpty())
            <x-vpm.state-empty
                title="No expert traders yet"
                description="Create the first copy-trading leader to get started."
                icon="supervisor_account"
            >
                <x-slot:action>
                    <x-vpm.button
                        type="button"
                        variant="primary"
                        class="vpm-btn--sm"
                        data-vpm-dialog-open="create-expert-trader-dialog"
                    >
                        Create expert trader
                    </x-vpm.button>
                </x-slot:action>
            </x-vpm.state-empty>
        @else
            <ul class="vpm-admin-expert-traders__list" data-vpm-expert-trader-list>
                @foreach ($traders as $trader)
                    <x-vpm.admin-expert-trader-row :trader="$trader" />
                @endforeach
            </ul>

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

<x-vpm.admin-create-expert-trader-dialog />

@if ($errors->any() && old('_trader') === 'create')
    @push('scripts')
        <script>document.body.dataset.vpmReopenDialog = 'create-expert-trader-dialog';</script>
    @endpush
@endif
@endsection