@php
    $avgRateToPkr = $account->average_conversion_rate_to_pkr;
    $showAverageRate = strtoupper((string) $account->currency) !== 'PKR';
    $latestCreditType = $bucket === 'wallets'
        ? trim((string) $account->getAttribute('latest_credit_type_label'))
        : '';
@endphp

<a class="card card-hover"
   href="{{ route('finance.transactions', ['bucket' => $bucket, 'bank_account_id' => $account->id]) }}"
   style="padding:20px;cursor:pointer;display:flex;flex-direction:column;gap:12px;min-height:200px">
    <div class="flex items-center justify-between">
        <div class="bank-logo" style="background:{{ $bucketAccent[1] }};color:var(--text)">{{ $accountInitials($account) }}</div>
        <span class="pill">{{ $maskedAccount($account) }}</span>
    </div>
    <div style="flex:1">
        <div style="font-size:22px;font-weight:800;color:var(--text);line-height:1.15">{{ $account->name }}</div>
        <div class="text-sm mt-1" style="color:var(--muted);font-weight:500">{{ $account->bank_name }}</div>
        @if($latestCreditType !== '')
            <div style="margin-top:8px">
                <span class="pill pill-cyan" style="font-size:10.5px;padding:2px 8px">Credit Type: {{ $latestCreditType }}</span>
            </div>
        @endif
    </div>
    <div class="flex items-end justify-between gap-3">
        <div>
            <div class="text-xs" style="color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;font-weight:600">Balance</div>
            <div class="text-sm font-semibold" style="color:var(--text-2)">{{ $metrics->money($account->current_balance, $account->currency) }}</div>
        </div>
        @if($showAverageRate)
            <div style="text-align:right">
                <div class="text-xs" style="color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;font-weight:600">Avg {{ $account->currency }}-&gt;PKR</div>
                <div class="text-sm font-semibold" style="color:var(--text-2)">
                    {{ $avgRateToPkr !== null ? number_format((float) $avgRateToPkr, 2) : '-' }}
                </div>
            </div>
        @endif
        <div class="tile-arrow" style="width:28px;height:28px">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
        </div>
    </div>
</a>