{{-- Wallet balance peek (links to the account wallet on account.ladill.com). --}}
@php
    $onNavigate = $onNavigate ?? null;
    $class = trim((string) ($class ?? 'mx-1'));
    $balanceRoute = (string) config('billing.wallet_balance_route', 'wallet.balance');
    $balanceUrl = \Illuminate\Support\Facades\Route::has($balanceRoute) ? route($balanceRoute) : null;
    $walletUrl = \Illuminate\Support\Facades\Route::has('user.wallet.index')
        ? route('user.wallet.index')
        : (function_exists('ladill_account_url') ? ladill_account_url('/wallet') : '#');
@endphp
@if ($balanceUrl)
<a href="{{ $walletUrl }}"
   x-data="walletWidget({ url: {{ \Illuminate\Support\Js::from($balanceUrl) }} })" x-init="load()"
   @wallet-balance-refresh.window="load()"
   @if ($onNavigate) @click="{{ $onNavigate }}" @endif
   class="{{ $class }} flex items-center justify-between gap-3 rounded-xl border border-slate-100 bg-gradient-to-r from-indigo-50 to-slate-50 px-3 py-2.5 transition hover:border-indigo-200 hover:from-indigo-100/70">
    <span class="flex items-center gap-2.5 min-w-0">
        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 1 3 7.5m18 4.5v3.75A2.25 2.25 0 0 1 18.75 18H5.25A2.25 2.25 0 0 1 3 15.75V7.5m18 4.5h-3.75a1.5 1.5 0 0 0 0 3H21M3 7.5A2.25 2.25 0 0 1 5.25 5.25h11.25A2.25 2.25 0 0 1 18.75 7.5"/>
            </svg>
        </span>
        <span class="min-w-0">
            <span class="block text-[11px] font-medium text-slate-500">Wallet balance</span>
            <span class="block truncate text-sm font-semibold text-slate-900" x-text="display"></span>
        </span>
    </span>
    <svg class="h-4 w-4 shrink-0 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m9 5 7 7-7 7"/></svg>
</a>
@endif