{{-- The three figures above a payments table: $stats comes from the controller. --}}
<div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
    <x-stat-card :label="__('Paid this month')" :value="$stats['paid_this_month']" :hint="now()->format('F Y')" tone="emerald">
        <x-slot name="icon">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        </x-slot>
    </x-stat-card>

    <x-stat-card
        :label="__('Pending')"
        :value="$stats['pending_total']"
        :hint="trans_choice(':count payment waiting|:count payments waiting', $stats['pending_count'], ['count' => $stats['pending_count']])"
        tone="amber"
    >
        <x-slot name="icon">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        </x-slot>
    </x-stat-card>

    <x-stat-card :label="__('Total paid')" :value="$stats['paid_total']" :hint="__('All time')">
        <x-slot name="icon">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
            </svg>
        </x-slot>
    </x-stat-card>
</div>