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

@section('title', 'Clients')

@section('content')
<div class="vpm-page">
    <x-vpm.page-intro
        title="Clients"
        description="Access and manage client information directly from the admin panel."
    />

    <div class="vpm-admin-expert-traders" data-vpm-admin-clients>
        <label class="vpm-expert-traders__search-wrap">
            <span class="sr-only">Search by client name</span>
            <input
                type="search"
                class="vpm-input vpm-expert-traders__search"
                placeholder="Search by client name"
                autocomplete="off"
                spellcheck="false"
                data-vpm-client-search
            >
        </label>

        @if ($clients->isEmpty())
            <x-vpm.state-empty
                title="No clients yet"
                description="Create the first client account to get started."
                icon="groups"
            >
                <x-slot:action>
                    <x-vpm.button variant="primary" class="vpm-btn--sm" href="{{ route('admin.clients.create') }}">
                        Create client
                    </x-vpm.button>
                </x-slot:action>
            </x-vpm.state-empty>
        @else
            <ul class="vpm-admin-expert-traders__list" data-vpm-client-list>
                @foreach ($clients as $client)
                    <x-vpm.admin-client-row :client="$client" />
                @endforeach
            </ul>

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