<div class="pb-10" data-testid="wallet-balance-search-header">
    <!-- Header & Search -->
    <div class="flex flex-col lg:flex-row justify-between items-center mb-6">
        <div></div> <!-- Placeholder for spacing or icons -->

        <div class="w-full lg:w-1/3 mt-4 lg:mt-0">
            <div class="flex items-center h-9 px-3 border border-gray-300 rounded-full bg-transparent">
                <svg class="w-5 h-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M9.167 17.5C4.573 17.5.833 13.76.833 9.167c0-4.594 3.74-8.334 8.334-8.334 4.593 0 8.333 3.74 8.333 8.334 0 4.593-3.74 8.333-8.333 8.333zm0-15.447c-3.927 0-7.114 3.195-7.114 7.114 0 3.918 3.187 7.113 7.114 7.113s7.114-3.195 7.114-7.113c0-3.92-3.187-7.114-7.114-7.114z"/>
                    <path d="M18.097 19.167c-.272 0-.543-.1-.758-.315l-2.861-2.859a1.078 1.078 0 0 1 0-1.515 1.08 1.08 0 0 1 1.516 0l2.861 2.859c.415.415.415 1.1 0 1.515a1.061 1.061 0 0 1-.758.315z"/>
                </svg>
                <input
                    type="text"
                    id="searchWalletCoin"
                    data-testid="search-wallet-coin"
                    placeholder="Search"
                    class="ml-3 w-full text-gray-200 placeholder-gray-400 text-sm font-sans bg-transparent focus:outline-none"
                />
            </div>
        </div>
    </div>

    <!-- My Assets Heading -->
    <div class="py-4">
        <h5 class="text-gray-100 text-2xl font-semibold">My Assets</h5>
    </div>

    <!-- Desktop Wallet List Table -->
    <div class="hidden sm:block space-y-2">
        <!-- Table Header -->
        <div class="flex  p-2 text-gray-400 text-sm font-medium">
            <div class="flex-1 flex items-center ml-6">Type</div>
            <div class="w-1/3  flex items-center ">Amount</div>
            <div class="w-1/3  flex items-center ">Value (USD)</div>
        </div>
        
        <div class="dashboard-asset-list">

        
        <!-- Wallet Items -->
        @forelse($wallets as $wallet)
        <a href="{{route('user.wallet.coin.index', $wallet->coin?->symbol)}}" class="block p-6 hover:bg-gray-700 transition flex justify-between items-center">
            <div class="flex items-center flex-1">
                <img src="{{secure_url('/')}}/assets/img/icons/{{$wallet->coin?->logo}}" class="w-6 h-6 rounded-full" alt="{{$wallet->coin?->symbol}}">
                <div class="ml-3">
                    <div class="text-gray-100 font-medium">{{ ucfirst($wallet->coin?->symbol) }}</div>
                    <div class="text-gray-400 text-xs">{{ ucfirst($wallet->coin?->name) }}</div>
                </div>
            </div>

            <div class="w-1/3 flex items-center">
                <div class="text-gray-100 font-medium">{{ coin_format($wallet->balance, $wallet->coin?->digit ?? 2) }}</div>
            </div>

            <div class="w-1/3 flex items-center">
                <div class="text-gray-400 text-sm font-medium">
                    ≈ {{ fiat_format($wallet->convertedBalance($user->userCurrency)) }} {{$user->userCurrency}}
                </div>
            </div>
        </a>
        @empty
        <div class="text-gray-400 text-center py-6">No assets found</div>
        @endforelse
        </div>
    </div>

    <!-- Mobile Wallet Cards -->
    <div class="sm:hidden space-y-3">
        @forelse($wallets as $wallet)
        <a href="{{route('user.wallet.coin.index', $wallet->coin?->symbol)}}" class="block bg-gray-800 rounded-xl p-4 hover:bg-gray-700 transition">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <img src="{{secure_url('/')}}/assets/img/icons/{{$wallet->coin?->logo}}" class="w-6 h-6 rounded-full" alt="{{$wallet->coin?->symbol}}">
                    <div class="ml-3">
                        <div class="text-gray-100 font-semibold">{{ ucfirst($wallet->coin?->symbol) }}</div>
                        <div class="text-gray-400 text-xs">{{ ucfirst($wallet->coin?->name) }}</div>
                    </div>
                </div>

                <div class="text-right">
                    <div class="text-gray-100 font-semibold">{{ coin_format($wallet->balance, $wallet->coin?->digit ?? 2) }}</div>
                    <div class="text-gray-400 text-xs">
                        ≈ {{ fiat_format($wallet->convertedBalance($user->userCurrency)) }} {{$user->userCurrency}}
                    </div>
                </div>
            </div>
        </a>
        @empty
        <div class="text-gray-400 text-center py-6">No assets found</div>
        @endforelse
    </div>
</div>
