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

@section('title', 'Deposits')

@section('content')
<div class="vpm-page">
    <x-vpm.page-intro
        title="Deposits"
        description="View and manage client deposits from the admin panel. Ensure that deposits have been sufficiently confirmed on the blockchain before updating their status."
    />

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

        @if ($deposits->isEmpty())
            <x-vpm.state-empty
                title="No deposits yet"
                description="Client deposit requests will appear here once submitted."
                icon="input"
            />
        @else
            <ul class="vpm-admin-deposits__list" data-vpm-deposit-list>
                @foreach ($deposits as $deposit)
                    <x-vpm.admin-deposit-row :deposit="$deposit" />
                @endforeach
            </ul>

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

@if ($errors->any() && old('_deposit'))
    @push('scripts')
        <script>document.body.dataset.vpmReopenDialog = 'deposit-dialog-{{ old('_deposit') }}';</script>
    @endpush
@endif
@endsection